Deno を使用して Web プッシュ メッセージを送信する

最近、私は Web API のみを使用してゼロから構築された新しい webpush パッケージに取り組んでいます。これにより、(少なくとも理論的には) ブラウザから直接 Web プッシュ メッセージを送信できるようになります。

このブログ投稿は、Web プッシュ プロトコルとは何か、その仕組みを説明することを目的としています
(RFC 8291) とライブラリを使用して Web プッシュ メッセージを送信する方法。

Webプッシュプロトコルとは何ですか?

Web プッシュ プロトコルは、アプリケーションがユーザー エージェント (通常はブラウザ) にメッセージを送信できるようにする中間プロトコルです。

メッセージがユーザー エージェントにプッシュされるという意味ではサーバー送信イベント (SSE) に似ていますが、目的が異なります。 Web プッシュ メッセージでは、Web サイトがサービス ワーカーとしてタブを開いている必要はありません
プッシュメッセージをリッスンできます。バックグラウンドで動作します。

Web プッシュ プロトコルはどのように機能しますか?

Web プッシュ プロトコルには 3 つのアクターが関与します:

• ユーザーエージェント: 通常、Web サイト訪問者のブラウザ
• プッシュ サービス: ブラウザに応じて、Google、Mozilla、または Apple が保守および所有するプッシュ サーバー
• アプリケーションサーバー: あなたのサーバー

これらの間のやり取りの概要は次のとおりです:

    +-------+           +--------------+       +-------------+
    |  UA   |           | Push Service |       | Application |
    +-------+           +--------------+       +-------------+
        |                      |                      |
        |        Setup         |                      |
        |<====================>|                      |
        |           Provide Subscription              |
        |-------------------------------------------->|
        |                      |                      |
        :                      :                      :
        |                      |     Push Message     |
        |    Push Message      |<---------------------|
        |<---------------------|                      |
        |                      |                      |

中間プッシュ サービスは、複数の理由から必要です。

まず、ユーザー エージェントが Web サイトごとに 1 つの接続を維持するのではなく、すべての Web サイトに対して 1 つの接続のみを維持するため、帯域幅とバッテリーの使用量が削減されます。

主要なブラウザのプッシュ サービスは数百万のユーザーを処理できるように設計されているため、スケーラビリティと信頼性も向上します。ユーザーエージェントがオフラインの場合でもプッシュメッセージを保持する必要があるため、プッシュサービスの構築には多くのエンジニアリング、回復力と冗長性のあるインフラストラクチャが必要です

最後に、カスタム プッシュ サービスの構築、展開、保守は、多くの場合、小規模な Web 企業にとっては複雑すぎてリソースを大量に消費します。これにより、大企業は独自のプッシュ サービスを開発および改良するために必要なリソースを得ることができるため、不公平な競争上の優位性が得られることになります。

私のようにプライバシーを重視するユーザーの場合は、仲介サービスを検討してください
すべてのメッセージを受信すると危険信号が発生します。この懸念に対処するために、Web Push
メッセージは HTTP 暗号化コンテンツエンコーディングによって保護されます (私の
を参照してください) http-ece パッケージ)、
を確保します 機密情報は保護されたままであり、第三者が読み取ることができません
輸送中のサービス

設定

上の ASCII グラフで、セットアップの矢印が他の矢印と異なることに気づいたかもしれません。これは、セットアップ段階が実装に依存しているためです。すべての主要なブラウザは JavaScript
を実装しています。
で API をプッシュします 違う方法で。標準の
を返す PushManager.subscribe() メソッド PushSubscription が公開されています。

サブスクリプションには、プッシュ サブスクリプションに関連付けられた一意の URL エンドポイントと、メッセージの暗号化に使用される公開キーが常に含まれます。

サブスクリプションを作成するとき、アプリケーション サーバーがメッセージをプッシュしていることを識別するために、オプションの applicationServerKey が提供される場合があります。これは、Voluntary Application Server Identification (VAPID) 認証方法です
(RFC 8292)。 VAPID キーは、プッシュ サービスに対する DDOS 攻撃を軽減するために使用されます。また、アプリケーション サーバーとプッシュ サービスの間に認証を追加すると、サブスクリプション エンドポイントが漏洩するリスクが軽減されます。これらの理由から、これらは Firefox では必須です。

サブスクリプションを提供する

2 番目のステップは、メッセージの送信を開始できるように、アプリケーション サーバーにサブスクリプションを送信することです。

アプリケーション サーバーは通常、後で再利用できるようにサブスクリプションをデータベースに保存します。

プッシュメッセージ

最後に、メッセージをプッシュするために、サブスクリプションを作成するために applicationServerKey が提供された場合、アプリケーション サーバーは無効な認証スキームを使用して暗号化された HTTP リクエストを送信します。

プッシュ サービスでメッセージを受信したときにユーザー エージェントがオンラインである場合、
転送されました。それ以外の場合、ユーザー エージェントがオンラインになるか、メッセージの有効期限が切れるまで保存されます。

ユーザー エージェントはメッセージを受信すると、主に通知を表示するために使用されるプッシュ イベント ハンドラーを実行します。

Webpush を使用したアプリケーション サーバーのセットアップ

一部のブラウザでは VAPID キーが必須となっているため、最初に VAPID キーを生成する必要があります。

$ deno run https://raw.githubusercontent.com/negrel/webpush/master/cmd/generate-vapid-keys.ts

出力をコピーしてファイルに保存します。VAPID キーを再度生成する必要はありません。

アプリケーションサーバーコードでは、次のようにロードできます:

import * as webpush from "jsr:@negrel/webpush";

// Read generated VAPID file.
const vapidKeysJson = Deno.readTextFileSync("./path/to/vapid.json");

// Import VAPID keys.
webpush.importVapidKeys(JSON.parse(vapidKeysJson));

次に、ApplicationServer オブジェクト インスタンスを作成する必要があります。

// adminEmail is used by Push services maintainer to contact you in case there
// is problem with your application server.
const adminEmail = "john@example.com";

// Create an application server object.
const appServer = await webpush.ApplicationServer.new({
  contactInformation: "mailto:" + adminEmail,
  vapidKeys,
});

その後、プッシュ メッセージを送信するには、PushSubscriber を作成し、その
を呼び出すだけです。 次のとおり、pushMessage()/pushTextMessage() メソッド:

const subsribers = [];

// HTTP handler for user agent sending their subscription.
function subscribeHandler(req) {
  // Extract subscription send by user agent.
  const subscription = await req.json();

  // Store subscription in db.
  // ...

  // Create a subscriber object.
  const sub = appServer.subscribe(subscription);

  // Store subscriber in memory.
  subscribers.push(sub);
}

// Helper method to send message to all subscribers.
function broadcastMessage(msg) {
  for (const sub of subscribes) {
    sub.pushTextMessage(msg, {});
  }
}

これで、購読者にプッシュ メッセージを送信できます!

webpush リポジトリには、ローカルで実行できる同様のコードを含む対話型のサンプルが含まれています。クライアント側の JavaScript コードも含まれているので、ぜひチェックしてください!

以上がDeno を使用して Web プッシュ メッセージを送信するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。