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

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

目次

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

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

3. iPhoneは画像添付できない…？

4. まとめ

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

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

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

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

1. subscribePush() 関数：

   • プッシュ通知の権限をリクエストするために、Notification.requestPermission() を呼び出しています。

   • リクエストが解決された後、与えられた権限が ‘granted’（許可された）かどうかを確認し、それに基づいてアラートメッセージを表示します。許可された場合、「プッシュ通知の権限が許可されました。」とアラートが表示され、拒否された場合は「プッシュ通知の権限が拒否されました。」と表示されます。

2. 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);
});

1. options オブジェクト：

   • body: プッシュ通知の本文を指定します。この場合は「プッシュ通知の本文」となります。

   • icon: プッシュ通知のアイコンを指定します。指定されたURLの画像が使用されます。

   • image: プッシュ通知の本文に添付される画像を指定します。指定されたURLの画像が使用されます。

2. navigator.serviceWorker.register('service-worker.js').then(registration => {...})：

   • Service Worker を登録します。Service Worker はバックグラウンドで動作し、プッシュ通知の処理などを担当します。

   • registration.showNotification('プッシュ通知のタイトル', options); により、プッシュ通知が表示されます。タイトルと先ほど設定した options オブジェクトが使用されます。

この部分のコードは、プッシュ通知を構築し、表示するための準備を行っています。実際のプッシュ通知が表示されるには、ユーザーがプッシュ通知の権限を許可している必要があります。

続きはこちら
https://eguweb.jp/pwa/70593/