HTML通知推送怎么做_html Notification通知API使用【快速上手】

浏览器Notification API需HTTPS+用户授权才可用；权限状态为"granted"方可发送通知；须绑定用户交互事件调用requestPermission()；点击事件需即时绑定且页面需可见才能响应。

浏览器原生 Notification API 能直接唤起系统级通知，但必须满足两个硬性条件：HTTPS 环境 + 用户主动授权。本地 file:// 协议或 HTTP 页面（非 localhost）下调用会静默失败，连错误都不会抛。

怎么判断 Notification 是否可用并请求权限

不能直接调用 new Notification()，得先检查接口是否存在，并确认权限状态。用户首次访问时权限默认是 "default"，此时必须显式调用 Notification.requestPermission() 才能获得授权。

• Notification.permission 返回 "granted"、"denied" 或 "default" —— 只有 "granted" 才能发通知
• Notification.requestPermission() 是异步操作，必须用 await 或 .then() 拿到结果，不能靠轮询或延时猜测
• Chrome 91+ 对自动触发权限请求更敏感，若在页面加载完成前（比如 DOMContentLoaded 阶段）就调用，可能被拦截；建议绑定到用户点击等明确交互事件上

button.addEventListener('click', async () => {  if (Notification.permission === 'granted') {    new Notification('你好', { body: '这是通知内容' });  } else if (Notification.permission === 'default') {    const result = await Notification.requestPermission();    if (result === 'granted') {      new Notification('你好', { body: '这是通知内容' });    }  }});

Notification 构造函数的参数和常见坑点

new Notification(title, options) 的 title 是必填字符串，options 中只有 body 最常用，但其他字段会影响行为和兼容性。

• icon 接受绝对 URL（推荐），相对路径在某些浏览器中可能解析失败；不支持本地 file:// 图标
• badge 仅在部分 Android WebView 和 PWA 中生效，桌面 Chrome 忽略它
• requireInteraction: true 可防止通知自动关闭，但会占用系统托盘，iOS 完全不支持
• Chrome 从 98 版本起禁止在后台页（如 service worker 外的非激活标签页）中显示通知，除非使用 serviceWorker + push 事件

为什么点击通知没反应？事件监听要写对地方

notification.onclick 回调只在通知被点击时触发，但它运行在当前页面上下文（不是 service worker），所以页面必须处于可见/未被冻结状态才能执行。如果用户切换到其他标签页再点通知，回调可能被跳过。

立即学习“前端免费学习笔记（深入）”；

• 必须在 new Notification() 后立刻绑定，不能延迟赋值：const n = new Notification(...); n.onclick = () => {...}
• 不要依赖 this 指向，onclick 中的 this 是 Notification 实例，不是 window
• 想在页面不可见时响应点击（比如唤醒页面），需配合 clients.openWindow() 在 service worker 中处理，纯前端无法做到

const n = new Notification('提醒', { body: '请查看消息' });n.onclick = () => {  window.focus(); // 尝试聚焦当前页  // 注意：若页面被浏览器冻结（如长时间后台），这行可能无效};

真正稳定的推送必须走 serviceWorker + Push API，前端 Notification 只适合用户还在当前页面交互时的轻量提示。权限一旦被用户拒绝，JS 无法再次触发权限弹窗，只能引导用户手动在浏览器设置里开启。