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

Kate Jeffreys

Kayce Basques

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

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

この Codelab は、実践による学習を支援することに重点を置いていますが、 コンセプトについてよく話します。チェックアウト プッシュ通知はどのように機能しますか？ プッシュ通知の概念を学びましょう。

この Codelab のクライアント コードはすでに完成しています。データは 実装する方法を学びます。新しい P-MAX キャンペーンを プッシュ通知のクライアントについては、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 エクスペリエンスを提供できるからです。

セットアップ

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

手順の右側に表示されるコードエディタの名前を 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. アプリのタブで [Register Service Worker] をクリックします。ステータスボックスには 次のようなメッセージが表示されます。

Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/

1. アプリのタブで [Subscribe to push] をクリックします。おそらくご使用のブラウザやオペレーティング システムは ウェブサイトからプッシュ通知を送信するかどうかを尋ねられます。[Allow] をクリックします（または など）。ステータス ボックスに、 これを次のように変更します。

Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…

1. Glitch UI で [View Source] をクリックしてコードに戻ります。
2. [Tools]、[Logs] の順にクリックして、Glitch ログを開きます。マイページ /add-subscription の後にデータが表示されるはずです。/add-subscription は クライアントが送信する 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. もう一度グリッチログを確認します。「/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 サービス）へのサービス リクエスト（ウェブ 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 が 同じである必要があります）。

次のステップ

• プッシュ通知の概要 をご確認ください。
• Codelab: プッシュ通知クライアントを作成するを確認する。 通知権限をリクエストするクライアントの構築方法については、 デバイスにプッシュ通知を受信し、Service Worker で メッセージをプッシュ表示し、メッセージを通知として表示できます。