如何实现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://...）。
本文共计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://...）。