このページは Cloud Translation API によって翻訳されました。

プッシュ通知を使用してユーザーを引きつけ、再アプローチする

Kate Jeffreys

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

通知は、ユーザーに情報の小さなチャンクを表示します。ウェブアプリでは、通知を使用して、重要なイベントや時間的制約のあるイベントや、ユーザーが取るべきアクションについてユーザーに知らせることができます。

通知のデザインはプラットフォームによって異なります。次に例を示します。

従来、ウェブブラウザはリクエストを行うことによってサーバーとクライアント間の情報交換を開始する必要がありました。一方、ウェブプッシュ技術を使用すると、アプリに適している場合に通知を送信するようにサーバーを設定できます。プッシュサービスでは、サブスクライブされた 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 を作成しました。