JavaScript推送通知实现及ServiceWorker原理详解

从现在开始，努力学习吧！本文《JavaScript如何实现推送通知？Service Worker工作原理解析》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

JavaScript推送通知需Push API与Service Worker配合：先用户授权、再注册SW、最后订阅推送；SW通过push事件接收加密消息并调用showNotification展示，notificationclick响应点击；仅HTTPS有效，后端须按RFC 8030加密发送。

JavaScript 实现推送通知依赖浏览器的 Push API 和 Service Worker，两者必须配合使用。网页本身（主线程）不能直接发送或接收推送消息，必须通过注册并激活的 Service Worker 来中转——它像一个常驻后台的代理，即使页面关闭也能接收系统级推送。

推送通知的核心三步

要让网站发出推送通知，需完成三个关键环节：

• 用户授权：调用 Notification.requestPermission() 获取显示通知的权限（注意：必须由用户手势触发，如点击按钮）
• 注册 Service Worker：用 navigator.serviceWorker.register('sw.js') 加载并激活一个 service worker 脚本
• 订阅推送服务：在 Service Worker 内部调用 registration.pushManager.subscribe() 向浏览器推送服务（如 Chrome 对应 Firebase Cloud Messaging）申请唯一订阅信息（含 endpoint、keys）

Service Worker 怎样接收和展示推送

Service Worker 本身不主动轮询，而是由浏览器在收到推送消息时自动唤醒（即使页面未打开）。它监听两个关键事件：

• push 事件：当服务器通过 Web Push 协议向 endpoint 发送加密消息后，浏览器触发此事件。你在 sw.js 中处理它，通常解析 payload 并调用 self.registration.showNotification()
• notificationclick 事件：用户点击通知时触发，可用于聚焦已有窗口或打开新页面，例如：event.waitUntil(clients.openWindow('/news'))

注意：Service Worker 只有在 HTTPS 环境下才能注册（本地 localhost 除外），且 push 消息体必须加密（使用 VAPID 协议签名），纯文本会被浏览器拒绝。

后端推送不是发 HTTP GET

前端拿到的 subscription 对象包含 endpoint（URL）、p256dh 和 auth 字段。真正发送推送时，后端需用这些信息构造符合 RFC 8030 的加密 HTTP POST 请求：

• 请求头包含 Authorization: WebPush xxx（VAPID 签名）和 Content-Encoding: aes128gcm
• 请求体是加密后的 JSON 数据（如 {"title":"新消息"}），未加密内容会被忽略
• 推荐使用成熟库（如 Node.js 的 web-push）处理密钥生成与加密，避免手动实现出错

常见卡点与建议

开发中容易踩坑的地方：

• Service Worker 更新后不会立即生效——需手动 skipWaiting 或等待用户关闭所有标签页再刷新
• Chrome 在隐身模式下默认禁用推送；Safari 目前不支持标准 Push API（仅支持 APNs + Safari Extension 方式）
• 调试时可在 Chrome DevTools 的 Application → Service Workers 面板勾选 “Update on reload” 并点击 “Skip waiting” 强制更新
• 不要在页面 JS 中直接调用 showNotification，它只在 Service Worker 或拥有 Notification 权限的页面上下文中可用，且需用户已授权

今天关于《JavaScript推送通知实现及ServiceWorker原理详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！