Notifications API 实现系统通知,需用户授权(requestPermission),仅权限为"granted"时可用new Notification()创建,支持图标、正文等配置及点击/关闭事件监听,需检测兼容性并降级处理。

JavaScript 中 BOM 本身不提供直接调用系统通知(如桌面弹窗)的接口,真正实现系统级消息提示的是 Notifications API,它属于浏览器提供的 Web API,不是 BOM 的一部分(BOM 主要指 window、location、navigator、screen、history 等对象),但通常通过 window 对象调用,所以常被误认为是 BOM 功能。
需要用户授权才能发送通知
浏览器出于安全和体验考虑,必须获得用户明确授权后才能显示系统通知。未获许可前调用会静默失败或触发权限请求弹窗。
- 首次调用
Notification.requestPermission()会弹出浏览器原生权限提示(如“是否允许此网站发送通知?”) - 返回值为
"granted"、"denied"或"default"(表示尚未选择,等同于拒绝) - 建议在用户有明确操作意图时(例如点击“开启提醒”按钮)再发起授权请求,避免自动触发导致被拒绝
检查权限并创建通知
只有权限为 "granted" 时才能成功创建通知。创建时需传入标题,并可选配置图标、正文、标签、声音等。
分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
- 基本写法:
new Notification("标题", { body: "这是正文内容" }) - 图标路径需为 HTTPS 或同源资源,否则可能被忽略;推荐使用 192×192 或 512×512 PNG
- 部分浏览器(如 Safari)对通知行为有限制,例如仅在标签页激活时播放声音,或不支持自定义图标
监听通知交互事件
可以监听用户点击、关闭、展示完成等事件,用于跳转页面或更新状态。
立即学习“Java免费学习笔记(深入)”;
-
notification.onclick = () => window.focus();可让浏览器窗口获得焦点 notification.onclose = () => console.log("用户关闭了通知");- 注意:点击通知后若页面被关闭或处于后台,需结合 Service Worker 实现更可靠的点击响应(尤其在 PWA 场景中)
兼容性与降级处理
Notifications API 在现代浏览器中支持良好(Chrome、Firefox、Edge ≥79、Safari ≥16.4),但旧版或部分移动端浏览器可能不支持。
- 使用前先检测:
if ("Notification" in window) - 权限状态可通过
Notification.permission获取,避免重复申请 - 若不支持或被拒绝,建议降级为页面内 Toast 提示或状态栏文字提醒,保证基础功能可用

















