JavaScript通知API入门指南

你在学习文章相关的知识吗？本文《JavaScript通知API使用教程》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

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 四个事件钩子，但要注意：这些事件只在通知可见期间有效，页面关闭后无法响应。

• 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 而失败。别绕过用户交互去“自动”触发，也别假设通知一定能被看到。

好了，本文到此结束，带大家了解了《JavaScript通知API入门指南》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！