javascript通知api如何使用_怎样发送桌面浏览器通知【教程】

浏览器支持 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 上，而不是语法错误。