浏览器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 最常用，但其他字段会影响行为和兼容性。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
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 无法再次触发权限弹窗，只能引导用户手动在浏览器设置里开启。
