プッシュ API

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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

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

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

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

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

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

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

インターフェイス

PushEvent

ServiceWorkerグローバルスコープ に送られるプッシュアクションを表します。これは、アプリケーションから PushSubscription へ送られる情報を含んでいます。

PushManager

プッシュ通知のリクエスト URL など、サードパーティのサーバーからプッシュ通知を受け取るための手段を提供します。

PushMessageData

サーバーから送られたプッシュ情報にアクセスする手段を提供し、受信したデータを操作するメソッドを含みます。

PushSubscription

サブスクリプションのエンドポイント URL を提供し、プッシュサービスからサブスクリプションを脱退できるようにします。

PushSubscriptionOptions

プッシュサブスクリプションに関連付けられたオプションを表します。

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

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

ServiceWorkerRegistration.pushManager 読取専用

加入を含むサブスクリプションの管理、アクティブなサブスクリプションの取得、プッシュ権限状態の取得を行う PushManager インターフェイスへの参照を返します。これは、プッシュ通知メッセージを使用するためのエントリーポイントです。

onpush

push イベントが発生する度に発動します。これは、サーバーがプッシュしたメッセージを受信する度に起こります。

onpushsubscriptionchange

pushsubscriptionchange イベントが発生する度に発動するイベントハンドラーです。例えば、プッシュサブスクリプションが無効になったり、無効になりつつある時(すなわち、プッシュサーバーが有効期限を設定している場合)です。

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

仕様書

Specification
Push API
# pushevent-interface
Push API
# pushmessagedata-interface

ブラウザーの互換性

api.PushEvent

BCD tables only load in the browser

api.PushMessageData

BCD tables only load in the browser

関連情報