html通知(notification api)与web push需配合使用才能实现关页后推送;notification仅负责显示,web push负责后台消息传递;permission为"default"是因用户未明确授权,须由用户主动触发且https下运行。

HTML通知(Notification API)和消息推送(Web Push)不是一回事,但必须配合使用才能实现“关页后还能收通知”。 单独用 Notification 只能在页面开着时弹窗;真要跨页面、后台、甚至浏览器关闭后发提醒,必须走 Web Push 流程——而 Notification 是最后一步“显示”的唯一标准接口。
为什么 Notification.requestPermission() 总是返回 "default"
这不是 bug,是浏览器的隐私保护机制:用户没明确点过“允许”或“禁止”,就永远卡在 "default",此时调用 new Notification() 会静默失败,控制台也无报错。
- 必须由用户**主动触发**的事件(如按钮点击)中调用
Notification.requestPermission(),不能 onload 自动执行 - 不能在 HTTP 协议下使用(必须 HTTPS 或
localhost),否则直接拒绝请求 - iOS Safari 完全不支持该 API,连
Notification.permission都是只读"denied" - 如果用户之前点过“阻止”,需手动进浏览器设置里清除站点权限,
requestPermission()不会再弹窗
pushManager.subscribe() 失败的常见原因
这是 Web Push 的核心动作,但它依赖前置条件全部满足。只要一个环节断掉,就会报 TypeError: Failed to execute 'subscribe' on 'PushManager' 或直接返回 undefined。
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
- Service Worker 必须已成功注册且处于
active状态——检查navigator.serviceWorker.ready再调用订阅 - 当前页面协议必须是 HTTPS(生产环境),
http://localhost是唯一例外 - VAPID 公钥没传给
subscribe()的applicationServerKey参数,或密钥格式不是 Uint8Array(Base64URL 解码后需转成 ArrayBuffer) - 浏览器推送服务不可用:Chrome 依赖 FCM,国内部分网络可能无法连接;Firefox 需要 autopush 正常响应
serviceWorker.onpush 收到消息但不显示通知?
收到推送事件 ≠ 自动弹窗。Service Worker 里必须显式调用 self.registration.showNotification(),而且得在 event.waitUntil() 里包裹 Promise,否则事件会被提前终止。
- 别漏掉
event.waitUntil(),否则通知可能一闪而过或根本不出现 -
showNotification()的第一个参数是 title,第二个是 options 对象;icon路径必须是 HTTPS 或相对路径(不能是 blob: 或 data:) - 如果传了
tag,同 tag 的新通知会替换旧通知;不设 tag 则每次都是独立通知 - 移动端 Chrome Android 支持
badge字段,但 iOS 完全忽略所有推送相关 API
真正容易被忽略的是:Web Push 的 endpoint 地址有效期不固定,可能几周或几个月就失效,用户重装浏览器、清缓存、换设备都会导致订阅丢失——后端必须把订阅更新当作常态处理,而不是一次写库就完事。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










