notification api 的正确使用需关注四点：权限检测用 notification.permission（值为 granted/denied/default），须用户交互后调用 requestpermission；通知管理需手动缓存并去重；service worker 中 shownotification 要用绝对 url 且包裹 waituntil；前端聚合通知须统一时间戳、排序与去重。
Notification API 浏览器支持判断不准，先查 navigator.onLine 不顶用
很多新手以为 navigator.onLine 能反映 Notification 权限状态，其实它只管网络连通性，和通知权限完全无关。真正要检测的是 Notification.permission，而且它的值只有 "granted"、"denied"、"default" 三种——其中 "default" 表示用户还没点过授权弹窗，此时调用 new Notification() 会触发弹窗，但若页面不是用户主动交互（比如 onload 里直接发），Chrome 会静默拒绝。
实操建议：
- 必须在用户点击按钮等显式交互后，再调用
Notification.requestPermission() - 检查权限时别写
if (Notification.permission === 'allowed')，这是旧写法，已失效，正确是'granted' - 服务端推送通知需搭配
Push API+Service Worker，纯前端Notification只能在当前页活跃时触发
多个通知堆叠显示但不自动关闭，用户根本看不到后续内容
浏览器默认不会自动关闭 Notification 实例，除非你手动调用 .close() 或设置 timeout（但该字段非标准，Firefox 和 Safari 不支持）。更麻烦的是，连续 new 多个 Notification，它们会按系统规则叠加（macOS 从右上角逐个上推，Windows 可能合并或覆盖），但无统一管理机制。
实操建议：
- 用一个 Map 或数组缓存所有活跃通知的实例，比如
const activeNotifications = new Map() - 每次创建前检查是否已有同 ID 的通知，有则先
.close()再新建，避免重复 - 给每个通知加
data: { id: 'order-123' }，方便后续通过event.target.data.id匹配操作 - 监听
notificationclick和notificationclose事件，及时清理缓存
Service Worker 里触发 Notification，但页面刷新后收不到
Service Worker 是独立线程，生命周期不依赖页面。但如果你在 SW 中调用 self.registration.showNotification()，通知能发出；可一旦用户关闭标签页，SW 可能被暂停（尤其 Chrome 对空闲 SW 限制严格），导致后续推送丢失。另外，showNotification() 的 data 字段不能传函数或 DOM 节点，只支持可序列化的值。
overhang.js 是一款基于 jQuery 和 jQuery UI 的用于显示通知、确认、提示的插件，它以动画的方式从顶部滑出。overhang.js 提供了众多参数，你可以自定义通知的样式，回调函数也能够满足你的更多需求。
实操建议：
- 注册 SW 后，立即检查
self.registration.active和waiting状态，避免用旧版 SW 处理新逻辑 - 在 SW 的
push事件里，优先用event.waitUntil()包裹异步操作，防止 SW 提前终止 -
showNotification()的body和icon路径必须是绝对 URL（如/img/bell.png），相对路径在 SW 环境下会 404 - 调试时打开
chrome://serviceworker-internals/查看 SW 是否激活、是否有未处理的 push 事件
聚合页面渲染通知列表，但时间排序错乱、重复渲染
前端聚合通知，本质是把来自不同渠道（API 轮询、WebSocket、Service Worker push）的数据归并到一个数组。常见问题：后端返回的时间字段格式不统一（有的带时区，有的是秒级时间戳），前端用 new Date().getTime() 比较时出错；或者 WebSocket 消息没做去重，同一通知被多次插入 DOM。
实操建议：
- 统一用毫秒级时间戳存
createdAt字段，后端返回 ISO 字符串时立刻转成new Date(str).getTime() - 渲染前对数组按
createdAt降序排列：notifications.sort((a, b) => b.createdAt - a.createdAt) - 用 Set 缓存已渲染的
id，每次新增前检查是否存在，避免重复追加 - 不要直接
innerHTML += ...，改用documentFragment批量插入，减少重排重绘
通知中心最难的不是发出来，而是让每条通知在正确时机、以正确状态、被正确的人看到。权限、生命周期、时序、去重——四个点漏掉任何一个，用户就会觉得“通知时灵时不灵”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
