【PWA】Web Push APIを使用してブラウザに通知を送信する

プッシュ通知を送信するには、Web Push APIを使用してブラウザに通知を送信します。以下は、プッシュ通知を送信するJavaScriptのサンプルコードです。※プッシュ通知を送信するにはサーバーサイドの実装も必要です。

Service Workerの登録をする

このコードは、Service Worker を登録するための JavaScript スクリプトです。PWAを使用するにはService Workerが必要ですので、登録をします。

       if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('service-worker.js')
                .then(registration => {
                    console.log('Service Worker 登録成功:', registration);
                })
                .catch(error => {
                    console.error('Service Worker 登録失敗:', error);
                });
        }

register メソッドは Promise を返し、then ブロックでは Service Worker の登録が成功した場合にコンソールに成功メッセージを出力しています。

catch ブロックでは登録が失敗した場合にエラーメッセージをコンソールに出力しています。

プッシュ通知の権限を許可

こちらのコードは、プッシュ通知の権限をユーザーにリクエストするためのJavaScript関数です。具体的には、Notification.requestPermission() メソッドを使用して、ユーザーに対してプッシュ通知の権限をリクエストしています。

        function subscribePush() {
            // プッシュ通知の権限をリクエスト
            Notification.requestPermission().then(permission => {
                if (permission === 'granted') {
                    alert('プッシュ通知の権限が許可されました。');
                } else {
                    alert('プッシュ通知の権限が拒否されました。');
                }
            });
        }

プッシュ通知を送信する

このコードは、プッシュ通知を送信するための JavaScript 関数です。

function sendPushNotification() {
    if (Notification.permission !== 'granted') {
        alert('プッシュ通知の権限がありません。');
        return;
    }

    // プッシュ通知のオプションを設定
    const options = {
        body: 'プッシュ通知の本文',
        icon: '画像のURL',
    };

    // プッシュ通知を送信
    navigator.serviceWorker.register('service-worker.js').then(registration => {
        registration.showNotification('プッシュ通知のタイトル', options);
    });
}

この関数は以下のような手順で動作します：

1. Notification.permission !== 'granted' は、プッシュ通知の権限が許可されていない場合にアラートメッセージを表示し、関数を終了させます。
2. プッシュ通知のオプションは、options オブジェクト内で指定されています。これには通知の本文 (body) とアイコンのURL (icon) が含まれています。
3. navigator.serviceWorker.register('service-worker.js') で Service Worker を登録し、その後 registration.showNotification('プッシュ通知のタイトル', options) でプッシュ通知を表示します。

まとめ

この関数を呼び出すと、プッシュ通知が送信され、表示されます。

ただし、実際のプッシュ通知が動作するには、Service Worker が正しく登録され、バックグラウンドで実行されている必要があります。