notification api 在 index.html 中未弹出提示，主要是因未满足安全上下文（https/localhost）和用户手势触发要求，且未先调用 requestpermission() 获取授权；正确做法是绑定按钮 click 事件，先检查权限状态再请求并创建通知。
Notification API 在 index.html 里为什么没弹出提示？
绝大多数情况不是浏览器不支持，而是根本没通过权限检查就直接调用了 Notification.requestPermission() 或 new Notification()。Chrome、Edge、Firefox 都要求页面必须是安全上下文（https:// 或 localhost），且用户主动触发（比如点击按钮），不能在页面加载时自动执行。
- 直接在
<script></script>中写new Notification("hi")→ 会报错DOMException: Permission denied - 用
setTimeout延迟 1 秒再发 → 依然无效，不是时机问题，是缺少用户手势（user gesture） - 在
document.addEventListener("DOMContentLoaded", ...)里调用 → 同样被拒，这不是用户操作 - 正确做法：绑定到按钮的
click事件，且首次调用前先请求权限
如何正确请求并使用 Notification 权限？
必须分两步：先调用 Notification.requestPermission() 获取用户授权，再根据返回值决定是否创建通知。注意它返回的是 Promise（现代写法）或接受回调（旧写法），别混淆。
-
Notification.permission初始值是"default"，不是"granted"或"denied" - 调用
requestPermission()后，用户点“允许”才变成"granted"；点“阻止”则变为"denied"，之后再调用会静默失败 - 不要重复请求：如果
Notification.permission === "granted"，可直接发；如果是"denied"，就别再弹权限框，用户已明确拒绝 - 示例逻辑：
button.addEventListener("click", async () => {
if (Notification.permission === "granted") {
new Notification("Hello");
} else if (Notification.permission === "default") {
const result = await Notification.requestPermission();
if (result === "granted") new Notification("Hello");
}
});
Notification 构造函数的参数和兼容性坑点
new Notification(title, options) 的 title 是必需字符串，options 是可选对象。但部分字段在不同浏览器行为不一致，尤其涉及图标和声音。
-
icon必须是绝对路径（如/img/icon.png），相对路径在某些版本 Safari 中不显示 -
image字段存在但几乎无浏览器支持，别依赖 -
badge仅 Android Chrome 和部分 PWA 场景生效，桌面端基本忽略 - 没有内置声音播放能力；想播音效得自己用
Audio对象，且需用户手势激活后才能播放 - 桌面端点击通知默认只聚焦页面，不会触发
notification.onclick事件——除非你在创建时显式绑定
在 index.html 里调试 Notification 的实际建议
本地开发时用 file:// 协议一定失败，这是硬性限制。必须起一个本地服务，哪怕最简的 python3 -m http.server 或 npx serve。
- 打开浏览器开发者工具 → Application 标签页 → Clear storage → 勾选 “Notifications”，清除旧权限状态，避免被之前拒绝记录卡住
- 检查控制台是否有
Failed to execute 'showNotification' on 'ServiceWorkerRegistration'—— 这说明你误在 Service Worker 里用了普通 Notification API（那是self.registration.showNotification()） - 移动端真机测试时，iOS Safari 完全不支持 Notification API，别白费力气
- 如果通知一闪而过，大概率是页面刷新或跳转太快，可在
notification.onshow里加console.log确认是否真的触发了
权限模型和用户交互绑定太紧，写代码时得时刻想着“这一步有没有人点过什么”。漏掉用户手势，后面全白搭。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
