如何用 Service Worker 实现 Web Push 网页原生推送通知

你在学习文章相关的知识吗？本文《如何用 Service Worker 实现 Web Push 网页原生推送通知》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

Web Push实现需三步：注册Service Worker并监听push事件、申请用户授权后获取PushSubscription、后端用VAPID私钥加密发送消息；须遵守HTTPS、userVisibleOnly、公私钥匹配等安全限制。

要用 Service Worker 实现 Web Push，核心是三步：注册 Service Worker、申请用户授权、向 Push 服务（如 Firebase Cloud Messaging 或 Web Push 协议兼容的后端）发送订阅并触发推送。关键不在“怎么写 JS”，而在于理解浏览器安全限制、公私钥机制和服务器端配合逻辑。

1. 注册 Service Worker 并监听 push 事件

Service Worker 是 Web Push 的必经入口，它在后台常驻，能接收并展示推送通知，即使网页未打开。

• 确保网站使用 HTTPS（本地开发可用 localhost）
• 在页面加载时注册 SW：
  navigator.serviceWorker.register('/sw.js')
• 在 sw.js 中监听 push 事件，并调用 self.registration.showNotification() 显示通知
• 别忘了处理 notificationclick 事件，让点击通知跳转到指定页面

2. 获取用户许可并生成 Push 订阅

必须显式请求用户授权，且只能在用户交互（如点击按钮）后调用 Notification.requestPermission()。

• 授权通过后，调用 registration.pushManager.subscribe()
• 该方法需传入 { userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array(...) }
• applicationServerKey 是 VAPID 公钥，由后端生成，前端只需 Base64 解码后传入
• 成功后返回一个 PushSubscription 对象，含 endpoint、keys.auth 和 keys.p256dh —— 这些要发给你的服务器保存

3. 后端发送推送消息（以 VAPID 方式为例）

浏览器不直接连推送服务，而是由你的服务器用 Web Push 协议（基于 HTTP/2）向 Google FCM 或 Mozilla Autopush 等终端发送加密消息。

• 后端需持有 VAPID 私钥（不能泄露），用它对请求签名
• 构造 payload（可选）、设置 TTL、加密数据（若含 body），再 POST 到 subscription.endpoint
• 推荐用成熟库，如 Node.js 的 web-push，自动处理密钥、加密、重试和错误码（如 404 表示订阅过期）
• 注意：每次用户清除站点数据或禁用通知，endpoint 就失效，需重新订阅

4. 常见坑与注意事项

很多失败不是代码错，而是忽略了浏览器策略或协议细节。

• Chrome 要求 userVisibleOnly: true；Firefox 不强制但建议保持一致
• VAPID 公钥必须是 uncompressed P-256 格式，且 base64url 编码（无 +、/、=）
• 推送内容加密是强制的（除非 payload 为空），空通知只显示标题，不触发 data 字段
• 移动端 Chrome 可能延迟几秒才送达；Safari 目前不支持标准 Web Push（仅 macOS 上部分支持）
• 不要在页面 JS 中直接调用 showNotification —— 它只能在 Service Worker 里运行

不复杂但容易忽略。重点是前后端各司其职：前端管注册和订阅，后端管加密和投递，Service Worker 管接收和展示。

以上就是《如何用 Service Worker 实现 Web Push 网页原生推送通知》的详细内容，更多关于的资料请关注golang学习网公众号！