如何实现HTML桌面弹窗通知功能？

本文共计902个文字，预计阅读时间需要4分钟。

浏览器默认禁止网页主动弹出通知，直接调用`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() 也不会弹窗，只能引导用户去浏览器设置里手动开启。这点容易被忽略，但实际线上问题最多。