推送的工作原理

Matt Gaunt

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

实现推送功能有三个关键步骤：

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

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

第 1 步：客户端

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

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

PushSubscription 包含我们需要的所有信息，以便向相应用户发送推送消息。 您可以将此视为相应用户设备的 ID。

所有这些操作都是通过 JavaScript 和 Push API 完成的。

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。

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

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

下一步做什么

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

Codelab

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