Web Push 通知依赖 Service Worker 和 JavaScript 的 PushManager，HTML 仅负责加载脚本和触发用户授权；必须通过 HTTPS（localhost 除外），且 Notification.requestPermission() 需用户手势触发；订阅需正确配置 VAPID 密钥、加密推送 payload，并确保 SW 激活且 scope 正确。
Web Push 通知不是 HTML 能直接触发的
HTML 文件本身没有能力发送 Web Push 通知——它连网络请求都发不出去，更别说和推送服务、浏览器后台进程打交道。真正起作用的是 JavaScript 的 PushManager 和 service worker，HTML 只负责加载脚本、触发用户授权入口。
常见错误现象：Notification.requestPermission() 没反应、点击按钮后控制台报错 Failed to execute 'showNotification' on 'ServiceWorkerRegistration'、页面刷新后推送失效。
- 必须通过 HTTPS（localhost 除外），HTTP 页面下
service worker注册失败，PushManager直接不可用 -
Notification.requestPermission()必须由用户手势（如click）触发，不能在页面加载时自动调用 - Chrome / Edge 对非主域或子路径下的
service worker注册很敏感，注册路径必须是根路径或显式指定scope
service worker 是 Web Push 的必经中转站
浏览器不允许网页 JS 直接向推送服务器发请求，所有推送消息都由 service worker 接收并决定是否显示通知。没它，PushManager.subscribe() 会直接抛 InvalidStateError。
使用场景：用户点击“开启通知”后，先注册 SW，再调用 registration.pushManager.subscribe() 获取 endpoint；服务端把消息 POST 到这个 endpoint，浏览器唤醒对应 SW 执行 self.registration.showNotification()。
立即学习“前端免费学习笔记（深入）”；
- 注册 SW 必须用
navigator.serviceWorker.register('/sw.js')，路径要能被正确 fetch 到（404 就静默失败） -
sw.js文件里至少得监听push事件，并调用event.waitUntil()包裹showNotification() - Chrome 120+ 对未激活的 SW 有更严格的唤醒限制，建议在
install事件里加skipWaiting()，activate里加clients.claim()
订阅流程里最容易漏掉的三步
很多人卡在“点了授权却收不到推送”，问题往往出在订阅链路断了一环：前端没拿到 endpoint、后端没正确加密、VAPID key 配置不一致。
- 调用
pushManager.subscribe()前，必须传入userVisibleOnly: true和applicationServerKey（Base64 URL 编码后的公钥） - VAPID 公钥必须和服务端签名用的私钥配对，且前端传给
subscribe()的是公钥，后端签名时用的是私钥 - 后端发推送时，
Authorizationheader 必须是WebPush xxx格式，且 payload 要用web-push库（Node）或pywebpush（Python）加密，裸 POST JSON 会返回 400 或 401
调试时优先看这三处控制台信息
别一上来就查服务端日志。90% 的问题能在前端控制台定位：
- Application → Service Workers：确认 SW 状态是 “Activated and is running”，不是 “Waiting” 或 “Redundant”
- Console：搜索
PushManager或Failed to register a ServiceWorker，注意跨域或 MIME 类型错误（sw.js返回 text/html 就会失败） - Network：过滤
push，看subscribe()请求是否返回 200，response body 是否含endpoint字段；再看后端推送请求的 status 和 response headers（尤其WWW-Authenticate）
复杂点在于：整个链路涉及浏览器、SW、HTTPS、VAPID、加密、推送服务（如 Firebase Cloud Messaging 或 webpush-go），任意一环密钥/路径/权限不对，都会静默失败。最常被忽略的是 service worker 的 scope 权限和 VAPID 公私钥的 Base64 URL 编码格式——少一个 = 或换行符，就收不到通知。
