Notification API 需用户手势触发权限请求，仅 permission 为 "granted" 时可创建通知；需监听 onclick 等事件并手动 close() 管理实例，移动端 Safari 支持极弱。
网页通知功能不是所有浏览器都默认允许的，Notification API 必须由用户主动触发（比如点击按钮），且需要用户明确授权，否则调用会静默失败或抛出 DOMException: Permission denied。
如何检查并请求通知权限
不能直接调用 new Notification() 就弹窗，必须先确认权限状态。用户首次访问时权限默认是 default，此时需调用 Notification.requestPermission() 触发浏览器权限提示。
-
Notification.permission返回"granted"、"denied"或"default" - 只有在
"granted"时才能创建通知；"default"表示尚未请求，可调用requestPermission()；"denied"则无法恢复，需引导用户手动开启（地址栏锁图标 → 网站设置） - 注意：
requestPermission()必须在用户手势（如click、touchend）中调用，否则现代浏览器会拒绝并返回Promise拒绝状态
创建一个基础通知
权限就绪后，用 new Notification(title, options) 创建通知。title 是必填字符串，options 是可选对象，常见字段包括 body、icon、badge、data 等。
-
icon推荐使用绝对路径或 base64，相对路径可能因页面路由变化而 404 -
badge在桌面通知栏小图标旁显示徽章（如未读数），仅部分系统支持 -
data可传任意 JS 值，用于事件回调中识别上下文（比如通知对应哪条消息 ID） - 通知一旦创建即异步显示，不阻塞主线程，也不保证立即渲染（尤其在后台标签页中）
if (Notification.permission === "granted") {
new Notification("新消息", {
body: "你有一条未读通知",
icon: "/img/icon-192.png",
data: { id: 123 }
});
}
监听通知生命周期事件
通知实例提供 onclick、onshow、onerror、onclose 四个事件钩子，但要注意：这些事件只在通知可见期间有效，页面关闭后无法响应。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
立即学习“Java免费学习笔记（深入）”；
-
onclick：用户点击通知时触发，常用于跳转页面或聚焦窗口 —— 记得加window.focus()和self.focus()防止被忽略 -
onshow：通知成功显示后触发（非 100% 可靠，某些浏览器不支持） -
onerror：资源加载失败（如 icon 404）或系统限制导致通知无法显示时触发 -
onclose：用户手动关闭或超时自动关闭后触发；但**不会**在用户点击后自动触发，必须显式调用notification.close()
关闭通知与内存管理
通知对象不会自动释放，尤其在用户长时间不操作时可能堆积。虽然浏览器通常会在一定时间后自动回收，但主动管理更稳妥。
- 每个
Notification实例都有.close()方法，可用于手动关闭 - 若需批量控制，建议用 Map 或数组缓存通知实例，并在页面卸载前遍历调用
.close()（注意：beforeunload中调用可能被忽略） - 避免在
setInterval或轮询中无节制创建通知 —— 多个通知叠加可能被系统折叠或拦截，Chrome 对同一来源短时间内的通知有频率限制 - 移动端 Safari 对
Notification支持极弱（iOS 16.4+ 才开始有限支持），不要依赖它做关键链路
权限模型和事件时机是最大陷阱：你以为调用了就一定弹出来，其实可能卡在权限流程里；你以为点了通知就能跳转，结果因为页面没 focus 而失败。别绕过用户交互去“自动”触发，也别假设通知一定能被看到。
