プッシュ通知の概要

プッシュ通知の概要、プッシュ通知を使用する理由、仕組みについて説明します。

プッシュ通知とは

プッシュ メッセージを使用すると、 ユーザーに効果的にアピールできますこれはpushと呼ばれます そのメッセージを「push」してユーザーに公開しているときも 無効です。Push の比較 テクノロジーPull テクノロジーを理解し 説明します。

通知はユーザーに小さな情報チャンクを提示します。ウェブサイトで使用できる 時間的制約のある重要なイベントやアクションについてユーザーに知らせる通知 提示します通知のデザインはプラットフォームによって異なります。

<ph type="x-smartling-placeholder">
</ph> macOS と Android での通知の例
macOS と Android での通知の例

プッシュ メッセージと通知は別々のテクノロジーですが、相互補完的なものです。 push は、想定外の問題が発生しても、サーバーからユーザーにメッセージを送信するための技術です。 ウェブサイトのアクティビティを確認します通知は、 プッシュされた情報をユーザーのデバイスに表示する。kubectl の プッシュ メッセージなしで通知を受け取れます。将来的には、 ユーザーへの通知のないプッシュ メッセージ(サイレント プッシュ)ですが、ブラウザは 現時点では許可していません実際には、これらは通常一緒に使用されます。 技術者以外のユーザーには、push と push の違いがおそらく メッセージと通知を管理できます。このコレクションで プッシュ通知とはメッセージの配信と 通知として表示されます。push メッセージとは 技術を独自に推進することを意味します通知は 通知技術そのものを指します

プッシュ通知を使用する理由

  • ユーザーにとって、プッシュ通知は、関連性の高いタイムリー正確な情報が含まれます。
  • ウェブサイトの所有者にとって、プッシュ通知は、 できます。
で確認できます。

プッシュ通知の仕組み

プッシュ通知を実装する主なステップの概要は次のとおりです。

  1. プッシュ通知を送信する許可をユーザーに求めるクライアント ロジックを追加する。 クライアント ID 情報をサーバーに送信してデータベースに保存します。
  2. クライアント デバイスにメッセージをプッシュするサーバー ロジックの追加。
  3. デバイスにプッシュされたメッセージを受信するクライアント ロジックを追加する 通知として表示できます

このページの残りの部分では、これらのステップについて詳しく説明します。

プッシュ通知を送信する権限を取得する

まず、ウェブサイトでプッシュ通知を送信するユーザーの許可を取得する必要があります。 これは、[はい] ボタンをクリックするなどのユーザー操作によってトリガーされます。 Do you want to receive push notifications? というプロンプトの横に表示されます。確認後 Notification.requestPermission() を呼び出します。オペレーティング システム ユーザーのデバイス上のブラウザにはおそらく、なんらかの UI が ユーザーがプッシュ通知を有効にしたい場合。この UI はプラットフォームによって異なります。

クライアントをプッシュ通知に登録する

許可を得てから、ウェブサイトで プッシュ通知へのユーザーのサブスクライブこれには JavaScript を使用します。 Push API を使用します。公開認証鍵を指定する必要があります 。この点については後ほど詳しく説明します。変更後 サブスクリプション プロセスを開始すると、ブラウザがネットワーク リクエストを発行します。 push サービスと呼ばれるウェブサービスにアクセスできます。これについても後ほど詳しく説明します。

登録が成功すると、ブラウザは PushSubscription 渡されます。このデータを長期間保存する必要があります。 通常、これは自分が管理するサーバーに情報を送信して、 サーバーでその情報をデータベースに保存します

push メッセージを送信する権限を取得します。PushSubscription を取得します。送信
サーバーに PushSubscription を追加します。

プッシュ メッセージを送信する

サーバーが実際にプッシュ メッセージをクライアントに直接送信することはありません。 push service を使用します。push サービスは、Compute Engine によって制御される ユーザーのブラウザ ベンダーです。クライアントにプッシュ通知を送信する場合は、 push サービスにウェブサービス リクエストを送ります。そのウェブサービス リクエストには、 push サービスに送信するリクエストを「ウェブ push プロトコル リクエスト」と呼びます。「 ウェブ push プロトコル リクエストには、次のものを含める必要があります。

  • メッセージに含めるデータ。
  • メッセージの送信先のクライアント。
  • push サービスがメッセージを配信する方法に関する指示。たとえば、 push サービスがメッセージ送信の試行を停止するよう指定できます 表示されます。

通常、ウェブ プッシュ プロトコル リクエストは、自身が管理するサーバーを経由して行います。 もちろん、サーバーで生のウェブサービス リクエストを できます。これには、 web-push-libs。基礎となるメカニズムは HTTP 経由のウェブサービス リクエスト。

