浏览器支持 Notification API 需同时满足：Notification 构造函数存在（typeof Notification !== 'undefined'）且 Notification.permission 可读；Safari 旧版、IE 不支持，Edge 18+、Chrome、Firefox、新版 Safari 支持。
如何判断浏览器是否支持 Notification API
不是所有浏览器都支持桌面通知，得先检查 Notification 构造函数是否存在，且用户没禁用权限。Safari（旧版）、IE 完全不支持，Edge 18+ 和 Chrome/Firefox/新版 Safari 均支持。
-
typeof Notification !== 'undefined'是基础判断，但不够——还要看Notification.permission是否可读 - 即使支持，
Notification.permission可能是'denied'（用户点过“禁止”），此时调用new Notification()会静默失败，不会弹窗也不会报错 - 如果值为
'default'，说明还没请求过权限，首次调用Notification.requestPermission()才会触发浏览器弹窗
怎样正确请求并获取用户通知权限
权限请求必须由用户主动触发（比如点击按钮），不能在页面加载时自动执行，否则 Chrome 会直接拒绝（返回 'denied'）。
document.getElementById('notify-btn').addEventListener('click', async () => {
if (Notification.permission === 'granted') {
new Notification('Hello!', { body: '这是桌面通知' });
} else if (Notification.permission === 'default') {
const permission = await Notification.requestPermission();
if (permission === 'granted') {
new Notification('Hello!', { body: '这是桌面通知' });
}
}
});
- 必须用
await或.then()处理requestPermission()的 Promise，它不会同步返回结果 - 不要在
DOMContentLoaded或window.onload里调用requestPermission()，会被浏览器拦截 - Firefox 在某些版本中会把
'default'错误识别为'denied'，建议统一用requestPermission()后再判断
创建通知时哪些参数实际生效、哪些被忽略
Notification 构造函数第二个参数是 options 对象，但并非所有字段都被桌面端渲染支持：
-
body：显示在通知正文，几乎所有浏览器都支持 -
icon：必须是 HTTPS 路径或 data URL，HTTP 协议下 Chrome 会静默丢弃图标 -
badge：仅 Android PWA 或部分桌面系统支持，Windows/macOS 桌面通知通常不显示 -
silent：设为true会禁用声音和震动，但不影响弹窗本身；Chrome 会忽略该字段，强制播放默认音效（除非用户系统级关闭） -
requireInteraction：设为true可阻止通知自动消失（需手动关闭），但 Firefox 目前不支持
示例中推荐的最小可用配置：
立即学习“前端免费学习笔记（深入）”；
new Notification('标题', {
body: '内容文本',
icon: '/assets/icon-192.png'
});
为什么通知点了没反应、或者重复弹出多次
常见问题往往出在事件绑定或作用域上，而不是 API 本身。
- 如果按钮绑定了多次 click 事件（比如在 SPA 中组件反复挂载未清理），每次点击都会触发新通知——检查是否重复执行了
addEventListener - 通知对象本身没有内置点击回调，要监听用户点击，得用
notification.onclick，且必须在new Notification()后立刻设置 - 在 service worker 环境中发送通知（如后台消息），需用
self.registration.showNotification()，和页面内Notification不是同一套机制，混淆会导致无响应 - Chrome 有时会把同标题 + 同 origin 的通知合并（尤其快速连续触发时），看起来像“没弹”，其实是被覆盖了——加个时间戳到
body或tag字段可区分
权限和触发时机是最大雷区，其他都是细节。只要用户点过允许、且调用发生在用户手势之后，基本就能看到通知。
