ServiceWorkerGlobalScope: pushsubscriptionchange イベント

pushsubscriptionchange イベントはグローバルスコープとしての ServiceWorker へ送信され、、アプリケーションの制御の外から起動されたプッシュ通知への加入状況が変化したことを示します。これはブラウザーが加入を更新した場合に発生しますが、加入が取り消されたり失われたりしたときにも発生する可能性があります。

加入に関する情報をアプリケーションサーバーと共有する方法を示す例では fetch() を使用する傾向がありますが、これは実際の使用には必ずしも最適な選択ではありません。たとえば、アプリがオフラインの場合は機能しないためです。

サービスワーカーとアプリサーバー間で加入情報を同期するのに別の方法を使用することを検討するか、 fetch() を使用するコードが、データ交換の試行が失敗した場合を処理するのに十分堅牢であることを確認してください。

この例は、サービスワーカーのコンテキストで実行するものであり、 pushsubscriptionchange イベントを待ち受けて、無効になった場合に再加入します。

self.addEventListener("pushsubscriptionchange", event => {
  event.waitUntil(swRegistration.pushManager.subscribe(event.oldSubscription.options)
    .then(subscription => {
      return fetch("register", {
        method: "post",
        headers: {
          "Content-type": "application/json"
        },
        body: JSON.stringify({
          endpoint: subscription.endpoint
        })
      });
    })
  );
}, false);

加入の有効期限が切れたことを示す pushsubscriptionchange イベントが到着すると、プッシュマネージャーの subscribe() メソッドを呼び出して再加入します。返された Promise が解決されると、新しい加入を受け取ります。これは、 fetch() 呼び出しを使用してアプリサーバーに配信され、 JSON 形式で加入の endpoint の返信をアプリサーバーに送信します。

onpushsubscriptionchange イベントハンドラープロパティを使用してイベントハンドラーを設定することもできます。

self.onpushsubscriptionchange = event => {
  event.waitUntil(swRegistration.pushManager.subscribe(event.oldSubscription.options)
    .then(subscription => {
      /* ... */
    )
};

• Push API の使用
• onpushsubscriptionchange イベントハンドラープロパティ