JavaScript推送通知_Web Push协议详解

Web Push技术通过浏览器的推送服务实现用户离开页面后仍能接收通知。1. 流程包括用户授权、生成PushSubscription、服务端存储订阅信息、服务器加密推送消息至浏览器端点、Service Worker触发通知显示。2. PushSubscription包含endpoint（指向浏览器推送服务器）、p256dh公钥和auth密钥，用于安全通信。3. 消息必须经ECDH加密并使用VAPID协议验证服务器身份，防止匿名推送。4. Service Worker监听push事件解密并展示通知，支持后台运行与用户交互响应。整个机制依赖前端、后端与浏览器协同，核心在于安全加密与标准化协议，现代框架已简化集成但理解底层有助于问题排查。

网站想要在用户离开页面后依然能传递重要信息，Web Push 技术就是关键。JavaScript 推送通知依赖于一套标准化的协议体系，核心是 Web Push 协议（RFC 8030）。它允许服务器主动向用户的浏览器发送消息，即使网页未打开也能触发通知。实现这一功能不只靠前端 JavaScript，而是从前端注册、服务端推送到浏览器中转的完整链路。

1. 推送通知的基本流程

整个 Web Push 的执行流程包含几个关键步骤：

• 用户授权： 页面通过 JavaScript 请求用户许可，只有同意后才能接收通知。
• 订阅生成： 浏览器为当前用户设备生成唯一的推送订阅信息（PushSubscription），包含端点 URL 和加密密钥。
• 服务端存储： 网站后端保存该订阅数据，用于后续推送。
• 服务器推送： 当需要发送通知时，后端向订阅中的端点 URL 发起 HTTPS 请求。
• 浏览器显示： 浏览器接收到消息后，由 Service Worker 触发 Notification API 展示提示。

这个过程涉及前端、后端和浏览器厂商（如 Chrome、Firefox）三方协作，其中推送消息实际由各大浏览器运营的推送服务中转，比如 Google 的 FCM 或 Mozilla 的 Autopush。

2. PushSubscription 订阅对象详解

调用 registration.pushManager.subscribe() 后返回的订阅对象包含关键信息：

立即学习“Java免费学习笔记（深入）”；

• endpoint： 唯一的推送地址，指向浏览器厂商的推送服务器，所有消息必须发送到此 URL。
• keys.p256dh： 用于内容加密的公钥，确保传输安全。
• keys.auth： 认证密钥，配合 p256dh 实现消息解密。

这些信息是推送的基础，服务器必须使用它们对消息体进行加密后再发送，否则浏览器会拒绝显示。

LuckyCola工具库

LuckyCola工具库是您工作学习的智能助手，提供一系列AI驱动的工具，旨在为您的生活带来便利与高效。

133

查看详情

3. Web Push 消息加密与 VAPID 协议

为了保证安全，Web Push 要求所有推送消息必须加密。主要依赖两种机制：

• ECDH 加密： 使用订阅中的 p256dh 和 auth 密钥，结合服务器生成的临时密钥，对消息内容进行 AES-GCM 加密。
• VAPID（Voluntary Application Server Identification）： 让推送服务器识别应用身份，避免匿名推送。VAPID 包含一对公私钥，服务器用私钥签名 HTTP 头部的 Authorization 和 Crypto-Key 字段。

VAPID 公钥需在前端注册时提供，通常以 base64 编码传入 subscribe() 方法的 applicationServerKey 参数。浏览器据此验证推送来源合法性。

4. Service Worker 与通知显示

即使页面关闭，Service Worker 仍可在后台运行，负责接收并展示通知。需要监听 push 事件：

self.addEventListener('push', event => {
  const data = event.data.json();
  const options = {
    body: data.body,
    icon: '/icon.png'
  };
  event.waitUntil(self.registration.showNotification(data.title, options));
});

event.waitUntil() 确保通知显示完成前 Worker 不会被终止。还可以监听 notificationclick 事件处理用户点击行为。

基本上就这些。Web Push 的难点在于加密流程和 VAPID 配置，但一旦打通，就能实现跨平台的消息触达。现代框架如 Firebase Cloud Messaging 或第三方服务（OneSignal、Pushy）已封装底层细节，简化了集成过程。不过理解协议本身，有助于排查订阅失败、消息未送达等问题。

以上就是JavaScript推送通知_Web Push协议详解的详细内容，更多请关注php中文网其它相关文章！