これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

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

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

アプリがプッシュメッセージを受信するために、アプリで Service worker が動作している必要があります。 Serivce worker が動作している時に、 PushManager.subscribe() を利用してプッシュ通知の購読ができます。

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

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

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

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

メモ: Gecko 44 以降では、通知の表示中に別のプッシュメッセージが発行された場合、アプリケーションごとのプッシュメッセージ数の上限は、3秒経つまで加算されません。これは、大量のプッシュメッセージを受け取り、そのすべてが表示される通知を生成するわけではない場合に有効です。

メモ: Chrome バージョン 52 より前のバージョンでは、プッシュメッセージの配信のために Google Cloud Messaging にプロジェクトを作成する必要があり、そのプロジェクト番号と紐付いた API キーをプッシュ通知の配信に利用していました。また、このサービスを利用するには、アプリマニフェストに特別な値を設定する必要があります。

インターフェイス

PushEvent
ServiceWorkerグローバルスコープ に送られるプッシュアクションを表します。これは、アプリケーションから PushSubscription へ送られる情報を含んでいます。
PushManager
プッシュ通知のリクエスト URL といった、サードパーティのサーバーからプッシュ通知を受け取るための手段を提供します。このインターフェイスは、非推奨になった PushRegistrationManager インターフェイスの機能を置き換えるものです。
PushMessageData
サーバーから送られたプッシュ情報にアクセスする手段を提供し、受信したデータを操作するメソッドを含みます。
PushSubscription
サブスクリプションのエンドポイント URL を提供し、プッシュサービスから購読を解除できるようにします。

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

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

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

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

仕様書

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

ブラウザーの対応

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本対応 42.0 44.0 (44.0)[1][3] 未サポート[2] ? ?
PushEvent.data,
PushMessageData
未サポート 44.0 (44.0)[3] 未サポート 未サポート 未サポート
機能 Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本対応 未サポート 未サポート 48.0 (48.0)[4] 未サポート ?[2] ? ? 42.0
PushEvent.data,
PushMessageData
未サポート 未サポート 48.0 (48.0)[4] 未サポート 未サポート 未サポート 未サポート 未サポート
  • [1] 現在、デスクトップ版 Firefox でのみ有効です。また、プッシュメッセージは Firefox の実行中にのみ配信されます。
  • [2] 現在、未実装です。Microsoft Edge ステータス情報 を参照してください。
  • [3] Push (および Service Workers) は Firefox 45 延長サポートリリース版 (ESR.) で無効化されています。
  • [4] Android 版 Firefox バージョン 48 では、Push が既定で有効化されています。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Uemmra3, Marsf, TETRA2000, chrisdavidmills
最終更新者: mfuji09,