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：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 前端注册 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 过期策略的差异——这些细节不处理好，用户可能某天突然就收不到通知了，还查不出原因。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！