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

Kate Jeffreys
Kate Jeffreys

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

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

<ph type="x-smartling-placeholder">
</ph>
Android デバイスの通知。
で確認できます。 <ph type="x-smartling-placeholder">
</ph>
MacBook 上の通知。

従来、ウェブブラウザはリクエストを行うことによってサーバーとクライアント間の情報交換を開始する必要がありました。一方、ウェブプッシュ テクノロジーでは、アプリに適したタイミングで通知を送信するようにサーバーを設定できます。push サービスは、登録された 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 はバックグラウンドで実行され、アプリが画面に表示されていない場合でも通知を表示できます。

  • プッシュ テクノロジーを使用すると、アプリに適したタイミングで通知を送信するようにサーバーを設定できます。push サービスは、登録された 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 に登録する

  1. クライアント アプリが ServiceWorkerContainer.register() で Service Worker を登録します。登録された Service Worker は、クライアントが非アクティブになっても、引き続きバックグラウンドで実行されます。

    クライアント コード:

    navigator.serviceWorker.register('sw.js');
  2. クライアントが通知を送信する権限をリクエストする。

    クライアント コード:

    Notification.requestPermission();
  3. プッシュ通知を有効にするために、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 は定期購入エンドポイントと呼ばれます。

  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. サブスクリプション エンドポイントに送信された通知は、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);
    })
  3. ユーザーが通知を操作すると、ウェブアプリがまだアクティブではない場合はアクティブになります。

次のステップ

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

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