プッシュ通知の概要、使用するメリット、仕組みについて説明します。
プッシュ通知とは
プッシュ メッセージを使用すると、ユーザーがウェブサイトを利用していない場合でも、ユーザーに情報を伝えることができます。ユーザーがアクティブでない場合でも情報を「プッシュ」できるため、プッシュ通知と呼ばれます。このコンセプトをさらに理解するには、プッシュ テクノロジーとプル テクノロジーを比較してください。
通知は、ユーザーに小さな情報の塊を提示します。ウェブサイトは、通知を使用して、重要なイベントや、ユーザーが対応する必要があるアクションについてユーザーに知らせることができます。通知の外観はプラットフォームによって異なります。
プッシュ メッセージと通知は、別個の技術ですが、相互に補完する関係にあります。プッシュは、ユーザーがウェブサイトを積極的に使用していない場合でも、サーバーからユーザーにメッセージを送信する技術です。通知は、ユーザーのデバイスにプッシュされた情報を表示するための技術です。プッシュ メッセージングなしで通知を使用することもできます。ユーザー向けの通知なしでプッシュ メッセージ（サイレント プッシュ）を使用することも可能になるかもしれませんが、現在のところブラウザでは許可されていません。実際には、通常は一緒に使用されます。技術的な知識のないユーザーは、プッシュ メッセージと通知の違いを理解できない可能性があります。このコレクションで「プッシュ通知」という場合は、メッセージをプッシュして通知として表示する一連の処理を意味します。プッシュ メッセージとは、プッシュ テクノロジーそのものを指します。通知とは、通知技術そのものを指します。
プッシュ通知を使用するメリット
- ユーザーにとって、プッシュ通知はタイムリーで関連性の高い正確な情報を受け取る手段です。
- ウェブサイトの所有者にとって、プッシュ通知はユーザー エンゲージメントを高める手段です。
プッシュ通知の仕組み
プッシュ通知を実装する主な手順は次のとおりです。
- プッシュ通知の送信権限をユーザーに求めるクライアント ロジックを追加し、クライアント識別子情報をサーバーに送信してデータベースに保存します。
- クライアント デバイスにメッセージをプッシュするサーバー ロジックを追加します。
- デバイスにプッシュされたメッセージを受信し、通知として表示するクライアント ロジックを追加します。
以降では、これらの手順について詳しく説明します。
プッシュ通知を送信する権限を取得する
まず、ウェブサイトでプッシュ通知を送信するユーザーの許可を取得する必要があります。これは、Do you want to receive push notifications? プロンプトの横にある [はい] ボタンをクリックするなど、ユーザー ジェスチャーによってトリガーされる必要があります。確認後、Notification.requestPermission() に電話します。ユーザーのデバイスのオペレーティング システムまたはブラウザは、ユーザーがプッシュ通知を有効にすることを正式に確認するための UI を表示する可能性があります。この UI はプラットフォームによって異なります。
クライアントをプッシュ通知に登録する
許可を取得したら、ウェブサイトでユーザーをプッシュ通知に登録するプロセスを開始する必要があります。これは、Push API を使用して JavaScript で行われます。登録プロセスでは、公開認証鍵を指定する必要があります。これについては後で詳しく説明します。サブスクリプション プロセスを開始すると、ブラウザはプッシュ サービスと呼ばれるウェブサービスにネットワーク リクエストを送信します。これについては後ほど詳しく説明します。
定期購入が成功したとすると、ブラウザは PushSubscription オブジェクトを返します。このデータは長期的に保存する必要があります。通常、この処理は、管理しているサーバーに情報を送信し、そのサーバーでデータベースに保存することで行われます。
プッシュ メッセージを送信する
サーバーはプッシュ メッセージをクライアントに直接送信しません。プッシュ サービスは、この処理を行います。プッシュ サービスは、ユーザーのブラウザ ベンダーによって制御されるウェブサービスです。クライアントにプッシュ通知を送信する場合は、プッシュ サービスにウェブ サービス リクエストを行う必要があります。プッシュ サービスに送信するウェブ サービス リクエストは、ウェブプッシュ プロトコル リクエストと呼ばれます。ウェブプッシュ プロトコル リクエストには、次のものを含める必要があります。
- メッセージに含めるデータ。
- メッセージの送信先クライアント。
- プッシュ サービスがメッセージを配信する方法に関する手順。たとえば、10 分後にプッシュ サービスがメッセージの送信を試行するのを停止するように指定できます。
通常、ウェブプッシュ プロトコル リクエストは、管理しているサーバーを介して行います。もちろん、サーバーが未加工のウェブ サービス リクエストを自分で構築する必要はありません。web-push-libs など、この処理を代行してくれるライブラリがあります。ただし、基盤となるメカニズムは HTTP 経由のウェブサービス リクエストです。
プッシュ サービスはリクエストを受信して認証し、プッシュ メッセージを適切なクライアントにルーティングします。クライアントのブラウザがオフラインの場合、ブラウザがオンラインになるまでプッシュ サービスはプッシュ メッセージをキューに登録します。
各ブラウザは、任意のプッシュ サービスを使用します。ウェブサイトのデベロッパーは、この点を制御できません。ウェブ プッシュ プロトコルのリクエストは標準化されているため、これは問題ではありません。つまり、ブラウザ ベンダーがどのプッシュ サービスを使用しているかを気にする必要はありません。ウェブプッシュ プロトコル リクエストが仕様に準拠していることを確認するだけで済みます。仕様では、リクエストに特定のヘッダーを含める必要があり、データはバイト ストリームとして送信する必要があることが規定されています。
ただし、ウェブプッシュ プロトコル リクエストを正しいプッシュ サービスに送信していることを確認する必要があります。この情報は、登録プロセス中にブラウザから返された PushSubscription データで提供されます。PushSubscription オブジェクトは次のようになります。
{
"endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
"expirationTime": null,
"keys": {
"p256dh": "BGyyVt9FFV…",
"auth": "R9sidzkcdf…"
}
}
endpoint のドメインは、基本的にプッシュ サービスです。endpoint のパスは、プッシュ サービスがメッセージをプッシュするクライアントを正確に特定するのに役立つクライアント識別子情報です。
keys は暗号化に使用されます。これについては次に説明します。
プッシュ メッセージを暗号化する
プッシュ サービスに送信するデータは暗号化する必要があります。これにより、プッシュ サービスがクライアントに送信するデータを表示できなくなります。ブラウザ ベンダーが使用するプッシュ サービスを決定すること、また、そのプッシュ サービスが理論上安全でない可能性があることを覚えておいてください。サーバーは、PushSubscription で提供される keys を使用して、ウェブ プッシュ プロトコル リクエストを暗号化する必要があります。
ウェブ push プロトコル リクエストに署名する
プッシュ サービスは、他のユーザーがあなたのユーザーにメッセージを送信することを防ぐ手段を提供します。技術的には必須ではありませんが、Chrome で最も簡単に実装するには必要です。Firefox では任意です。他のブラウザでは、今後必要になる可能性があります。
このワークフローでは、アプリに固有の秘密鍵と公開鍵を使用します。認証プロセスは、おおむね次のように機能します。
- 秘密鍵と公開鍵は 1 回限りのタスクとして生成します。秘密鍵と公開鍵の組み合わせは、アプリケーション サーバーキーと呼ばれます。VAPID キーと呼ばれることもあります。VAPID は、この認証プロセスを定義する仕様です。
- JavaScript コードからプッシュ通知にクライアントを登録するときに、公開鍵を指定します。プッシュ サービスがデバイスの
endpointを生成するときに、提供された公開鍵をendpointに関連付けます。 - ウェブプッシュ プロトコル リクエストを送信するときに、秘密鍵で JSON 情報を署名します。
- プッシュ サービスがウェブプッシュ プロトコル リクエストを受信すると、保存されている公開鍵を使用して署名付き情報を認証します。署名が有効な場合、プッシュ サービスは、リクエストが一致する秘密鍵を持つサーバーから送信されたことを認識します。
プッシュ メッセージの配信をカスタマイズする
ウェブプッシュ プロトコル リクエスト仕様では、プッシュ サービスがクライアントにプッシュ メッセージを送信する方法をカスタマイズできるパラメータも定義されています。たとえば、次のような項目をカスタマイズできます。
- メッセージの有効期間（TTL）。プッシュ サービスがメッセージの配信を試みる期間を定義します。
- メッセージの緊急度。プッシュ サービスが優先度の高いメッセージのみを配信することでクライアントのバッテリー寿命を維持している場合に便利です。
- メッセージのトピック。同じトピックの保留中のメッセージを最新のメッセージに置き換えます。
プッシュされたメッセージを通知として受信して表示する
ウェブプッシュ プロトコル リクエストをプッシュ サービスに送信すると、プッシュ サービスは次のいずれかのイベントが発生するまでリクエストをキューに保持します。
- クライアントがオンラインになり、push サービスが push メッセージを配信します。
- メッセージの有効期限が切れます。
クライアント ブラウザがプッシュ メッセージを受信すると、プッシュ メッセージ データを復号し、push イベントをサービス ワーカーにディスパッチします。Service Worker は、ウェブサイトが開いていないときやブラウザが閉じているときでもバックグラウンドで実行できる JavaScript コードです。サービス ワーカーの push イベント ハンドラで ServiceWorkerRegistration.showNotification() を呼び出して、情報を通知として表示します。
次のステップ
- ウェブプッシュ通知の概要
- プッシュの仕組み
- ユーザーの登録
- 権限の UX
- ウェブプッシュ ライブラリを使用してメッセージを送信する
- ウェブプッシュ プロトコル
- メッセージの処理
- 通知の表示
- 通知の動作
- 一般的な通知パターン
- プッシュ通知に関するよくある質問
- 一般的な問題とバグの報告