Push messages | Frontend Practical Guide

Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`PushEvent`	42	17	44	16	42	16.4
`permission_push` `push` 権限	43	79	46	17	43	17
`data` data は PushEvent インターフェイスの読み取り専用プロパティで、PushSubscription に送信されたデータを含む PushMessageData オブジェクトへの参照を返します。	50	17	44	16	50	16.4
`PushEvent` PushEvent() コンストラクターは、新しい PushEvent オブジェクトを生成します。このコンストラクターは、サービスワーカーにのみ公開されていることに注意してください。	42	17	44	16	42	16.4
`PushManager` PushManager はプッシュ API のインターフェイスで、サードパーティのサーバーからの通知だけではなく、プッシュ通知へのリクエスト URL を取得するための方法を提供します。	42	17	44	16	42	16.4
`getSubscription` PushManager.getSubscription() は PushManager インターフェイスのメソッドで、既存のプッシュサブスクリプションを取得します。	42	17	44	16	42	16.4
`permissionState` permissionState() は PushManager インターフェイスのメソッドで、プッシュマネージャーの許可状態を示す文字列で解決される Promise を返します。許可状態は、'prompt' か 'denied'、'granted' のいずれかです。	44	17	44	16	44	16.4
`subscribe` subscribe() は PushManager インターフェイスのメソッドで、プッシュサービスに加入します。	42	17	44	16	42	16.4
`supportedContentEncodings_static` supportedContentEncodings は PushManager インターフェイスの静的な読み取り専用プロパティで、プッシュメッセージのペイロードを暗号化するために使用できる、対応しているコンテンツコードの配列を返します。	60	17	134	16	60	16.4
`PushMessageData` PushMessageData はプッシュ API のインターフェイスで、さまざまな形式でサーバーから送信されるプッシュテータを取得する方法を提供します。	50	17	44	16	50	16.4
`arrayBuffer` arrayBuffer() は PushMessageData インターフェイスのメソッドで、プッシュメッセージデータを ArrayBuffer オブジェクトとして抽出します。	50	17	44	16	50	16.4
`blob` blob() は PushMessageData インターフェイスのメソッドで、プッシュメッセージデータを Blob オブジェクトとして抽出します。	50	17	44	16	50	16.4
`bytes` PushMessageData インターフェースの bytes() メソッドは、プッシュメッセージデータを Uint8Array オブジェクトとして抽出します。	132	132	128	18	132	18
`json` json() は PushMessageData インターフェイスのメソッドで、プッシュメッセージのデータを JSON 文字列として解釈し、結果を返します。	50	17	44	16	50	16.4
`text` text() は PushMessageData インターフェイスのメソッドで、プッシュメッセージのデータをプレーンテキスト文字列として抽出します。	50	17	44	16	50	16.4
`PushSubscription` PushSubscription はプッシュ API のインターフェイスで、サブスクリプションの URL エンドポイントを提供し、ここからプッシュサービスの登録を脱退できます。	42	17	44	16	42	16.4
`endpoint` endpoint は PushSubscription インターフェイスの読み取り専用プロパティで、プッシュサブスクリプションに関連するエンドポイントの入った文字列を返します。	42	17	44	16	42	16.4
`expirationTime` expirationTime は PushSubscription インターフェイスの読み取り専用プロパティで、プッシュサブスクリプションに関連付けられたサブスクリプションの有効期限を DOMHighResTimeStamp で返します。存在しなければ null を返します。	60	17	96	16	60	16.4
`getKey` getKey() は PushSubscription インターフェイスのメソッドで、サーバーに送信されてプッシュメッセージのデータを暗号化するために使用される、クライアントの公開鍵を表す ArrayBuffer を返します。	42	17	44	16	42	16.4
`options` options は PushSubscription インターフェイスの読み取り専用プロパティで、サブスクリプションを作成するために用いられたオプションが入ったオブジェクトです｡	54	17	44	16	54	16.4
`toJSON` toJSON() は PushSubscription インターフェイスのメソッドで、標準のシリアライザーです。これは、このサブスクリプションのプロパティの JSON 表現を返す、便利なショートカットを提供します。	42	17	44	16	50	16.4
`unsubscribe` unsubscribe() は PushSubscription インターフェイスのメソッドで、現在のサブスクリプションから脱退に成功したときに論理値で解決される Promise を返します。	42	17	44	16	50	16.4
`PushSubscriptionChangeEvent`	138	17	137	16	138	16.4
`newSubscription`	138	17	137	16	138	16.4
`oldSubscription`	138	17	137	16	138	16.4
`PushSubscriptionChangeEvent` `PushSubscriptionChangeEvent()` コンストラクタ	138	17	137	16.1	138	16.4
`PushSubscriptionOptions` Push API の PushSubscriptionOptions インターフェイスは、プッシュサブスクリプションに関連付いたオプションを表します。	54	17	44	16	54	16.4
`applicationServerKey` PushSubscriptionOptions インターフェイスの applicationServerKey 読み取り専用プロパティは、プッシュサーバーが用いる公開鍵です。	54	17	44	16	54	16.4
`userVisibleOnly` PushSubscriptionOptions の userVisibleOnly 読み取り専用プロパティは、プッシュサブスクリプションがユーザーに見える効果を持つメッセージのみに使われるかどうかを表します。	54	17		16	54	16.4
`push_event` push イベントは、サービスワーカーがプッシュメッセージを受信したときにサービスワーカーのグローバルスコープ (ServiceWorkerGlobalScope インターフェイスで表現されるもの) に送られます。	40	17	44	16	40	16.4
`pushsubscriptionchange_event` pushsubscriptionchange イベントはグローバルスコープとしての ServiceWorker へ送信され、アプリケーションの制御の外から起動されたプッシュ通知への加入状況が変化したことを示します。	138	17	44	16	138
`ServiceWorkerRegistration` ServiceWorkerRegistration はサービスワーカー API のインターフェイスで、サービスワーカー登録を表します。同じオリジンを共有している 1 つ以上のページを制御するサービスワーカーを登録します。	40	17	44	11.1	40	11.3
`pushManager` pushManager は ServiceWorkerRegistration インターフェイスのプロパティで、プッシュサブスクリプションを管理するための PushManager インターフェイスへの参照を返します。これには、サブスクリプションへの参加、アクティブなサブスクリプションの取得、プッシュ通知の許可状況へのアクセスの対応が含まれます。	40	17	44	16	40	16.4

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

self.addEventListener("push", (event) => {
  if (!(self.Notification && self.Notification.permission === "granted")) {
    return;
  }

  const data = event.data?.json() ?? {};
  const title = data.title || "Something Has Happened";
  const message =
    data.message || "Here's something you might want to check out.";
  const icon = "images/new-notification.png";

  const notification = new self.Notification(title, {
    body: message,
    tag: "simple-push-demo-notification",
    icon,
  });

  notification.addEventListener("click", () => {
    clients.openWindow(
      "https://example.blog.com/2015/03/04/something-new.html",
    );
  });
});

実務での使いどころ

Push messages の活用

PushEvent はプッシュ API のインターフェイスで、受け取ったプッシュメッセージを表します。

注意点

古いブラウザでは対応していない場合がある。

実装メモ

一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

対応ブラウザ

基本構文

実務での使いどころ

Push messages の活用

注意点

実装メモ

参考リンク