在深入了解 API 之前,我们先从头到尾简要了解一下推送。这样,当我们在后面逐步介绍各个主题或 API 时,您就能了解这些概念的重要性以及它们的重要性所在。
实现推送的三个关键步骤如下:
- 添加客户端逻辑以让用户订阅推送通知(即 Web 应用中的 JavaScript 和界面,用于将用户注册为接收推送消息)。
- 来自后端 / 应用的 API 调用,用于触发向用户设备发送推送消息。
- 服务工作器 JavaScript 文件,该文件会在推送到达设备时收到“推送事件”。您将能够在此 JavaScript 中显示通知。
下面我们来详细了解一下这些步骤。
第 1 步:客户端
第一步是让用户“订阅”推送消息。
为用户订阅需要满足以下两点。首先,从用户那里获取权限,以向他们发送推送消息。其次,从浏览器获取 PushSubscription
。
PushSubscription
包含向该用户发送推送消息所需的所有信息。您可以将其“视为”该用户设备的 ID。
所有这些都是使用 Push API 在 JavaScript 中完成的。
在为用户订阅之前,您需要生成一组“应用服务器密钥”,我们稍后会介绍。
应用服务器密钥(也称为 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 Push 服务都需要相同的 API 调用。该 API 就是 Web 推送协议。这是一种 IETF 标准,定义了如何对推送服务进行 API 调用。
该 API 调用需要设置特定标头,并且数据应为字节流。我们将介绍可为我们执行此 API 调用的库,以及如何自行执行此操作。
该 API 可以做什么?
该 API 提供了一种向用户发送消息(有 / 无数据)的方法,并提供了有关如何发送消息的说明。
您通过推送消息发送的数据必须经过加密。这样做是为了防止推送服务(可能是任何人)查看随推送消息发送的数据。这一点很重要,因为浏览器决定使用哪种推送服务,这可能会导致浏览器使用不安全的推送服务。
当您触发推送消息时,推送服务将收到 API 调用并将消息加入队列。此消息将一直处于队列中,直到用户的设备上线且推送服务可以传送消息为止。您可以向推送服务提供的说明定义了推送消息的队列方式。
说明包含以下详细信息:
推送消息的生存时间。此参数用于指定消息应在队列中等待多长时间,之后便会被移除且不会传送。
定义消息的紧急程度。如果推送服务仅传送高优先级消息以延长用户的电池续航时间,这将非常有用。
为推送消息指定“主题”名称,系统会将此新消息替换为所有待处理消息。
第 3 步:在用户设备上推送事件
我们发送推送消息后,推送服务会将您的消息保留在其服务器上,直到发生以下某个事件:
- 设备上线,推送服务传送消息。
- 消息过期。如果发生这种情况,推送服务会将消息从其队列中移除,并且该消息将永远不会传送。
当推送服务确实传送消息时,浏览器会收到消息、解密所有数据,并在您的服务工作器中分派 push
事件。
服务工作线程是一种“特殊”JavaScript 文件。浏览器可以在不打开您的网页的情况下执行此 JavaScript。它甚至可以在浏览器关闭时执行此 JavaScript。Service Worker 还提供网页中不提供的 API(即无法在 Service Worker 脚本之外使用的 API),例如推送。
您可以在服务工件的“push”事件中执行任何后台任务。您可以发出分析调用、离线缓存网页和显示通知。
以上就是推送消息的整个流程。
下一步做什么
- 网络推送通知概览
- 推送的工作原理
- 为用户订阅
- 权限用户体验
- 使用 Web 推送库发送消息
- Web 推送协议
- 处理推送事件
- 显示通知
- 通知行为
- 常见通知模式
- 推送通知常见问题解答
- 常见问题和报告 bug