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

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

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

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

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

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

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

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

両者間のやり取りの概要は次のとおりです:

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



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

まず、ユーザー エージェントがウェブサイトごとに 1 つではなく、すべてのウェブサイトに対して 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 = "[email protected]";

// 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 コードも含まれているので、ぜひチェックしてください!