push の仕組み

Matt Gaunt

API の説明に入る前に、push について大まかに説明しましょう。次に、 後で個々のトピックや API を順に説明すると、その方法と理由が 重要です

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

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

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

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

最初のステップはユーザーに push できます。

ユーザーを登録するには、2 つの項目が必要です。まず、メッセージを送るための許可をユーザーから得ます。 push メッセージを送ります。次に、ブラウザから PushSubscription を取得します。

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

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

対応ブラウザ

• <ph type="x-smartling-placeholder"></ph> 42
• <ph type="x-smartling-placeholder"></ph> 17
• <ph type="x-smartling-placeholder"></ph> 44
• <ph type="x-smartling-placeholder"></ph> 16

ソース

ユーザーを登録する前に、一連の API と 「アプリケーション サーバーキー」を使用します。これについては後で説明します。

アプリケーション サーバーキーは VAPID キーとも呼ばれ、サーバーに固有のキーです。これらを使用すると、 ユーザーをサブスクライブしたアプリケーション サーバーが識別され、 そのユーザーへの push メッセージをトリガーします。

ユーザーをサブスクライブして PushSubscription を作成したら、 PushSubscription の詳細をバックエンド / サーバーに送信します。サーバー上には、このファイルを データベースにサブスクリプションを作成し、そのデータベースを使用してそのユーザーに push メッセージを送信します。

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

ユーザーに push メッセージを送信するには、push に対する API 呼び出しを行う必要があります。 あります。この API 呼び出しには、送信するデータ、メッセージの送信先、 メッセージの送信方法に関する条件を指定できます。通常、この API 呼び出しはサーバーから行います。

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

• push サービスとはどのようなサービスですか？
• API はどのようなものですか？JSON、XML などでしょうか？
• API でできること

push サービスとはどのようなサービスですか？

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

各ブラウザは任意のプッシュ サービスを使用できます。これは開発者が制御できないものです。 できます。すべての push サービスが同じ API 呼び出しを想定しているため、これは問題ではありません。意味 push サービスが誰であるかを気にする必要はありません。必要なのは、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/].push サービスは、 「random-push-service.com」など）各エンドポイントはユーザーごとに一意であり、 &#39;some-kind-of-unique-id-1234&#39;.push を使い始めると、このパターンに気づくでしょう。

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

API はどのようなものですか？

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

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

API でできること

この API は、データの有無にかかわらずユーザーにメッセージを送信する方法を提供します。 メールの送信方法の説明をご覧ください。

プッシュ メッセージで送信するデータは暗号化する必要があります。その理由は、 push サービスは誰でもが、 push メッセージです。ブラウザがどの push サービスを push するかを決定するのは、 これにより、安全でないプッシュサービスを使用するブラウザへの侵入が可能になるおそれがあります。

push メッセージをトリガーすると、push サービスが API 呼び出しを受け取り、 表示されます。このメッセージは、ユーザーのデバイスがオンラインになり、 メッセージを配信できます。push サービスに指示することで、 push メッセージがキューに追加されます。

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

• push メッセージの有効期間。メッセージをキューに保存する期間を定義します。 削除されます

• メッセージの緊急度を定義します。これは、push サービスが最初の状態を保持する 優先度の高いメッセージのみ配信することで、ユーザーのバッテリー寿命を延ばすことができます。

• push メッセージに「トピック」を付与する名前が表示されます。これにより、保留中のメッセージがこの新しいメッセージに置き換えられます。

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

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

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

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

Service Worker とは、 「特別」JavaScript ファイル。ブラウザはこの JavaScript を、ページが読み込まれる 表示されます。ブラウザを閉じたときに、この JavaScript を実行することもできます。Service Worker には、 push のような、ウェブページでは使用できない API（つまり、 使用しないでください。

Service Worker の「push」関数内にあり、任意のバックグラウンドタスクを実行できます。マイページ アナリティクスの呼び出し、ページのオフラインでのキャッシュ、通知の表示が可能です。

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

次のステップ

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

Codelab

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