HTML实现Push通知全攻略

本文系统梳理了HTML中实现Web Push通知的关键技术要点与常见陷阱，强调Service Worker是整个推送链路不可或缺的核心枢纽——从用户授权、前端订阅、VAPID密钥配置、后端推送调用，到Service Worker中手动触发通知显示，每一步都需严格遵循规范；文章直击开发中高频踩坑点，如HTTPS缺失、SW注册失败、applicationServerKey格式错误、push事件中未使用event.waitUntil、重复tag导致通知被覆盖等，并给出可落地的调试策略，帮助开发者绕过“看似正常却收不到通知”的隐性障碍，真正打通浏览器端实时消息触达的最后一环。

浏览器原生 Push 通知必须依赖 Service Worker，没有它就根本发不出推送——不是权限问题，是技术上不可行。

为什么调用 Notification.requestPermission() 没反应？

常见于未启用 HTTPS 或未注册 Service Worker 的页面。HTTP 协议下 Chrome/Firefox 会直接禁用 Notification API；即使本地 localhost 可用，也必须确保 Service Worker 已成功注册并处于 activated 状态。

• 检查控制台是否报错 Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html')——说明路径返回了 HTML 而非 JS，确认 navigator.serviceWorker.register('/sw.js') 中的路径真实存在且响应头为 Content-Type: application/javascript
• Notification.requestPermission() 必须由用户手势触发（如点击按钮），不能在页面加载时自动调用，否则多数浏览器会静默拒绝
• 若已授权却仍无弹窗，检查系统级通知设置（macOS 的“通知中心”、Windows 的“系统 > 通知和操作”）是否禁用了该域名

Push API 发送通知前必须完成哪三步？

不是调个 showNotification() 就完事。整个链路是：前端订阅 → 后端保存 subscription → 后端调用 Push 服务（如 WebPush 协议）→ 浏览器触发 push 事件 → Service Worker 手动调用 self.registration.showNotification()。

• 前端获取 subscription 对象需调用 registration.pushManager.subscribe()，注意它返回的是 Promise，且需传入 {userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array(...)}
• applicationServerKey 是 VAPID 公钥，必须是 URL-safe Base64 编码的 88 字符字符串（对应 65 字节），少一位或多一位都会导致 InvalidStateError
• 后端发送 Push 请求时，Authorization 头必须按 VAPID 规范构造，包括 vapid t=..., k=...，且签名有效期建议 ≤24 小时，过期会返回 401 Unauthorized

self.registration.showNotification() 显示异常或不出现？

这是最常被忽略的一环：Push 消息到达后，浏览器不会自动弹窗，必须在 Service Worker 的 push 事件监听器里显式调用它，且不能在异步回调（如 fetch 完成后）里调用——因为事件上下文可能已销毁。

• 务必在 event.waitUntil() 内包裹整个逻辑，防止 SW 在通知显示前被终止：event.waitUntil(self.registration.showNotification('标题', {body: '内容'}))
• 避免在 showNotification() 中传入非法字段，如 icon 路径 404、image 不是 HTTPS 地址、data 是函数或 undefined——这些会导致静默失败
• Chrome 120+ 对重复通知做了限制：同一 origin 下 2 秒内多次调用 showNotification() 且 tag 相同，新通知会替换旧的；若想强制显示，需每次传不同 tag 或清空 tag

真正卡住人的往往不是代码写法，而是 VAPID 密钥生成方式不对、SW 缓存导致旧版本没更新、或者后端推送时没正确处理 WebPush 库的 promise rejection（比如 subscription 过期后还硬推，会触发 410 Gone 但程序没捕获）。调试时优先看 Network 面板里 push 请求的响应状态码，而不是只盯着控制台有没有 JS 错误。

好了，本文到此结束，带大家了解了《HTML实现Push通知全攻略》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！