push の仕組み

API の説明に入る前に、プッシュ通知の仕組みを最初から最後まで見ていきましょう。後ほど個々のトピックや API について説明する際に、プッシュ通知がどのように、なぜ重要なのかを理解できるようになります。

プッシュ通知を実装する主な手順は次の 3 つです。

1. クライアントサイドのロジックを追加して、ユーザーがプッシュ通知を登録できるようにします（プッシュ通知を登録するウェブアプリの JavaScript と UI）。
2. バックエンド / アプリケーションから API 呼び出しを行って、ユーザーのデバイスにプッシュ通知を送信します。
3. デバイスにプッシュ通知が届いたときに「プッシュ イベント」を受信する Service Worker の JavaScript ファイル。この JavaScript で通知を表示できます。

各ステップについて詳しく見ていきましょう。

ステップ 1: クライアントサイド

最初のステップは、ユーザーがプッシュ通知を「登録」できるようにすることです。

ユーザーが登録するには、2 つのことが必要です。1 つ目は、プッシュ通知を送信するためのユーザーからの権限 を取得すること。2 つ目は、ブラウザから PushSubscription を取得することです。

PushSubscription には、ユーザーにプッシュ通知を送信するために必要なすべての情報が含まれています。これは、ユーザーのデバイスの ID と考えることができます。

これらはすべて、Push API を使用して JavaScript で行われます。

ユーザーを登録する前に、「アプリケーション サーバーキー」のセットを生成する必要があります。これについては後ほど説明します。

アプリケーション サーバーキー（VAPID キーとも呼ばれます）は、サーバーに固有のものです。プッシュ通知サービスは、このキーを使用して、ユーザーを登録したアプリケーション サーバーを特定し、そのユーザーにプッシュ通知を送信するサーバーが同じであることを確認します。

ユーザーを登録して PushSubscription を取得したら、PushSubscription の詳細をバックエンド / サーバーに送信する必要があります。サーバーでは、この登録情報をデータベースに保存し、そのユーザーにプッシュ通知を送信するために使用します。

ステップ 2: プッシュ通知を送信する

ユーザーにプッシュ通知を送信するには、プッシュ通知サービスに対して API 呼び出しを行う必要があります。この API 呼び出しには、送信するデータ、メッセージの送信先、メッセージの送信方法に関する条件が含まれます。通常、この API 呼び出しはサーバーから行われます。

次のような疑問が生じるかもしれません。

• プッシュ通知サービスとは何か？
• API はどのようなものか？JSON、XML、その他か？
• API で何ができるか？

プッシュ通知サービスとは何か？

プッシュ通知サービスは、ネットワーク リクエストを受信して検証し、適切なブラウザにプッシュ通知を配信します。ブラウザがオフラインの場合、ブラウザがオンラインになるまでメッセージはキューに登録されます。

各ブラウザは任意のプッシュ通知サービスを使用できます。これはデベロッパーが制御できるものではありません。すべてのプッシュ通知サービスが同じ API 呼び出しを想定しているため、問題はありません。つまり、プッシュ通知サービスが何であるかを気にする必要はありません。API 呼び出しが有効であることを確認するだけで済みます。

プッシュ通知をトリガーする適切な URL（プッシュ通知サービスの URL）を取得するには、PushSubscription の endpoint 値を確認します。

以下に、PushSubscription から取得できる値の例を示します。

{
  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
  "keys": {
    "p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth": "tBHItJI5svbpez7KI4CCXg=="
  }
}

この場合のエンドポイント は https://random-push-service.com/some-kind-of-unique-id-1234/v2/ です。プッシュ通知サービスは「random-push-service.com」で、各エンドポイントはユーザーに固有のものです（「some-kind-of-unique-id-1234」で示されています）。プッシュ通知を使用すると、このパターンに気づくでしょう。

サブスクリプションのキー については後ほど説明します。

API はどのようなものか？

すべてのウェブプッシュ通知サービスが同じ API 呼び出しを想定していると述べました。その API は ウェブプッシュ プロトコル です。 これは、プッシュ通知サービスに対して API 呼び出しを行う方法を定義する IETF 標準です。

API 呼び出しでは、特定のヘッダーを設定し、データをバイトストリームにする必要があります。この API 呼び出しを実行できるライブラリと、自分で実行する方法について説明します。

API で何ができるか？

この API を使用すると、データを指定して、または指定せずに、ユーザーにメッセージを送信できます。また、メッセージの送信方法に関する手順も提供されます。

プッシュ通知で送信するデータは暗号化する必要があります。これは、プッシュ通知サービス（誰でもなりうる）がプッシュ通知で送信されたデータを表示できないようにするためです。ブラウザが使用するプッシュ通知サービスを決定するため、安全でないプッシュ通知サービスを使用する可能性があり、これは重要です。

プッシュ通知をトリガーすると、プッシュ通知サービスは API 呼び出しを受信してメッセージをキューに登録します。このメッセージは、ユーザーのデバイスがオンラインになり、プッシュ通知サービスがメッセージを配信できるようになるまでキューに登録されたままになります。プッシュ通知サービスに指定できる手順によって、プッシュ通知がキューに登録される方法が決まります。

手順には次のような詳細が含まれます。

• プッシュ通知の有効期間。これは、メッセージが削除されて配信されなくなるまでキューに登録される期間を定義します。

• メッセージの緊急度を定義します。プッシュ通知サービスが優先度の高いメッセージのみを配信してユーザーのバッテリー駆動時間を維持する場合に便利です。

• プッシュ通知に「トピック」名を付けます。これにより、保留中のメッセージがこの新しいメッセージに置き換えられます。

ステップ 3: ユーザーのデバイスでのプッシュ イベント

プッシュ通知を送信すると、プッシュ通知サービスは、次のいずれかのイベントが発生するまで、メッセージをサーバーに保持します。

1. デバイスがオンラインになり、プッシュ通知サービスがメッセージを配信する。
2. メッセージの有効期限が切れる。この場合、プッシュ通知サービスはキューからメッセージを削除し、配信されることはありません。

プッシュ通知サービスがメッセージを配信すると、ブラウザはメッセージを受信し、データを復号して、Service Worker で push イベントをディスパッチします。

Service Workerは "特別な" JavaScript ファイルです。ブラウザは、ページが開いていなくてもこの JavaScript を実行できます。ブラウザが閉じている場合でも、この JavaScript を実行できます。Service Worker には、ウェブページでは使用できない API（Service Worker スクリプト外では使用できない API）もあります。

サービス ワーカーの「push」イベント内で、バックグラウンド タスクを実行できます。分析呼び出しを行ったり、ページをオフラインでキャッシュに保存したり、通知を表示したりできます。

これがプッシュ通知のフロー全体です。

次のステップ

• ウェブプッシュ通知の概要
• プッシュ通知の仕組み
• ユーザーの登録
• 権限の UX
• ウェブプッシュ ライブラリを使用してメッセージを送信する
• ウェブプッシュ プロトコル
• プッシュ イベントの処理
• 通知の表示
• 通知の動作
• 一般的な通知パターン
• プッシュ通知に関するよくある質問
• 一般的な問題とバグの報告

Codelab

• プッシュ通知クライアントを作成する
• プッシュ通知サーバーを作成する