浏览器支持 Notification API 需满足三条件:1. typeof Notification !== 'undefined';2. 在安全上下文(https:// 或 localhost)中;3. 由用户手势触发 requestPermission() 并获 granted 权限。

如何判断浏览器是否支持 Notification API
不是所有浏览器都支持桌面通知,必须先检查 Notification 是否存在且可请求权限。老版本 Safari、部分国产浏览器内核(如早期 QQ 浏览器)直接不暴露该接口。
-
typeof Notification === 'undefined'为true→ 完全不支持,跳过后续逻辑 - 即使存在,也需调用
Notification.requestPermission()获取用户授权;返回'denied'表示用户已拒绝,之后调用new Notification()会静默失败,不会报错但也不显示 - Chrome 91+ 和 Edge 91+ 对非安全上下文(
http://)彻底禁用通知 API,仅https://或localhost可用
怎样正确请求通知权限并处理响应
权限请求不能自动触发,必须由用户手势(如 click、tap)驱动,否则 Chrome 会直接拒绝并返回 'denied'。不能在页面加载时、定时器里或 AJAX 回调中调用 requestPermission()。
- 推荐绑定在按钮点击事件上:
button.addEventListener('click', () => Notification.requestPermission().then(...)) - 响应是 Promise,
then中拿到的值是'granted'、'denied'或'default'(用户未选择,下次仍会弹窗) -
'default'状态下再次调用requestPermission()仍会弹窗;但若用户点了“不再询问”,就永久变成'denied',无法恢复,只能引导用户手动到浏览器设置页开启
创建和配置 Notification 实例的关键参数
new Notification(title, options) 的 title 是必需字符串,options 是可选对象。常见误用是把图标路径写成相对路径却忽略当前页面 base URL 影响,导致图标 404。
-
icon:建议使用绝对 HTTPS 路径,如'https://example.com/icon-192.png';本地开发可用'/icon.png',但确保该路径能被浏览器直接访问(非 webpack asset 模块路径) -
body:通知正文,纯文本;不支持 HTML 标签或换行符(\n会被忽略,如需多行请用空格分隔) -
tag:唯一标识符,相同tag的新通知会替换旧通知(避免重复刷屏),不设则每次都是独立通知 -
data:任意 JS 值,仅用于事件回调中读取,不影响显示;比如存个 ID 供点击后跳转
监听通知事件与常见失效原因
通知本身不阻塞主线程,但点击、关闭等行为需靠事件监听。最容易被忽略的是:页面卸载(如关标签页)后,notification.onclick 无法触发,除非配合 Service Worker 使用后台消息机制。
立即学习“Java免费学习笔记(深入)”;
-
notification.onclick = () => window.focus()是基础操作,但若目标页面已被关闭或处于不同源,则window.focus()无效 -
notification.onshow和onclose可用于埋点统计,但注意:Safari 不支持onshow,且所有浏览器都不保证这些回调一定执行(如系统资源紧张时可能被丢弃) - 如果通知没出现,先检查控制台是否有
Failed to execute 'show' on 'Notification': Permission denied—— 这说明权限没拿到,不是代码问题
http 协议或图标 404 上,而不是语法错误。