サーバーはウェブプッシュ プロトコル リクエストをプッシュ サービスに送信し、プッシュ サービスはそのメッセージをユーザーのデバイスに送信します。

push サービスはリクエストを受信して認証し、push をルーティングする メッセージを適切なクライアントに配信します。クライアントのブラウザがオフラインの場合、push は ブラウザがオンラインになるまで push メッセージをキューに入れます。

各ブラウザは、必要な push サービスを使用します。ウェブサイト デベロッパー その制御はできませんこれは問題にはなりません 標準化されている。 言い換えると、ブラウザ ベンダーがどのプッシュ サービスであるかを気にすることなく、 できます。必要な作業は、ウェブの push プロトコル リクエストが仕様に従っていることを確認することだけです。 仕様には特に、リクエストに特定のヘッダーを含める必要があると規定されています。 データはバイトストリームとして送信する必要があります

ただし、ウェブの push プロトコルを push サービスに送信できます。PushSubscription データは、 購読手続き中に返されたブラウザでは 情報です。PushSubscription オブジェクトは次のようになります。

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
  "expirationTime": null,
  "keys": {
    "p256dh": "BGyyVt9FFV…",
    "auth": "R9sidzkcdf"
  }
}

endpoint のドメインは、基本的には push サービスです。Deployment の endpoint は、push サービスが判別する際に役立つクライアント ID 情報です。 メッセージをプッシュするクライアントを指定します。

keys は暗号化に使用されます。これについては次に説明します。

push メッセージを暗号化する

push サービスに送信するデータは暗号化する必要があります。これにより クライアントに送信しているデータを push サービスが参照できないようにします。 使用する push サービスはブラウザ ベンダーが決定し、 push サービスは理論的には安全でないか、安全でない可能性があります。サーバーでは PushSubscription で提供される keys。ウェブ push プロトコルを暗号化します。 できます。

ウェブの push プロトコル リクエストに署名する

プッシュ サービスは、自分のアカウントに第三者がメッセージを送信できないようにする手段を提供します。 できます。技術的にはこの作業は不要ですが Chrome では必須です。Firefox では省略可能です。他のブラウザではこの設定が必要な場合があります 使用できます。

このワークフローには、サービス アカウントに固有の秘密鍵と公開鍵が 説明します。認証プロセスは、おおむね次のように処理されます。

  • 秘密鍵と公開鍵は 1 回限りのタスクとして生成します。組み合わせ 公開鍵と秘密鍵は、ストレージ バケットと呼ばれる アプリケーション サーバーキー。「VAPID ありますVAPID: 仕様。
  • JavaScript コードからのプッシュ通知にクライアントをサブスクライブすると、 公開鍵を提供します。push サービスが endpoint を生成すると、 場合は、提供された公開鍵を endpoint に関連付けます。
  • ウェブ push プロトコル リクエストを送信するときに、いくつかの JSON 情報に署名します。 秘密鍵で識別されます。
  • push サービスは、ウェブの push プロトコル リクエストを受け取ると、保存された 署名された情報を認証します。署名が有効かどうか push サービスは、リクエストの送信元が google.com の 秘密鍵で復号されます。

push メッセージの配信をカスタマイズする

ウェブの push プロトコル リクエストの仕様では、 push サービスが push メッセージをクライアントに送信する方法をカスタマイズする。 たとえば、以下をカスタマイズできます。

  • メッセージの有効期間(TTL)は、プッシュ サービスがどのくらいの期間 配信を試みます。
  • メッセージの緊急度。push サービスが保持される場合に便利です。 優先度の高いメッセージのみ配信することで、クライアントのバッテリー駆動時間を延ばすことができる。
  • メッセージのトピック。同じトピックの保留中のメッセージが置き換えられます。 最新のメッセージが届きます

プッシュされたメッセージを受信して通知として表示する

ウェブの push プロトコル リクエストを push サービスに送信すると、push サービスは 次のいずれかのイベントが発生するまで、リクエストがキューに追加されます。

  1. クライアントがオンラインになると、push サービスが push メッセージを配信します。
  2. メッセージの有効期限が切れます。

クライアント ブラウザはプッシュされたメッセージを受信すると、そのプッシュ メッセージを復号し、 データを取得し、push イベントをサービスにディスパッチします。 worker です。Service Worker は、 ウェブサイトの開発時に バックグラウンドで実行可能な JavaScript コードです 開いていないか、ブラウザを閉じています。Service Worker の push イベント 使用して ServiceWorkerRegistration.showNotification() を呼び出し、 通知されます。

メッセージはデバイスに到着します。ブラウザが Service Worker を復帰させます。push イベントがディスパッチされます。

次のステップ

Codelab