推送的工作原理

Matt Gaunt
X 首页

在深入了解 API 之前，我们先从头到尾简要了解一下推送。然后，当我们稍后逐步介绍各个主题或 API 时，您将了解它的重要性和重要性。

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

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

下面，我们来详细了解一下这些步骤。

第 1 步：客户端

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

订阅用户需要做两件事。首先，从用户那里获取权限以向其发送推送消息。其次，从浏览器获取 PushSubscription。

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

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

浏览器支持

  • Chrome：42.
  • Edge：17.
  • Firefox：44.
  • Safari：16。

来源

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

应用服务器密钥（也称为 VAPID 密钥）是服务器的唯一标识符。它们可让推送服务知道哪个应用服务器订阅了用户，并确保触发向该用户推送消息的服务器是同一服务器。

订阅用户并获得 PushSubscription 后，您需要将 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 Push 服务都需要相同的 API 调用。该 API 就是 Web 推送协议。这是一种 IETF 标准，定义了如何对推送服务进行 API 调用。

该 API 调用需要设置特定标头，并且数据应为字节流。我们将介绍可为我们执行此 API 调用的库，以及如何自行执行此操作。

此 API 有哪些用途？

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

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

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

说明包含以下详细信息：

  • 推送消息的存留时间。此参数用于指定消息应在队列中等待多长时间，之后便会被移除且不会传送。

  • 指定消息的紧急程度。如果推送服务仅传送高优先级消息以延长用户的电池续航时间，这将非常有用。

  • 为推送消息指定“主题”名称，系统会将此新消息替换为所有待处理消息。

当您的服务器想要发送推送消息时，它会向推送服务发出网络推送协议请求。

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

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

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

当推送服务确实传送消息时，浏览器会收到消息、解密所有数据，并在您的服务工作器中分派 push 事件。

服务工作线程是一种“特殊”JavaScript 文件。浏览器可以在不打开您的网页的情况下执行此 JavaScript。它甚至可以在浏览器关闭时执行此 JavaScript。Service Worker 还具有网页中不提供的 API（即无法在 Service Worker 脚本之外使用的 API），例如推送。

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

当推送消息从推送服务发送到用户设备时，您的 Service Worker 收到一个推送事件

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

下一步做什么

Codelab