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

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

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

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

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

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

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

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

プッシュ通知メッセージの配信のためにサービスワーカーを動作させると、特にバッテリーなどのリソースを消費します。これを扱う方式はブラウザーごとに異なっており、現在標準となる仕組みはありません。 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 草案 初回定義

ブラウザーの対応

PushEvent

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
PushEvent
実験的
Chrome 完全対応 42Edge 完全対応 16
無効
完全対応 16
無効
無効 From version 16: this feature is behind the Enable service workers preference.
完全対応 17
Firefox 完全対応 44
補足
完全対応 44
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)
補足 Enabled only in Nightly, Developer Edition, and Beta channels.
IE 未対応 なしOpera 完全対応 37Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 42Edge Mobile 未対応 なしFirefox Android 完全対応 44
完全対応 44
完全対応 48
補足
補足 Push enabled by default.
Opera Android 完全対応 37Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
PushEvent() constructor
実験的
Chrome 完全対応 42Edge 完全対応 16
無効
完全対応 16
無効
無効 From version 16: this feature is behind the Enable service workers preference.
完全対応 17
Firefox 完全対応 44
補足
完全対応 44
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)
補足 Enabled only in Nightly, Developer Edition, and Beta channels.
IE 未対応 なしOpera 完全対応 37Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 42Edge Mobile 未対応 なしFirefox Android 完全対応 44
完全対応 44
完全対応 48
補足
補足 Push enabled by default.
Opera Android 完全対応 37Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
data
実験的
Chrome 完全対応 57Edge 完全対応 16
無効
完全対応 16
無効
無効 From version 16: this feature is behind the Enable service workers preference.
完全対応 17
Firefox 完全対応 44
補足
完全対応 44
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)
補足 Enabled only in Nightly, Developer Edition, and Beta channels.
IE 未対応 なしOpera 完全対応 44Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 57Edge Mobile 未対応 なしFirefox Android 完全対応 44
完全対応 44
完全対応 48
補足
補足 Push enabled by default.
Opera Android 完全対応 44Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

PushMessageData

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
PushMessageData
実験的
Chrome 完全対応 50Edge ? Firefox 完全対応 44
補足
完全対応 44
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE 未対応 なしOpera 完全対応 37Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 50Edge Mobile ? Firefox Android 完全対応 48Opera Android 完全対応 37Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
arrayBuffer
実験的
Chrome 完全対応 50Edge ? Firefox 完全対応 44
補足
完全対応 44
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE 未対応 なしOpera 完全対応 37Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 50Edge Mobile ? Firefox Android 完全対応 48Opera Android 完全対応 37Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
blob
実験的
Chrome 完全対応 50Edge ? Firefox 完全対応 44
補足
完全対応 44
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE 未対応 なしOpera 完全対応 37Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 50Edge Mobile ? Firefox Android 完全対応 48Opera Android 完全対応 37Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
json
実験的
Chrome 完全対応 50Edge ? Firefox 完全対応 44
補足
完全対応 44
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE 未対応 なしOpera 完全対応 37Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 50Edge Mobile ? Firefox Android 完全対応 48Opera Android 完全対応 37Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
text
実験的
Chrome 完全対応 50Edge ? Firefox 完全対応 44
補足
完全対応 44
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR).
IE 未対応 なしOpera 完全対応 37Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 50Edge Mobile ? Firefox Android 完全対応 48Opera Android 完全対応 37Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

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

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