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

Kate Jeffreys
Kate Jeffreys

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

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

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

従来、ウェブブラウザはリクエストを送信することで、サーバーとの間で情報のやり取りを開始する必要がありました。一方、ウェブ プッシュ技術では、アプリに適したタイミングで通知を送信するようにサーバーを構成できます。プッシュ サービスは、定期購入したサービス ワーカーごとに一意の 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 はバックグラウンドで実行され、アプリが画面に表示されていない場合でも通知を表示できます。

  • プッシュ技術を使用すると、アプリに適したタイミングで通知を送信するようにサーバーを構成できます。プッシュ サービスは、定期購入したサービス ワーカーごとに一意の URL を作成します。Service Worker の URL にメッセージを送信すると、その Service Worker でイベントが発生し、通知を表示するよう求めるメッセージが表示されます。

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

クライアントとサービス ワーカーは、追加のライブラリなしで標準の JavaScript を使用します。このサーバーは Node.jsexpress 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() の呼び出しで、サービス ワーカーはアプリの API キーを識別子として指定します。

    クライアント コード:

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

    Firebase Cloud Messaging などのプッシュ サービスは、サブスクリプション モデルで動作します。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 はメッセージを受信し、通知としてユーザーに表示します。

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

    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 を作成しました。