最近，我一直在开发一个仅使用 Web API 从头开始​​构建的新 webpush 包。这使得（至少在理论上）直接从浏览器发送 Web Push 消息成为可能。

这篇博文旨在解释什么是 Web Push 协议，它是如何工作的
(RFC 8291) 以及如何使用我的库发送 Web 推送消息。

什么是网络推送协议？

Web 推送协议是一种中间协议，允许应用程序向用户代理（通常是浏览器）发送消息。

它与服务器发送事件（SSE）类似，消息被推送到用户代理，但它有不同的目的。 Web 推送消息不需要网站作为服务工作者打开一个选项卡
可以监听推送消息。它在后台运行。

Web 推送协议如何工作？

Web Push 协议涉及三个参与者：

• 用户代理：通常是您的网站访问者浏览器
• 推送服务：由 Google、Mozilla 或 Apple 维护和拥有的推送服务器，具体取决于浏览器
• 应用程序服务器：您的服务器

以下是它们之间交互的概述：

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



由于多种原因需要中间推送服务。

首先，它减少了带宽和电池使用量，因为用户代理仅为所有网站维护一个连接，而不是每个网站一个连接。

它还提高了可扩展性和可靠性，因为主要浏览器的推送服务旨在处理数百万用户。由于如果用户代理离线，则必须保留推送消息，因此构建推送服务需要大量工程、弹性且冗余的基础设施

最后，对于小型网络公司来说，构建、部署和维护自定义推送服务通常过于复杂且耗费资源。这会给大公司带来不公平的竞争优势，因为他们将拥有必要的资源来开发和完善自己的推送服务。

如果您是像我一样关注隐私的用户，请参阅中介服务

接收所有消息都会引发危险信号。为了解决这个问题，Web Push

消息通过 HTTP 加密内容编码进行保护（请参阅我的 

http-ece 包），确保

敏感信息仍然受到保护，任何第三方都无法读取

过境服务。

  
  
  设置


您可能已经注意到设置箭头与上面 ASCII 图中的其他箭头不同。这是因为设置阶段依赖于实现。所有主流浏览器都实现了 javascript

在 
 中推送 API
不同的方式。返回标准 
 的 PushManager.subscribe() 方法
PushSubscription 已公开。

订阅始终包含与推送订阅关联的唯一 URL 端点以及用于加密消息的公钥。

创建订阅时，可以提供可选的applicationServerKey来标识应用服务器推送消息。这是自愿应用程序服务器标识 (VAPID) 身份验证方法

（RFC 8292）。 VAPID 密钥用于减轻对推送服务的 DDOS 攻击。此外，在应用程序服务器和推送服务之间添加身份验证可以降低泄露订阅端点的风险。由于这些原因，它们在 Firefox 中是强制性的。

  
  
  提供订阅


第二步是将订阅发送到应用程序服务器，以便它可以开始发送消息。

应用程序服务器通常会将订阅存储在数据库中以供以后重用。

  
  
  推送消息


最后，为了推送消息，应用程序服务器使用 vapid 身份验证方案发送加密的 HTTP 请求，前提是提供了 applicationServerKey 来创建订阅。

如果推送服务收到消息时用户代理在线，则

转发。否则，它将被存储，直到用户代理上线或消息过期。

当用户代理收到消息时，它会执行主要用于显示通知的推送事件处理程序。

  
  
  使用 webpush 设置应用程序服务器


首先，您必须生成 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 代码，所以一定要检查一下！