推送工作原理

在深入了解 API 之前，让我们从宏观层面了解一下推送的整个过程。然后，当我们逐步学习后面的各个主题或 API 时，您将了解它为何如此重要。

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

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

让我们更详细地了解一下每个步骤都包含哪些内容。

步骤 1：客户端

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

订阅用户需要做两件事。首先，获得用户许可，才能向他们发送推送消息。其次，从浏览器获取 PushSubscription。

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

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

浏览器支持

  • Chrome: 42.
  • Edge: 17.
  • Firefox: 44.
  • Safari: 16.

来源

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

应用服务器密钥也称为 VAPID 密钥，对于您的服务器是唯一的。它们允许推送服务知道哪个应用服务器订阅了用户，并确保是同一服务器触发了向该用户推送消息。

订阅用户并获得 PushSubscription 后，您需要将 PushSubscription 详细信息发送到您的后端/服务器。在您的服务器上，您将此订阅保存到数据库中，并使用它向该用户发送推送消息。

Make sure you send the PushSubscription to your backend.

步骤 2：发送推送消息

当您想向用户发送推送消息时，您需要向推送服务发出 API 调用。此 API 调用将包括要发送的数据、要向谁发送消息以及有关如何发送消息的任何条件。通常，此 API 调用是从您的服务器完成的。

您可能会问自己的一些问题

  • 推送服务是谁？是什么？
  • API 是什么样子的？是 JSON、XML 还是其他格式？
  • API 可以做什么？

推送服务是谁？是什么？

推送服务接收网络请求，对其进行验证，并将推送消息传递到相应的浏览器。如果浏览器处于离线状态，则消息将排队，直到浏览器上线。

每个浏览器都可以使用他们想要的任何推送服务，这是开发者无法控制的。这不是问题，因为每个推送服务都期望相同的 API 调用。这意味着您不必关心推送服务是谁。您只需要确保您的 API 调用有效即可。

要获取触发推送消息的相应 URL（即，推送服务的 URL），您只需要查看 PushSubscription 中的 endpoint 值即可。

以下是您从 PushSubscription 获取的值的示例

{
  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
  "keys": {
    "p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth": "tBHItJI5svbpez7KI4CCXg=="
  }
}

在本例中，endpoint 是 [https://random-push-service.com/some-kind-of-unique-id-1234/v2/]。推送服务将是“random-push-service.com”，每个 endpoint 对于用户都是唯一的，以“some-kind-of-unique-id-1234”表示。当您开始使用推送时，您会注意到这种模式。

订阅中的 keys 将在后面介绍。

API 是什么样子的？

我提到过，每个 Web 推送服务都期望相同的 API 调用。该 API 是 Web Push Protocol。它是一个 IETF 标准，定义了如何向推送服务发出 API 调用。

API 调用需要设置某些标头，并且数据必须是字节流。我们将研究可以为我们执行此 API 调用的库以及如何自己执行此操作。

API 可以做什么？

API 提供了一种向用户发送消息的方式，可以带数据也可以不带数据，并提供了如何发送消息的说明。

您随推送消息发送的数据必须加密。这样做的原因是，它可以防止推送服务（可能是任何人）查看随推送消息发送的数据。鉴于浏览器决定使用哪个推送服务，这可能会为浏览器使用不安全或不安全的推送服务打开大门，因此这一点很重要。

当您触发推送消息时，推送服务将接收 API 调用并将消息排队。此消息将保持排队状态，直到用户的设备上线并且推送服务可以传递消息。您可以给推送服务的说明定义了推送消息的排队方式。

这些说明包括如下详细信息：

  • 推送消息的生存时间。这定义了消息在被删除且未传递之前应排队多长时间。

  • 定义消息的紧急程度。如果推送服务通过仅传递高优先级消息来保护用户电池寿命，这将非常有用。

  • 为推送消息指定一个“主题”名称，该名称将替换任何待处理的具有此主题名称的消息。

When your server wishes to send a push message, it makes a web push protocol request to a push service.

步骤 3：用户设备上的 Push event

发送推送消息后，推送服务会将您的消息保留在其服务器上，直到发生以下事件之一

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

当推送服务传递消息时，浏览器将接收消息，解密任何数据，并在您的 Service Worker 中调度 push 事件。

Service Worker 是一个“特殊”的 JavaScript 文件。浏览器可以在您的页面未打开的情况下执行此 JavaScript。即使浏览器关闭，它也可以执行此 JavaScript。Service Worker 还具有 API（如 push），这些 API 在网页中不可用（即，在 Service Worker 脚本之外不可用的 API）。

在 Service Worker 的“push”事件内部，您可以执行任何后台任务。您可以进行分析调用、缓存离线页面和显示通知。

When a push message is sent from a push service to a user's device, your service worker receives a push event

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

下一步

代码实验室