notification api 需 https 或 localhost，http 网站静默失败；必须用户手势触发 requestpermission() 获取授权；new notification() 的 icon 需绝对路径，requireinteraction 等字段存在兼容性差异；点击事件需创建后立即绑定 onclick。
Notification API 要求 HTTPS 或 localhost 才能工作
直接在 HTTP 网站上调用 new Notification() 会静默失败，控制台通常不报错，但通知根本不会弹出。这是浏览器的硬性安全策略，不是代码写错了。
开发阶段可放心用 localhost（哪怕没配 HTTPS），但部署到真实域名时必须启用 HTTPS —— 即使是自签名证书也不行，得是受信任 CA 签发或 Let’s Encrypt 这类有效证书。
常见误判场景：
- 本地用
file://协议打开 HTML 文件 → 拒绝触发，改用python3 -m http.server启个本地服务 - Nginx 反向代理后未透传
HTTPS=on或缺少X-Forwarded-Proto: https→ 后端 Node.js/Express 里req.protocol读成http，导致权限检查失败
必须先请求用户许可，且不能自动重试
Notification.requestPermission() 是用户主动授权的唯一入口，它返回一个 Promise，状态只能是 "granted"、"denied" 或 "default"（后者表示用户还没点过，下次再调仍会弹窗）。
关键限制：
- 该方法只能在用户手势（如
click、keydown）回调中调用，页面加载时直接执行会立即被拒绝，Promise resolve 为"denied" - 用户点“阻止”后，
chrome://settings/content/notifications里手动改设置前，再次调用requestPermission()永远返回"denied"，不会重新弹窗 - 不要封装成“自动重试”逻辑，反复调用只会让用户更反感
推荐做法：在按钮点击事件里调用，并根据返回值决定是否创建通知：
button.addEventListener('click', async () => {
const permission = await Notification.requestPermission();
if (permission === 'granted') {
new Notification('标题', { body: '内容' });
}
});
new Notification() 的 options 参数有兼容性陷阱
基础用法 new Notification(title, options) 看似简单，但几个常用字段在不同浏览器表现不一：
-
icon：必须是绝对 URL（如/img/icon.png），相对路径在 Safari 中常失效；尺寸建议 192×192 或 512×512 PNG，避免透明背景在深色模式下看不清 -
badge：仅 Chrome/Edge 支持，用于通知栏小图标角标，Safari/Firefox 忽略 -
requireInteraction：设为true可防止通知自动关闭，但 Firefox 目前不支持，Chrome 中若用户不操作，仍可能被系统回收 -
silent和sound：已废弃，现代浏览器忽略；声音需靠play()Audio 实例单独控制
稳妥写法：
if (Notification.permission === 'granted') {
new Notification('消息提醒', {
body: '你有新任务',
icon: '/assets/notify-icon.png',
tag: 'task-update' // 避免重复弹多个同类型通知
});
}
通知点击事件监听必须在触发前绑定
想响应用户点击通知的操作，得在 new Notification() 实例创建后立刻监听 onclick，而不是等通知弹出后再找 DOM 绑定 —— 它压根不进 DOM 树。
注意点：
- 事件回调中无法直接访问页面
window，需用self.focus()或clients.openWindow()（Service Worker 场景）唤起标签页 - 如果页面已关闭，只有注册了 Service Worker 才能在后台处理点击（比如跳转到指定 URL）
-
onclick回调里不能执行耗时操作，Chrome 会强制中断超过 30 秒未响应的 handler
简单页面内响应示例：
const n = new Notification('点击试试');
n.onclick = () => {
window.focus();
// 注意：这里 location.href = '...' 可能被弹窗拦截，建议提前打开空 tab 再赋值
};
实际项目中，最易被忽略的是权限状态的持久化判断：不要每次都需要用户点一次按钮才检查 Notification.permission，而应在页面初始化时就读取并缓存，再结合业务逻辑决定是否展示“开启通知”引导按钮。大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
