【PWA】ボタンをクリックしてプッシュ通知を送り画像を添付する方法

PWA（プログレッシブウェブアプリ）

2024.01.262024.01.28

Web Push通知を実装するために、Progressive Web App（PWA）にプッシュ通知・Web Push機能を組み込んでみます。

プッシュ通知の権限をリクエスト（Notification.requestPermission）
プッシュ通知のオプションを設定（registration.showNotification）
iPhoneは画像添付できない…？
まとめ

プッシュ通知の権限をリクエスト（Notification.requestPermission）

このコードを実行すると、ユーザーがプッシュ通知の許可または拒否の選択をすることができます。

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

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

subscribePush() 関数：
- プッシュ通知の権限をリクエストするために、Notification.requestPermission() を呼び出しています。
- リクエストが解決された後、与えられた権限が ‘granted’（許可された）かどうかを確認し、それに基づいてアラートメッセージを表示します。許可された場合、「プッシュ通知の権限が許可されました。」とアラートが表示され、拒否された場合は「プッシュ通知の権限が拒否されました。」と表示されます。
sendPushNotification() 関数：
- プッシュ通知の権限が ‘granted’（許可された）でない場合、アラートメッセージを表示して関数を終了します。これは、プッシュ通知を送信する前に権限が必要なためです。

プッシュ通知のオプションを設定（registration.showNotification）

プッシュ通知のオプションを設定し、それを使用してプッシュ通知を送信します。

// プッシュ通知のオプションを設定
const options = {
    body: 'プッシュ通知の本文',
    icon: 'XXXXXXXXX/24690641.png',
    image: 'XXXXXXXXXXXXXXXXXX28254971_s.jpg',
};

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

options オブジェクト：
- body: プッシュ通知の本文を指定します。この場合は「プッシュ通知の本文」となります。
- icon: プッシュ通知のアイコンを指定します。指定されたURLの画像が使用されます。
- image: プッシュ通知の本文に添付される画像を指定します。指定されたURLの画像が使用されます。
navigator.serviceWorker.register('service-worker.js').then(registration => {...})：
- Service Worker を登録します。Service Worker はバックグラウンドで動作し、プッシュ通知の処理などを担当します。
- registration.showNotification('プッシュ通知のタイトル', options); により、プッシュ通知が表示されます。タイトルと先ほど設定した options オブジェクトが使用されます。