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

Kate Jeffreys
Kate Jeffreys

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

通知は、ユーザーに小さな情報の塊を提示します。ウェブアプリは、通知を使用して、重要なイベントや、ユーザーが対応する必要があるアクションについてユーザーに知らせることができます。

通知のルック アンド フィールはプラットフォームによって異なります。次に例を示します。

Android デバイスの通知。
MacBook の通知。

従来、ウェブブラウザはリクエストを行うことで、サーバーとクライアント間の情報交換を開始する必要がありました。一方、ウェブプッシュ テクノロジーでは、アプリにとって適切なタイミングで通知を送信するようにサーバーを構成できます。プッシュ サービスは、登録されたサービス ワーカーごとに一意の URL を作成します。サービス ワーカーの URL にメッセージを送信すると、そのサービス ワーカーでイベントが発生し、通知が表示されます。

プッシュ通知は、最新の情報に基づいてアプリを再度開いて使用するようユーザーに促すことで、ユーザーがアプリを最大限に活用できるようにします。

通知の作成と送信

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();

プッシュ通知の仕組み

通知の真の力は、サービス ワーカーとプッシュ テクノロジーの組み合わせから生まれます。

  • サービス ワーカーは、アプリが画面に表示されていない場合でも、バックグラウンドで実行して通知を表示できます。

  • プッシュ テクノロジーを使用すると、アプリにとって適切なタイミングで通知を送信するようにサーバーを構成できます。プッシュ サービスは、登録された各サービス ワーカーに一意の URL を作成します。サービス ワーカーの URL にメッセージを送信すると、そのサービス ワーカーでイベントが発生し、通知が表示されます。

次のフローの例では、クライアントが Service Worker を登録し、プッシュ通知を購読します。その後、サーバーはサブスクリプション エンドポイントに通知を送信します。

クライアントとサービス ワーカーは、追加のライブラリを使用しないバニラ JavaScript を使用します。サーバーは Node.js 上の express npm パッケージで構築され、web-push npm パッケージを使用して通知を送信します。サーバーに情報を送信するために、クライアントはサーバーが公開した POST URL を呼び出します。

パート 1: Service Worker を登録して Push に登録する

  1. クライアント アプリは ServiceWorkerContainer.register() でサービス ワーカーを登録します。登録されたサービス ワーカーは、クライアントが非アクティブな場合でもバックグラウンドで実行され続けます。

    クライアント コード:

    navigator.serviceWorker.register('sw.js');

  2. クライアントがユーザーに通知の送信権限をリクエストします。

    クライアント コード:

    Notification.requestPermission();

  3. プッシュ通知を有効にするため、サービス ワーカーは PushManager.subscribe() を使用してプッシュ サブスクリプションを作成します。PushManager.subscribe() の呼び出しで、サービス ワーカーはアプリの API キーを識別子として提供します。

    クライアント コード:

    navigator.serviceWorker.register('sw.js').then(sw => {
  sw.pushManager.subscribe({ /* API key */ });
});

    Firebase Cloud Messaging などのプッシュ サービスは、サブスクリプション モデルで動作します。サービス ワーカーが PushManager.subscribe() を呼び出してプッシュ サービスに登録すると、プッシュ サービスはサービス ワーカーに固有の URL を作成します。この URL はサブスクリプション エンドポイントと呼ばれます。

  4. クライアントはサブスクリプション エンドポイントをアプリサーバーに送信します。

    クライアント コード:

    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: 通知を送信する

  1. ウェブサーバーがサブスクリプション エンドポイントに通知を送信します。

    サーバーコード:

    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);

  2. サブスクリプション エンドポイントに送信された通知は、サービス ワーカーをターゲットとしてプッシュ イベントを発生させます。サービス ワーカーがメッセージを受信し、通知としてユーザーに表示します。

    サービス ワーカーのコード:

    self.addEventListener('push', (event) => {
  let title = { /* get notification title from event data */ }
  let options = { /* get notification options from event data */ }
  showNotification(title, options);
})

  3. ユーザーが通知を操作し、ウェブアプリがまだアクティブでない場合はアクティブにします。

次のステップ

次のステップとして、プッシュ通知を実装しましょう。

このプロセスの各ステップをガイドする一連の Codelab を作成しました。