Notification API 需用户手势触发权限请求,仅 permission 为 "granted" 时可创建通知;需监听 onclick 等事件并手动 close() 管理实例,移动端 Safari 支持极弱。

网页通知功能不是所有浏览器都默认允许的,Notification API 必须由用户主动触发(比如点击按钮),且需要用户明确授权,否则调用会静默失败或抛出 DOMException: Permission denied。
如何检查并请求通知权限
不能直接调用 new Notification() 就弹窗,必须先确认权限状态。用户首次访问时权限默认是 default,此时需调用 Notification.requestPermission() 触发浏览器权限提示。
-
Notification.permission返回"granted"、"denied"或"default" - 只有在
"granted"时才能创建通知;"default"表示尚未请求,可调用requestPermission();"denied"则无法恢复,需引导用户手动开启(地址栏锁图标 → 网站设置) - 注意:
requestPermission()必须在用户手势(如click、touchend)中调用,否则现代浏览器会拒绝并返回Promise拒绝状态
创建一个基础通知
权限就绪后,用 new Notification(title, options) 创建通知。title 是必填字符串,options 是可选对象,常见字段包括 body、icon、badge、data 等。
-
icon推荐使用绝对路径或 base64,相对路径可能因页面路由变化而 404 -
badge在桌面通知栏小图标旁显示徽章(如未读数),仅部分系统支持 -
data可传任意 JS 值,用于事件回调中识别上下文(比如通知对应哪条消息 ID) - 通知一旦创建即异步显示,不阻塞主线程,也不保证立即渲染(尤其在后台标签页中)
if (Notification.permission === "granted") {
new Notification("新消息", {
body: "你有一条未读通知",
icon: "/img/icon-192.png",
data: { id: 123 }
});
}
监听通知生命周期事件
通知实例提供 onclick、onshow、onerror、onclose 四个事件钩子,但要注意:这些事件只在通知可见期间有效,页面关闭后无法响应。
一套面向小企业用户的企业网站程序!功能简单,操作简单。实现了小企业网站的很多实用的功能,如文章新闻模块、图片展示、产品列表以及小型的下载功能,还同时增加了邮件订阅等相应模块。公告,友情链接等这些通用功能本程序也同样都集成了!同时本程序引入了模块功能,只要在系统默认模板上创建模块,可以在任何一个语言环境(或任意风格)的适当位置进行使用!
立即学习“Java免费学习笔记(深入)”;
-
onclick:用户点击通知时触发,常用于跳转页面或聚焦窗口 —— 记得加window.focus()和self.focus()防止被忽略 -
onshow:通知成功显示后触发(非 100% 可靠,某些浏览器不支持) -
onerror:资源加载失败(如 icon 404)或系统限制导致通知无法显示时触发 -
onclose:用户手动关闭或超时自动关闭后触发;但**不会**在用户点击后自动触发,必须显式调用notification.close()
关闭通知与内存管理
通知对象不会自动释放,尤其在用户长时间不操作时可能堆积。虽然浏览器通常会在一定时间后自动回收,但主动管理更稳妥。
- 每个
Notification实例都有.close()方法,可用于手动关闭 - 若需批量控制,建议用 Map 或数组缓存通知实例,并在页面卸载前遍历调用
.close()(注意:beforeunload中调用可能被忽略) - 避免在
setInterval或轮询中无节制创建通知 —— 多个通知叠加可能被系统折叠或拦截,Chrome 对同一来源短时间内的通知有频率限制 - 移动端 Safari 对
Notification支持极弱(iOS 16.4+ 才开始有限支持),不要依赖它做关键链路
权限模型和事件时机是最大陷阱:你以为调用了就一定弹出来,其实可能卡在权限流程里;你以为点了通知就能跳转,结果因为页面没 focus 而失败。别绕过用户交互去“自动”触发,也别假设通知一定能被看到。










