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 管接收和展示。
