notification.close() 不触发 close 事件，仅用户手动关闭或超时自动关闭时才触发；需主动关闭并执行逻辑时应 dispatchevent(new event('close'))；权限未授予时通知创建失败，事件监听无效；safari 等浏览器不支持 close 事件，需降级处理。
Notification.close() 不会触发回调，得靠 eventListener
浏览器原生 Notification API 没有提供类似 onclose 的回调参数，调用 notification.close() 后不会自动通知你“它关了”。真正能捕获关闭动作的，只有 close 事件——但注意：这个事件**只在用户手动点击关闭按钮或系统自动过期时触发**，notification.close() 主动调用**默认不触发** close 事件（Chrome、Firefox 均如此）。
所以关键不是“怎么注册回调”，而是“怎么让主动关闭也走事件流”：
- 给
Notification实例绑定addEventListener('close', handler) - 若需在代码中主动关闭并同步执行逻辑，改用
notification.dispatchEvent(new Event('close'))替代notification.close()（前提是已监听该事件） - 不要依赖
notification.onclose = handler—— 这个属性已被废弃且多数浏览器不支持
权限未 granted 时调用 Notification 会静默失败
很多开发者在调试时发现 close 事件没反应，结果是根本没成功创建通知。浏览器要求 Notification.permission === 'granted' 才允许显示和监听事件。一旦权限被拒绝或询问中，new Notification(...) 会抛出错误或直接返回空对象，后续所有事件绑定都无效。
实操建议：
- 每次创建前加判断：
if (Notification.permission !== 'granted') { console.warn('通知权限未开启'); return; } - 权限请求必须由用户手势触发（如 click），不能在页面加载时自动调用
Notification.requestPermission() - 监听
permissionchange事件可响应权限变更：Notification.addEventListener('permissionchange', () => {...})
多个通知共存时，close 事件只作用于对应实例
每个 Notification 是独立对象，它们的 close 事件互不干扰。但容易踩的坑是：用同一个变量反复赋值新通知，导致旧通知引用丢失，无法再绑定事件或手动关闭。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
比如这样写就危险：
let notif = new Notification('A');
notif.addEventListener('close', () => console.log('A closed'));
notif = new Notification('B'); // A 的引用丢了，close 事件永远不触发
正确做法：
- 为每个通知单独保存引用（如用
Map或数组管理） - 需要统一关闭时，遍历调用
.close()，但记得：这仍不会触发它们的close事件，除非你手动 dispatch - 如果只是想“关掉所有”，更稳妥的是维护一个列表，在关闭前先 dispatch
close事件再调用.close()
Safari 和旧版 Edge 完全不支持 close 事件
截至 Safari 16.6 和旧版 Edge（EdgeHTML），Notification 对象压根不派发 close 事件。这意味着你在这些浏览器里监听不到任何关闭信号——无论是用户点叉还是超时消失。
应对策略很实际：
- 用
setTimeout模拟超时关闭，并在定时器结束时执行你的“关闭后逻辑”（适用于有明确 duration 的通知） - 对 Safari 用户，可降级使用自定义 DOM 弹窗（
div+ CSS 动画），完全可控生命周期 - 检测兼容性：
'onclose' in Notification.prototype或typeof Notification.prototype.addEventListener === 'function'并不能保证close事件存在，最可靠的是实际创建一个测试通知并监听，看是否触发
真正难处理的不是怎么写回调，而是接受「浏览器通知的生命周期本就不受前端完全掌控」——它可能被系统拦截、被用户禁用、被后台杀死，甚至在某些设备上连 permission 请求都不弹。把关键逻辑放在服务端或主界面交互里，比死磕 close 事件更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
