ServiceWorkerGlobalScope: pushsubscriptionchange イベント

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

バブリング なし
キャンセル 不可
インターフェイス PushSubscriptionChangeEvent
イベントハンドラープロパティ onpushsubscriptionchange

使用上のメモ

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

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

メモ: この仕様書の早期の草稿では、このイベントは PushSubscription が期限切れになった時に送信されるよう定義されていました。

この例は、サービスワーカーのコンテキストで実行するものであり、 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
pushsubscriptionchange の定義
草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
pushsubscriptionchange eventChrome 完全対応 40Edge 完全対応 ≤79Firefox 完全対応 44
補足
完全対応 44
補足
補足 Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE 未対応 なしOpera 完全対応 24Safari 完全対応 11.1WebView Android 完全対応 40Chrome Android 完全対応 40Firefox Android 完全対応 44Opera Android 完全対応 24Safari iOS 完全対応 11.3Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報