push の仕組み

API について説明する前に、プッシュの全体像を把握しましょう。後ほど、個々のトピックや API について説明していくと、それが重要である理由と仕組みがおわかりいただけるでしょう。

push を実装するには、主に次の 3 つのステップを行います。

1. ユーザーを push するサブスクライブするクライアント側のロジック（つまり、メッセージを push するユーザーを登録するウェブアプリ内の JavaScript と UI）を追加する。
2. ユーザーのデバイスへのプッシュ通知をトリガーする、バックエンドまたはアプリからの API 呼び出し。
3. デバイスにプッシュが届いたときに「プッシュ イベント」を受信する Service Worker JavaScript ファイル。この JavaScript で通知を表示できます。

それぞれのステップについて詳しく見てみましょう。

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

まず、ユーザーをプッシュ メッセージに「登録」します。

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

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

この処理はすべて、Push API を使用して JavaScript で行います。

ユーザーを定期購入する前に、一連の「アプリケーション サーバーキー」を生成する必要があります。これについては後で説明します。

アプリケーション サーバーキー（VAPID キー）は、サーバーに固有のものです。これにより、プッシュ サービスは、どのアプリケーション サーバーがユーザーをサブスクライブしたかを把握し、そのユーザーへのプッシュ メッセージをトリガーしているのが同じサーバーであることを確認できます。

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

ステップ 2: プッシュ メッセージを送信する

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

次のような疑問が浮かぶかもしれません。

• プッシュ サービスとは
• API はどのようなものですか？JSON、XML、それともそれ以外ですか？
• この API でできること

プッシュ サービスとは

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

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

push メッセージをトリガーする適切な URL（push サービスの 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」で示されます。push の使用を開始すると、このパターンに気付くでしょう。

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

API の形式

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

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

API でできること

この API は、データの有無にかかわらずユーザーにメッセージを送信する方法と、メッセージの送信方法に関する指示を提供します。

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

push メッセージをトリガーすると、push サービスは API 呼び出しを受け取り、メッセージをキューに入れます。このメッセージは、ユーザーのデバイスがオンラインになり、プッシュ サービスがメッセージを配信できるようになるまでキューに残ります。push サービスに指示できる手順は、push メッセージのキューイング方法を定義します。

手順には、以下のような詳細情報が含まれます。

• プッシュ メッセージの存続時間。これは、メッセージが削除されて配信されなくなるまでのキュー時間です。

• メッセージの緊急度を定義します。これは、プッシュ サービスが優先度の高いメッセージのみを配信してユーザーのバッテリーを節約している場合に便利です。

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

ステップ 3: ユーザーのデバイスにイベントをプッシュする

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

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

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

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

バックグラウンド タスクを実行できるのは、サービス ワーカーの「push」イベント内です。アナリティクスの呼び出し、ページのオフライン キャッシュ、通知の表示を行うことができます。

以上がプッシュ メッセージの全体的なフローです。

次のステップ

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

Codelab

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