push の仕組み

Matt Gaunt

API について説明する前に、プッシュの全体像を把握しましょう。後で個々のトピックや API について説明する際に、その重要性と理由を理解できるようになります。

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

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

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

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

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

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

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

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

対応ブラウザ

• 42
• 17
• 44
• 16

ソース

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

アプリケーション サーバーキー（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 メッセージで送信されたデータを閲覧できないようにするためです。これは、使用するプッシュ サービスをブラウザが決定するため、安全でないプッシュ サービスをブラウザが使用できる可能性があることを考えると重要です。

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

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

• プッシュ メッセージの存続時間。メッセージがキューから削除され、配信されなくなるまでの時間を定義します。

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

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

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

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

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

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

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

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

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

次のステップ

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

コードラボ

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