Notification API 必须先调用 requestPermission() 获取用户授权，且只能在用户主动触发（如按钮点击）和安全上下文（HTTPS/localhost）下执行；title 为必填非空字符串，正文、图标等需通过 options 的 body、icon（须绝对路径）等字段设置；tag 可控制通知去重与更新，但 Firefox 不支持更新；权限拒绝后无法再次弹窗申请，需引导用户手动开启。
Notification API 要先请求权限才能用
浏览器默认禁止网页主动弹通知，不调 Notification.requestPermission() 就直接 new Notification，会静默失败，控制台可能连错误都不报。必须用户主动触发（比如点按钮）后调用，且只能在安全上下文（https 或 localhost）运行。
- 不能在页面加载时自动请求：会直接被浏览器拒掉，返回
"denied" - 推荐放在按钮点击事件里：
button.addEventListener('click', () => Notification.requestPermission().then(...)) - 检查当前状态用
Notification.permission，值可能是"granted"、"denied"或"default"（未询问过）
new Notification() 的 title 和 options 都有坑
第一个参数是 title（必须是非空字符串），不是消息正文；正文、图标、重定向链接等全靠第二个参数 options 对象传。Chrome 和 Edge 会忽略 icon 的相对路径，必须用绝对 URL（如 /img/bell.png 或 https://...）。
-
body字段才是实际显示的文本内容，支持换行符\n，但部分系统会截断（macOS 限制较严） -
icon图标建议尺寸 192×192 或 512×512，太小会被模糊拉伸 -
badge（小角标）在 Android Chrome 上有效，桌面端基本无效 -
requireInteraction: true可防止通知自动关闭，但会增加用户打扰感，慎用
new Notification('新邮件', {
body: '你有 3 封未读邮件\n点击查看',
icon: '/assets/notify-icon.png',
tag: 'mail-202405'
});
重复通知会被折叠，用 tag 区分不同事件
如果连续触发多个通知且 tag 相同，浏览器只保留最新一个（旧的被替换）。这在轮询消息场景下很关键——比如每 30 秒查一次新消息，不设 tag 或用固定值，用户只会看到最后一条。
- 动态 tag 更实用：比如
mail-${Date.now()}或基于消息 ID，确保不覆盖 - 想更新已有通知？用相同
tag再发一次即可，旧通知自动刷新内容 - 注意：Firefox 不支持
tag更新，只支持 Chrome/Edge/Opera 等 Blink 内核
关闭通知或点击后要手动清理资源
Notification 实例本身不会自动销毁，也不提供 close() 的可靠回调。用户点击通知后，若需跳转页面，得监听 onclick 事件并显式 window.focus()；若通知超时消失，onclose 在某些浏览器中可能不触发。
- 不要依赖
onclose做关键清理（比如取消定时器），它不稳定 - 点击跳转前务必加
event.preventDefault()防止默认行为干扰 - 大量通知场景下，建议用 Map 缓存实例并按 tag 管理，避免内存泄漏
const n = new Notification('提醒', { tag: 'alert-1' });
n.onclick = () => {
window.focus();
location.href = '/inbox';
};
权限一旦被用户拒绝，下次再调 requestPermission() 也不会弹窗，只能引导用户去浏览器设置里手动开启。这点容易被忽略，但实际线上问题最多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
