Notifications API需HTTPS/localhost安全上下文及用户授权，调用requestPermission()获取权限后，用new Notification()创建通知，支持onclick等事件监听，并需兼容性检测与降级处理。
JavaScript 的 Notifications API 可以在用户授权后，向桌面系统发送轻量级通知，无需依赖第三方服务，适合提醒、状态更新等场景。但需注意：必须在安全上下文（HTTPS 或 localhost）中运行，且需要用户明确授权。
请求用户授权并检查权限状态
首次使用前必须调用 Notification.requestPermission() 获取用户许可。该方法返回 Promise，解析值为 "granted"、"denied" 或 "default"（未选择，默认视为 denied）。
- 建议在用户有明确意图时触发授权请求（如点击“开启通知”按钮），避免页面加载即弹窗导致被拒绝
- 可通过 Notification.permission 实时读取当前权限状态，用于控制 UI 显示逻辑
- 若返回 "denied"，浏览器通常不再允许再次请求，需引导用户手动在地址栏点击锁形图标修改设置
创建并显示通知
权限获准后，使用 new Notification(title, options) 构造通知实例。title 为必填，options 支持以下常用字段：
- body：通知正文内容
- icon：图标 URL（建议 64×64 或 128×128 PNG，相对路径需确保可访问）
- badge：小图标角标（Android 桌面兼容性有限，PC 端多数忽略）
- data：任意数据对象，可用于事件回调中传递上下文
- requireInteraction：设为 true 可阻止通知自动关闭（适合重要提醒）
注意：Chrome 等浏览器对频繁调用会限流，连续多次 new Notification 可能被静音或合并。
立即学习“Java免费学习笔记（深入）”；
监听通知生命周期事件
Notification 实例提供多个事件钩子，便于增强交互：
- onclick：用户点击通知时触发，常用于跳转页面或聚焦窗口（需配合 window.focus()）
- onshow：通知成功显示后触发，可用于统计曝光
- onerror：资源加载失败或系统拒绝显示时触发（如 icon 404）
- onclose：用户手动关闭或超时自动关闭后触发
这些事件在 Notification 实例创建后立即绑定，不可通过 addEventListener 调用。
兼容性与降级处理
Notifications API 在现代桌面浏览器（Chrome、Edge、Firefox、Safari 16.4+）中支持良好，但移动端支持较弱（iOS Safari 不支持）。使用前应做特性检测：
- 检查 "Notification" in window 和 Notification.permission !== "denied"
- 若不支持，可回退到页面内 Toast 提示、声音提醒或邮件/短信等替代方案
- 避免在非 HTTPS 环境（除 localhost 外）尝试调用，否则直接抛错
不复杂但容易忽略。
