Notification API 仅支持前端主动显示通知，不支持服务端推送；需结合 Service Worker 与 Push API 实现 Web Push 离线推送，且须处理权限生命周期、浏览器兼容性及降级策略。
HTML 的 Notification API 本身不支持“服务端主动推送”，它只负责在获得授权后，由前端 JavaScript 主动创建并显示通知。所谓“不支持消息推送”，其实是混淆了「前端展示通知」和「后端下发消息」两个环节——前者是 Notification 干的，后者得靠 Service Worker + Push API 配合 Web Push 协议来实现。
Notification.requestPermission() 被静默拒绝或不弹窗
常见现象：调用 Notification.requestPermission() 后没弹框，Promise 直接 resolve 成 'denied' 或卡在 'default'；或者只在第一次打开页面时有效，刷新后失效。
- 必须在用户手势触发的上下文中调用（比如按钮
click、submit），不能放在DOMContentLoaded或自动定时器里 - 页面必须运行在 HTTPS 或
localhost环境下，HTTP 域名下会直接被浏览器禁用 - 用户之前点过“阻止”或“不再询问”，权限就永久变成
'denied'，此时无法再次请求，只能引导用户手动到浏览器设置里重置（Chrome 地址栏左侧锁形图标 → “网站设置” → “通知”） - 某些浏览器（如 Safari on iOS）根本不支持该 API，检测时
'Notification' in window就为false
new Notification() 报错 “Failed to construct 'Notification'”
典型错误信息：Failed to construct 'Notification': Illegal constructor. Use ServiceWorkerRegistration.showNotification() instead.
- 这个错误只出现在 Service Worker 线程中——你不能在 SW 里直接用
new Notification()，必须改用self.registration.showNotification() - 主页面 JS 中能用
new Notification()，但前提是权限已为'granted'，且不在私密模式（Safari 私密窗口默认禁用） -
icon路径必须是绝对 URL 或同源相对路径，跨域图标会加载失败导致通知创建失败（但不抛异常，只是无图标） - 部分安卓 WebView 或旧版 Chrome 对
badge、data等字段敏感，建议只传title和body保底
想让页面关闭后还能收通知？必须上 Web Push
单纯的 Notification API 在标签页关闭后完全失效。要实现“离线也能推”，唯一标准方案是 Web Push：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 前端注册
Service Worker（如navigator.serviceWorker.register('/sw.js')） - 通过
pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlB64ToUint8Array(vapidPublicKey) })获取订阅对象 - 把订阅里的
endpoint、keys.p256dh、keys.auth发给后端存储 - 后端用
web-push库 + VAPID 私钥向 endpoint 发送加密 POST 请求 - Service Worker 收到
push事件后，调用self.registration.showNotification()显示通知
注意：Web Push 在 Safari（包括 iOS）上仍不支持，Firefox/Chrome/Edge 桌面端和 Android Chrome 是主力支持平台。
兼容性兜底：当 Notification 不可用时怎么办
别让用户彻底失联。降级策略要具体可行：
- 检测
'Notification' in window && Notification.permission === 'granted'失败时，启用页面内Toast提示（用div+ CSS 动画实现，无需权限） - 监听
window.onblur/window.onfocus，页面失焦时启动标题闪烁（如document.title = '【新】' + originalTitle），聚焦后恢复 - 对 iOS 用户，可结合
Badging API（navigator.setAppBadge(1)）尝试角标提醒（仅 Chromium 和新版 Safari 支持，需单独检测） - 所有降级行为都应避免高频轮询或阻塞主线程，闪烁间隔建议 ≥ 800ms，Toast 自动关闭时间设为 3–5 秒
真正的难点不在 API 调用，而在于权限生命周期管理、订阅状态同步、以及不同浏览器对 push endpoint 过期策略的差异——这些细节不处理好，用户可能某天突然就收不到通知了，还查不出原因。
