推送的工作原理

Matt Gaunt

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

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

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

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

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

订阅用户需要做两件事。首先,从用户那里获取权限以向其发送推送消息。其次,从浏览器获取 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