推送的工作原理

Matt Gaunt

在详细介绍此 API 之前,我们先来大致了解一下推送。然后,当我们 稍后逐步介绍各个主题或 API,您将了解使用 API 的 非常重要。

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

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

下面我们来更详细地了解每个步骤的含义。

第 1 步:客户端

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

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

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

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

浏览器支持

  • Chrome:42。 <ph type="x-smartling-placeholder">
  • Edge:17。 <ph type="x-smartling-placeholder">
  • Firefox:44。 <ph type="x-smartling-placeholder">
  • Safari:16. <ph type="x-smartling-placeholder">

来源

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

应用服务器密钥(也称为 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”且每个端点对用户来说都是唯一的,用 &#39;some-kind-of-unique-id-1234&#39;.开始使用推送时,您会注意到这种模式。

稍后将介绍订阅中的密钥

该 API 是什么样的?

我提到过,每项 Web 推送服务都希望进行相同的 API 调用。该 API 是 网络推送协议。 它是一种 IETF 标准,用于定义如何对推送服务进行 API 调用。

API 调用需要设置特定标头,且数据为字节流。我们将 研究可为我们执行此 API 调用的库,以及如何自行执行此类调用。

此 API 有哪些用途?

该 API 提供了一种向用户发送消息的方式(有 / 无数据),并提供 如何发送邮件的说明。

通过推送消息发送的数据必须经过加密。原因就在于 这会阻止推送服务(可以是任何人)查看通过 推送消息。这一点很重要,因为浏览器决定着将哪个推送服务 这可能会让使用不安全推送服务的浏览器成为可能。

当您触发推送消息时,推送服务将接收 API 调用并将 消息。此消息将一直排入队列,直到用户的设备恢复在线状态并进行推送 服务可以传送消息。您可以向推送服务提供的指令定义了 推送消息已加入队列。

相关说明包括如下详细信息:

  • 推送消息的存留时间。这定义了消息在排队等待多长时间 该内容会被移除,且未投放。

  • 指定消息的紧急程度。如果推送服务要保留 以便延长电池续航时间。

  • 为推送消息指定“主题”名称,该名称将会用此新消息替换所有待审批帖子。

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

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

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

  1. 设备上线,推送服务会传递消息。
  2. 消息过期。如果发生这种情况,推送服务会将消息从其队列中移除,并 它绝不会被投放

当推送服务传递消息时,浏览器将收到该消息, 数据,并在 Service Worker 中分派 push 事件。

Service Worker 是一种 “special”JavaScript 文件。浏览器无需您的网页即可执行此 JavaScript 打开。它甚至能在浏览器关闭时执行此 JavaScript。Service Worker 网页中没有的 API(如推送) 即 Service Worker 脚本的一部分)。

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

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

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

下一步做什么

Codelab