Codelab: プッシュ通知サーバーを構築する

Kate Jeffreys 氏
Kate Jeffreys
Kayce Basques 氏

この Codelab では、プッシュ通知サーバーの構築方法を順を追って説明します。この Codelab を修了すると、次のようなサーバーが完成します。

  • プッシュ通知のサブスクリプションを追跡する（つまり、クライアントがプッシュ通知をオプトインするとサーバーは新しいデータベース レコードを作成し、クライアントがオプトアウトすると既存のデータベース レコードを削除する）
  • 単一のクライアントにプッシュ通知を送信します。
  • 登録されたすべてのクライアントにプッシュ通知を送信します。

この Codelab は、実際にやって学ぶことに焦点を当てており、コンセプトについてはあまり説明しません。プッシュ通知のコンセプトについては、プッシュ通知の仕組みをご覧ください。

この Codelab のクライアント コードはすでに完成しています。この Codelab ではサーバーの実装のみを行います。プッシュ通知クライアントの実装方法については、Codelab: プッシュ通知クライアントを作成するをご覧ください。

完全なコードについては、push-notifications-server-codelab-complete（ソース）をご覧ください。

ブラウザの互換性

この Codelab は、次のオペレーティング システムとブラウザの組み合わせで動作することが確認されています。

  • Windows: Chrome、Edge
  • macOS: Chrome、Firefox
  • Android: Chrome、Firefox

この Codelab は、次のオペレーティング システム（またはオペレーティング システムとブラウザの組み合わせ）では動作しないことが確認されています。

  • macOS: Brave、Edge、Safari
  • iOS

アプリケーション スタック

  • このサーバーは Express.js 上に構築されています。
  • web-push Node.js ライブラリはすべてのプッシュ通知ロジックを処理します。
  • サブスクリプション データは、lowdb を使用して JSON ファイルに書き込まれます。

プッシュ通知を実装するためにこれらのテクノロジーを使用する必要はありません。これらのテクノロジーを選択した理由は、信頼できる Codelab エクスペリエンスを提供してくれるためです。

設定

コードの編集可能なコピーを取得する

この手順の右側に表示されるコードエディタは、この Codelab では Glitch UI と呼びます。

  1. [Remix to Edit] をクリックしてプロジェクトを編集可能にします。

認証の設定

プッシュ通知を機能させるには、サーバーとクライアントに認証キーを設定する必要があります。理由については、ウェブ push プロトコル リクエストに署名するをご覧ください。

  1. [Tools]、[Terminal] の順にクリックして Glitch ターミナルを開きます。
  2. ターミナルで npx web-push generate-vapid-keys を実行します。秘密鍵と公開鍵の値をコピーします。
  3. .env を開き、VAPID_PUBLIC_KEY と VAPID_PRIVATE_KEY を更新します。VAPID_SUBJECT を mailto:test@test.test に設定します。これらの値はすべて二重引用符で囲む必要があります。更新を行うと、.env ファイルは次のようになります。
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. Glitch ターミナルを閉じます。
  1. public/index.js を開きます。
  2. VAPID_PUBLIC_KEY_VALUE_HERE は、公開鍵の値に置き換えます。

サブスクリプションを管理

サブスクリプション プロセスのほとんどはクライアントが処理します。サーバーが行う必要がある主な作業は、新しいプッシュ通知サブスクリプションの保存と、古いサブスクリプションの削除です。これらのサブスクリプションにより、今後クライアントにメッセージを push できるようになります。購読プロセスの詳細なコンテキストについては、クライアントをプッシュ通知に登録するをご覧ください。

新しい定期購入情報を保存する

  1. サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 全画面表示 を押します。
  1. [アプリ] タブで [Service Worker を登録] をクリックします。ステータス ボックスに、次のようなメッセージが表示されます。
Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/
  1. アプリのタブで、[Subscribe to push] をクリックします。ウェブサイトによるプッシュ通知の送信を許可するかどうかを 尋ねるメッセージが表示されます。[許可]（またはお使いのブラウザや OS で使用されている同等のフレーズ）をクリックします。ステータス ボックスに次のようなメッセージが表示されます。
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
  1. Glitch UI で [View Source] をクリックしてコードに戻ります。
  2. [Tools]、[Logs] の順にクリックして Glitch Logs を開きます。/add-subscription の後にデータが表示されているはずです。/add-subscription は、クライアントがプッシュ通知に登録するときに POST リクエストを送信する URL です。以降のデータは、保存する必要があるクライアントのサブスクリプション情報です。
  3. server.js を開きます。
  4. /add-subscription ルートハンドラ ロジックを次のコードで更新します。
