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 协议签名），纯文本会被浏览器拒绝。
立即学习“Java免费学习笔记（深入）”；
后端推送不是发 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 权限的页面上下文中可用，且需用户已授权
