Push API

Push API は、ウェブアプリケーションがサーバーからメッセージ (プッシュ通知) を受信できるようにします。ウェブアプリケーションがフォアグランド状態かどうか、読み込まれているかどうかに関わらず利用できます。開発者は、オプトインしたユーザーへ非同期の通知と更新を届けることができ、タイムリーな新着コンテンツによってユーザーの関心を得られるでしょう。

プッシュ通知の概念と使い方

PushManager へのサブスクリプションを実装する場合、アプリで CSRF/XSRF 問題を起こさないように保護することが非常に重要です。詳しくは以下の記事を参照してください。

アプリがプッシュ通知メッセージを受信するために、アプリでサービスワーカーが動作している必要があります。サービスワーカーが動作している時に、 PushManager.subscribe() を利用してプッシュ通知に加入することができます。

返値の PushSubscription には、プッシュ通知メッセージの配信に必要な情報であるエンドポイントとデータ送信用の暗号キーがすべて含まれています。

プッシュ通知メッセージを受信すると、そのメッセージを扱うためのサービスワーカーが起動します。これは、 ServiceWorkerGlobalScope.onpush イベントハンドラーへ配信されます。これにより、例えば (ServiceWorkerRegistration.showNotification() を使用して) 受信した通知を表示するなど、アプリケーションがプッシュ通知の受信に応じた動作ができます。

各サブスクリプションは、サービスワーカーに対して固有です。サブスクリプションのエンドポイントは、固有の capability URL です。サブスクリプションのエンドポイント URL はアプリケーションにメッセージを送るために不可欠な情報です。エンドポイント URL は秘密にしておく必要があります。さもないと、他のアプリケーションがあなたのアプリケーションにプッシュ通知メッセージを送ることができてしまいます。

プッシュ通知メッセージの配信のためにサービスワーカーを動作させると、特にバッテリーなどのリソースを消費します。これを扱う方式はブラウザーごとに異なっており、現在標準となる仕組みはありません。 Firefox も Chrome も通知を生成するプッシュ通知メッセージの数に制限を設けていません。 Firefox は通知を表示しないアプリケーションに送信されるプッシュ通知メッセージの数に制限 (クォータ) を設けていますが、 Chrome には制限がありません。この制限数は、ウェブサイトを訪れるたびに更新されます。

インターフェイス

PushEvent
ServiceWorkerグローバルスコープ に送られるプッシュアクションを表します。これは、アプリケーションから PushSubscription へ送られる情報を含んでいます。
PushManager
プッシュ通知のリクエスト URL といった、サードパーティのサーバーからプッシュ通知を受け取るための手段を提供します。
PushMessageData
サーバーから送られたプッシュ情報にアクセスする手段を提供し、受信したデータを操作するメソッドを含みます。
PushSubscription
サブスクリプションのエンドポイント URL を提供し、プッシュサービスから購読を解除できるようにします。
PushSubscriptionOptions (en-US)
プッシュサブスクリプションに関連付けられたオプションを表します。

サービスワーカーへの追加機能

以下の Service Worker API への追加機能は、 Push API 仕様に含まれています。これらは、プッシュ通知メッセージを使用するためのエントリーポイントを提供するため、および、プッシュとサブスクリプション変更イベントの監視と応答のための追加です。

ServiceWorkerRegistration.pushManager 読取専用
購読を含むサブスクリプションの管理、アクティブなサブスクリプションの取得、プッシュ権限状態の取得を行う PushManager インターフェイスへの参照を返します。これは、プッシュ通知メッセージを使用するためのエントリーポイントです。
ServiceWorkerGlobalScope.onpush
push イベントが発生する度に発動します。これは、サーバーがプッシュしたメッセージを受信する度に起こります。
ServiceWorkerGlobalScope.onpushsubscriptionchange
pushsubscriptionchange イベントが発生する度に発動するイベントハンドラです。例えば、プッシュサブスクリプションが無効になったり、無効になりつつある時 (即ち、プッシュサーバーが有効期限を設定している場合) です。

Mozilla の ServiceWorker Cookbook は便利なプッシュ通知の例をたくさん揃えています。

仕様書

仕様書 状態 備考
Push API 草案 初回定義

ブラウザーの互換性

PushEvent

BCD tables only load in the browser

PushMessageData

BCD tables only load in the browser

関連情報