在详细介绍此 API 之前,我们先来大致了解一下推送。然后,当我们 稍后逐步介绍各个主题或 API,您将了解使用 API 的 非常重要。
实施推送的三个关键步骤如下:
- 添加客户端逻辑,以订阅要推送的用户(即 注册用户以推送消息的 Web 应用)。
- 来自后端 / 应用的 API 调用,触发向用户设备推送消息。
- 将接收“推送事件”的 Service Worker JavaScript 文件当推送到达时 。在此 JavaScript 中,您将能够显示通知。
下面我们来更详细地了解每个步骤的含义。
第 1 步:客户端
第一步是“订阅”用户来推送消息。
订阅用户需要做两件事。首先,从用户那里获取权限
以及推送消息其次,从浏览器获取 PushSubscription
。
PushSubscription
包含我们向该用户发送推送消息所需的所有信息。
您可以则可以将其视为用户设备的 ID
这一切都是通过 Push API 在 JavaScript 中完成的。
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
在订阅用户之前 您需要生成一组 我们稍后将介绍“应用服务器密钥”
应用服务器密钥(也称为 VAPID 密钥)是您的服务器独有的密钥。它们允许 推送服务,以了解哪个应用服务器订阅用户并确保其订阅相同 触发向该用户推送消息的服务器。
订阅用户并获得 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 是 网络推送协议。 它是一种 IETF 标准,用于定义如何对推送服务进行 API 调用。
API 调用需要设置特定标头,且数据为字节流。我们将 研究可为我们执行此 API 调用的库,以及如何自行执行此类调用。
此 API 有哪些用途?
该 API 提供了一种向用户发送消息的方式(有 / 无数据),并提供 如何发送邮件的说明。
通过推送消息发送的数据必须经过加密。原因就在于 这会阻止推送服务(可以是任何人)查看通过 推送消息。这一点很重要,因为浏览器决定着将哪个推送服务 这可能会让使用不安全推送服务的浏览器成为可能。
当您触发推送消息时,推送服务将接收 API 调用并将 消息。此消息将一直排入队列,直到用户的设备恢复在线状态并进行推送 服务可以传送消息。您可以向推送服务提供的指令定义了 推送消息已加入队列。
相关说明包括如下详细信息:
推送消息的存留时间。这定义了消息在排队等待多长时间 该内容会被移除,且未投放。
指定消息的紧急程度。如果推送服务要保留 以便延长电池续航时间。
为推送消息指定“主题”名称,该名称将会用此新消息替换所有待审批帖子。
第 3 步:在用户设备上推送事件
我们发送推送消息后,推送服务会将您的消息保留在其服务器上,直到 会发生以下任一事件:
- 设备上线,推送服务会传递消息。
- 消息过期。如果发生这种情况,推送服务会将消息从其队列中移除,并 它绝不会被投放
当推送服务传递消息时,浏览器将收到该消息,
数据,并在 Service Worker 中分派 push
事件。
Service Worker 是一种 “special”JavaScript 文件。浏览器无需您的网页即可执行此 JavaScript 打开。它甚至能在浏览器关闭时执行此 JavaScript。Service Worker 网页中没有的 API(如推送) 即 Service Worker 脚本的一部分)。
它位于 Service Worker 的“push”部分中,事件,您可以执行任何后台任务。您 可以进行分析调用、离线缓存网页并显示通知。
以上就是推送消息的整个流程。