推送的工作原理

Matt Gaunt

在深入了解 API 之前，我们先从宏观角度了解一下推送的整个过程。这样，当我们稍后逐步介绍各个主题或 API 时，您就会了解其重要性以及原因。

实现推送的三个关键步骤如下：

1. 添加客户端逻辑，以便为用户订阅推送（即 Web 应用中用于为用户注册推送消息的 JavaScript 和界面）。
2. 来自后端/应用的 API 调用，用于触发向用户设备发送推送消息。
3. 当推送消息到达设备时，将接收“推送事件”的 Service Worker JavaScript 文件。您可以在此 JavaScript 中显示通知。

我们来详细了解一下每个步骤的具体内容。

第 1 步：客户端

第一步是让用户“订阅”推送消息。

订阅用户需要满足两个条件。首先，获得用户的许可，以便向其发送推送消息。第二，从浏览器获取 PushSubscription。

PushSubscription 包含向该用户发送推送消息所需的所有信息。 您可以将此 ID 视为该用户设备的 ID。

这一切都是通过 Push API 在 JavaScript 中完成的。

Browser Support

• 42
• 17
• 44
• 16

Source

在为用户订阅之前，您需要生成一组“应用服务器密钥”，我们稍后会对此进行介绍。

应用服务器密钥（也称为 VAPID 密钥）是您服务器的专属密钥。它们允许推送服务知道哪个应用服务器订阅了用户，并确保是同一服务器触发了向该用户发送的推送消息。

在用户订阅并获得 PushSubscription 后，您需要将 PushSubscription 详细信息发送到后端/服务器。在服务器上，您需要将此订阅保存到数据库，并使用它向该用户发送推送消息。

第 2 步：发送推送消息

如果您想向用户发送推送消息，则需要对推送服务进行 API 调用。此 API 调用将包含要发送的数据、消息的发送对象以及有关如何发送消息的所有条件。通常，此 API 调用是从您的服务器发出的。

您可能会问自己以下问题：

• 推送服务是什么？由谁提供？
• API 是什么样的？是 JSON、XML 还是其他格式？
• 该 API 有哪些功能？

推送服务是什么？由谁提供？

推送服务会接收网络请求，对其进行验证，然后将推送消息传递给相应的浏览器。如果浏览器处于离线状态，消息会排队，直到浏览器恢复在线状态。

每个浏览器都可以使用其所需的任何推送服务，这是开发者无法控制的。这不会造成问题，因为每个推送服务都预期会收到相同的 API 调用。这意味着您无需关心推送服务是谁。您只需确保 API 调用有效。

如需获取用于触发推送消息的适当网址（即推送服务的网址），您只需查看 PushSubscription 中的 endpoint 值。

以下是您将从 PushSubscription 中获取的值的示例：

{
  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
  "keys": {
    "p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth": "tBHItJI5svbpez7KI4CCXg=="
  }
}

在本例中，端点为 https://random-push-service.com/some-kind-of-unique-id-1234/v2/。推送服务将是“random-push-service.com”，每个端点对用户而言都是唯一的，并以“some-kind-of-unique-id-1234”表示。当您开始使用推送时，您会注意到这种模式。

订阅中的密钥将在稍后介绍。

API 是什么样的？

我提到过，每个 Web 推送服务都要求相同的 API 调用。该 API 是 Web 推送协议。它是一项 IETF 标准，定义了如何向推送服务发出 API 调用。

API 调用需要设置特定标头，并且数据必须是字节流。我们将了解可以为我们执行此 API 调用的库，以及如何自行执行此调用。

该 API 有哪些功能？

该 API 提供了一种向用户发送消息（包含/不包含数据）的方法，并提供了有关如何发送消息的说明。

您通过推送消息发送的数据必须经过加密。这样做的原因是为了防止推送服务（可能是任何人）能够查看随推送消息发送的数据。这一点非常重要，因为浏览器会决定使用哪种推送服务，这可能会导致浏览器使用不安全或不安全的推送服务。

当您触发推送消息时，推送服务会收到 API 调用并将消息加入队列。此消息将一直排队，直到用户设备上线且推送服务可以递送消息。您可以向推送服务提供的指令定义了推送消息的排队方式。

这些说明包含以下详细信息：

• 推送消息的存留时间。这定义了消息在被移除且不递送之前应排队多长时间。

• 定义消息的紧急程度。如果推送服务通过仅传递高优先级消息来延长用户的电池续航时间，此功能会非常有用。

• 为推送消息指定一个“主题”名称，该名称将用此新消息替换任何待处理消息。

第 3 步：在用户设备上推送事件

我们发送推送消息后，推送服务会将您的消息保留在其服务器上，直到发生以下任一事件：

1. 设备上线，推送服务递送消息。
2. 消息过期。如果发生这种情况，推送服务会从其队列中移除该消息，并且该消息将永远不会递送。

当推送服务递送消息时，浏览器会接收消息、解密所有数据，并在 Service Worker 中分派 push 事件。

Service Worker 是一个“特殊”JavaScript 文件。即使您的网页未打开，浏览器也可以执行此 JavaScript。即使浏览器处于关闭状态，它也可以执行此 JavaScript。Service Worker 还具有网页中不提供的 API（例如推送），即 Service Worker 脚本之外不提供的 API。

您可以在 Service Worker 的“push”事件中执行任何后台任务。您可以进行分析调用、离线缓存网页和显示通知。

这就是推送消息的整个流程。

下一步做什么

• Web 推送通知概览
• 推送的工作原理
• 为用户订阅
• 权限用户体验
• 使用 Web 推送库发送消息
• Web 推送协议
• 处理推送事件
• 显示通知
• 通知行为
• 常见通知模式
• 推送通知常见问题解答
• 常见问题和报告错误

Codelab

• 构建推送通知客户端
• 构建推送通知服务器