push の仕組み

Matt Gaunt

API の説明に入る前に、プッシュの概要を最初から最後まで見てみましょう。その後、個々のトピックや API を確認していく際に、それが重要である理由と方法を理解できるようになります。

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

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

それぞれのステップの内容を詳しく見ていきましょう。

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

最初のステップは、ユーザーをプッシュ メッセージに「登録」することです。

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

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

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

Browser Support

• 42
• 17
• 44
• 16

Source

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

アプリケーション サーバーキー（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」で示されます。プッシュ通知を使い始めると、このパターンに気づくでしょう。

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

API の概要

すべてのウェブ プッシュ サービスが同じ API 呼び出しを想定していると述べました。この API は Web Push Protocol です。これは、プッシュ サービスへの API 呼び出し方法を定義する IETF 標準です。

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

API でできること

この API は、データを含む、または含まないメッセージをユーザーに送信する方法を提供し、メッセージの送信方法を指示します。

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

プッシュ メッセージをトリガーすると、プッシュ サービスが API 呼び出しを受信し、メッセージをキューに入れます。このメッセージは、ユーザーのデバイスがオンラインになり、プッシュ サービスがメッセージを配信できるようになるまでキューに格納されたままになります。プッシュ サービスに提供できる指示により、プッシュ メッセージがどのようにキューに入れられるかが定義されます。

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

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

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

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

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

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

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

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

サービス ワーカーは「特別な」JavaScript ファイルです。ブラウザは、ページを開かなくてもこの JavaScript を実行できます。ブラウザが閉じているときでも、この JavaScript を実行できます。サービス ワーカーには、ウェブページでは使用できない API（プッシュなど）もあります（つまり、サービス ワーカー スクリプトの外部では使用できない API）。

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

プッシュ メッセージングのフローは以上です。

次のステップ

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

Codelab

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