app.post('/add-subscription', (request, response) => {
  console.log('/add-subscription');
  console.log(request.body);
  console.log(`Subscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .push(request.body)
    .write();
  response.sendStatus(200);
});

古い定期購入情報を削除する

  1. アプリのタブに戻ります。
  2. [push の登録を解除] をクリックします。
  3. Glitch のログをもう一度確認します。/remove-subscription に続いてクライアントのサブスクリプション情報が表示されます。
  4. /remove-subscription ルートハンドラ ロジックを次のコードで更新します。
app.post('/remove-subscription', (request, response) => {
  console.log('/remove-subscription');
  console.log(request.body);
  console.log(`Unsubscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .remove({endpoint: request.body.endpoint})
    .write();
  response.sendStatus(200);
});

通知を送信する

push メッセージを送信するで説明されているように、実際にはプッシュ メッセージがサーバーから直接クライアントに送信されることはありません。そうではなく、push サービスに依存しています。サーバーは基本的に、ユーザーが使用するブラウザ ベンダーが所有するウェブサービス（プッシュ サービス）に対してウェブサービス リクエスト（ウェブ push プロトコル リクエスト）を行うことで、クライアントにメッセージを push するプロセスを開始します。

  1. /notify-me ルートハンドラ ロジックを次のコードで更新します。
app.post('/notify-me', (request, response) => {
  console.log('/notify-me');
  console.log(request.body);
  console.log(`Notifying ${request.body.endpoint}`);
  const subscription = 
      db.get('subscriptions').find({endpoint: request.body.endpoint}).value();
  sendNotifications([subscription]);
  response.sendStatus(200);
});
  1. sendNotifications() 関数を次のコードで更新します。
function sendNotifications(subscriptions) {
  // TODO
  // Create the notification content.
  const notification = JSON.stringify({
    title: "Hello, Notifications!",
    options: {
      body: `ID: ${Math.floor(Math.random() * 100)}`
    }
  });
  // Customize how the push service should attempt to deliver the push message.
  // And provide authentication information.
  const options = {
    TTL: 10000,
    vapidDetails: vapidDetails
  };
  // Send a push message to each client specified in the subscriptions array.
  subscriptions.forEach(subscription => {
    const endpoint = subscription.endpoint;
    const id = endpoint.substr((endpoint.length - 8), endpoint.length);
    webpush.sendNotification(subscription, notification, options)
      .then(result => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Result: ${result.statusCode}`);
      })
      .catch(error => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Error: ${error} `);
      });
  });
}
  1. /notify-all ルートハンドラ ロジックを次のコードで更新します。
app.post('/notify-all', (request, response) => {
  console.log('/notify-all');
  response.sendStatus(200);
  console.log('Notifying all subscribers');
  const subscriptions =
      db.get('subscriptions').cloneDeep().value();
  if (subscriptions.length > 0) {
    sendNotifications(subscriptions);
    response.sendStatus(200);
  } else {
    response.sendStatus(409);
  }
});
  1. アプリのタブに戻ります。
  2. [push の登録を解除] をクリックし、もう一度 [Subscribe to push] をクリックします。前述のように、Glitch はコードを編集するたびにプロジェクトを再起動し、起動時にデータベースを削除するようにプロジェクトが構成されているため、これが必要になります。
  3. [通知を受け取る] をクリックします。プッシュ通知が送信されます。タイトルは Hello, Notifications!、本文は ID: <ID>（<ID> は乱数）にする必要があります。
  4. 他のブラウザやデバイスでアプリを開き、プッシュ通知に登録して [すべて通知] ボタンをクリックします。登録しているすべてのデバイスに同じ通知が届くはずです（つまり、プッシュ通知の本文にある ID は同じである必要があります）。

次のステップ

  • プッシュ通知の概要で、プッシュ通知の仕組みをより深く理解する。
  • 通知権限をリクエストし、デバイスをサブスクライブしてプッシュ通知を受信し、Service Worker を使用してプッシュ メッセージを受信し、メッセージを通知として表示するクライアントをビルドする方法については、Codelab: プッシュ通知クライアントをビルドするをご覧ください。