推送的工作原理

Matt Gaunt

在介绍此 API 之前,我们先来简要了解一下推送流程。然后,当我们稍后逐一介绍各个主题或 API 时,您将了解它们的重要性及其重要性。

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

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

让我们来详细了解一下每个步骤的具体含义。

第 1 步:客户端

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

订阅用户需要两件事。首先,从用户处获取权限,以便向他们发送推送消息。其次,从浏览器获取 PushSubscription

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

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

浏览器支持

  • 42
  • 17
  • 44
  • 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 推送服务都需要相同的 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”事件内,您可以执行任何后台任务。您可以进行分析调用、离线缓存网页以及显示通知。

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

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

下一步做什么

Codelab