プッシュ通知を使用する理由
通知は、ユーザーに情報の小さなチャンクを表示します。ウェブアプリでは、通知を使用して、重要なイベントや時間的制約のあるイベントや、ユーザーが取るべきアクションについてユーザーに知らせることができます。
通知のデザインはプラットフォームによって異なります。次に例を示します。
![](https://web.dev/static/articles/use-push-notifications-to-engage-users/image/3wEi4F7iuNrg2kL85aMI.png?hl=ja)
![](https://web.dev/static/articles/use-push-notifications-to-engage-users/image/Ho6Nf5CcftL4AmLzoHZ8.png?hl=ja)
従来、ウェブブラウザはリクエストを行うことによってサーバーとクライアント間の情報交換を開始する必要がありました。一方、ウェブプッシュ技術を使用すると、アプリに適している場合に通知を送信するようにサーバーを設定できます。プッシュ サービスでは、サブスクライブされた Service Worker ごとに一意の URL が作成されます。Service Worker の URL にメッセージを送信すると、その Service Worker でイベントが発生し、通知を表示するように求められます。
プッシュ通知を使用すると、最新情報に基づいて、アプリをもう一度起動して使用するように促すことで、アプリを最大限に活用できます。
通知の作成と送信
Notifications API を使用して通知を作成します。Notification
オブジェクトには、title
文字列と options
オブジェクトが含まれます。次に例を示します。
let title = 'Hi!';
let options = {
body: 'Very Important Message',
/* other options can go here */
};
let notification = new Notification(title, options);
通知がアクティブになると title
が太字で表示され、body
には追加のテキストが含まれます。
通知を送信する権限を取得する
通知を表示するには、アプリからその権限を取得する必要があります。
Notification.requestPermission();
プッシュ通知の仕組み
通知の真価は、Service Worker とプッシュ テクノロジーの組み合わせによって実現します。
Service Worker は、アプリが画面に表示されていないときでもバックグラウンドで動作して通知を表示できます。
プッシュ テクノロジーを使用すると、アプリに適している場合に通知を送信するようにサーバーを設定できます。プッシュ サービスでは、サブスクライブされた Service Worker ごとに一意の URL が作成されます。Service Worker の URL にメッセージを送信すると、その Service Worker でイベントが発生し、通知を表示するように求められます。
次のフローの例では、クライアントが Service Worker を登録し、プッシュ通知をサブスクライブしています。次に、サーバーはサブスクリプション エンドポイントに通知を送信します。
クライアントと Service Worker は、追加のライブラリなしで標準の JavaScript を使用します。サーバーは Node.js 上の express
npm パッケージを使用してビルドされ、web-push
npm パッケージを使用して通知を送信します。サーバーに情報を送信するために、クライアントはサーバーが公開している POST URL を呼び出します。
パート 1: Service Worker を登録して push にサブスクライブする
クライアント アプリが Service Worker を
ServiceWorkerContainer.register()
に登録します。クライアントがアクティブでないときも、登録された Service Worker はバックグラウンドで引き続き実行されます。クライアント コード:
navigator.serviceWorker.register('sw.js');
クライアントが、通知を送信する権限をユーザーにリクエストします。
クライアント コード:
Notification.requestPermission();
プッシュ通知を有効にするために、Service Worker は
PushManager.subscribe()
を使用して push サブスクリプションを作成します。PushManager.subscribe()
の呼び出しで、Service Worker はアプリの API キーを識別子として指定します。クライアント コード:
navigator.serviceWorker.register('sw.js').then(sw => { sw.pushManager.subscribe({ /* API key */ }); });
Firebase Cloud Messaging などの push サービスは、サブスクリプション モデルで動作します。Service Worker が
PushManager.subscribe()
を呼び出して push サービスに登録すると、push サービスは Service Worker に固有の URL を作成します。この URL はサブスクリプション エンドポイントと呼ばれます。クライアントが、サブスクリプション エンドポイントをアプリサーバーに送信します。
クライアント コード:
navigator.serviceWorker.register('sw.js').then(sw => { sw.pushManager.subscribe({ /* API key */ }).then(subscription => { sendToServer(subscription, '/new-subscription', 'POST'); }); });
サーバーコード:
app.post('/new-subscription', (request, response) => { // extract subscription from request // send 'OK' response });
パート 2: 通知を送信する
ウェブサーバーが定期購入エンドポイントに通知を送信します。
サーバーコード:
const webpush = require('web-push'); let options = { /* config info for cloud messaging and API key */ }; let subscription = { /* subscription created in Part 1*/ }; let payload = { /* notification */ }; webpush.sendNotification(subscription, payload, options);
サブスクリプション エンドポイントに送信される通知は、Service Worker をターゲットとして push イベントを発生させます。Service Worker はメッセージを受信し、通知としてユーザーに表示します。
Service Worker のコード:
self.addEventListener('push', (event) => { let title = { /* get notification title from event data */ } let options = { /* get notification options from event data */ } showNotification(title, options); })
ユーザーが通知を操作すると、ウェブアプリがアクティブになります(まだアクティブになっていない場合)。
次のステップ
次のステップとして、プッシュ通知を実装します。
このプロセスの各ステップを説明する一連の Codelab を作成しました。