Notification API 无法自动推送，必须用户主动点击触发且在HTTPS/localhost下运行；HTTP、file://协议或权限被拒时均静默失败，最常见原因是非用户手势调用或环境不合规。
Notification API 不能“自动推送”，必须用户点过一次按钮才可能弹出通知；HTTP 页面、本地 file://、权限被拒后不处理，这三类情况会直接静默失败。
为什么 new Notification() 总是不弹窗
最常见原因不是代码写错，而是触发时机或环境违规：
- 在
window.onload、DOMContentLoaded或定时器里直接调用new Notification()—— 浏览器强制拦截，控制台可能无报错 - 页面跑在
http://（非 localhost）或file://协议下 ——Notification.requestPermission()直接返回"denied"，且无法重试 - 用户之前点过“禁止”，此时
Notification.permission永远是"denied"，requestPermission()不再弹窗，也无回调 - Chrome 91+ 对非交互上下文更严格：哪怕你在
button.onclick里调用了，但该 button 是 JS 动态插入且未绑定事件委托，也可能被判定为“无真实用户手势”
怎么正确请求并使用通知权限
必须由明确的用户点击触发，且要分步判断权限状态：
- 先检查
Notification.permission：值为"granted"可直接发；"denied"就别再调requestPermission()；"default"才需要申请 -
Notification.requestPermission()是异步 Promise，必须用await或.then()拿结果，不能靠setTimeout猜 - 权限拿到后，
new Notification()的title是必填字符串，body是可选字符串 —— 不支持 HTML、\n在 Safari 和部分 Chrome 版本中会被忽略 - 图标
icon必须是 HTTPS 或同源绝对路径，比如/img/logo-192.png；相对路径如./icon.png在 Service Worker 环境中大概率 404
document.getElementById('notifyBtn').addEventListener('click', async () => {
if (Notification.permission === 'granted') {
new Notification('新消息', { body: '您有1条未读', icon: '/img/icon-192.png' });
} else if (Notification.permission === 'default') {
const result = await Notification.requestPermission();
if (result === 'granted') {
new Notification('欢迎', { body: '通知已启用' });
}
}
});
后台运行时还能发通知吗
能，但有限制条件：
立即学习“前端免费学习笔记（深入）”；
- 只要标签页没被完全关闭（哪怕最小化、切到其他标签页），主页面 JS 仍可执行，
new Notification()就能触发 - 但页面若进入冻结状态（如 Chrome 后台节流、iOS Safari 挂起），定时器和 fetch 回调可能延迟或失效，不能依赖
setInterval做轮询 - 真正可靠的后台通知必须用
Service Worker+Push API：服务端发加密 push 消息 → SW 收到push事件 → 调用self.registration.showNotification() -
requireInteraction: true在桌面 Chrome 有效（防止自动关闭），但 Safari 完全忽略，iOS 不支持；别把它当跨平台常驻方案
用户点了通知后怎么跳转页面
不能在 new Notification() 里直接跳，得靠事件监听和页面上下文配合：
- 必须在创建通知后**立刻**绑定
onclick，不能等几秒后再赋值：n.onclick = () => window.open('https://a.com/msg') - 这个回调运行在当前页面上下文中，所以页面必须处于可见/未被冻结状态；如果用户从其他应用切回来再点通知，回调可能被丢弃
- 想确保跳转，建议在
data字段里存目标 URL：new Notification('标题', { data: { url: '/chat/123' } })，然后在onclick中用clients.openWindow()（Service Worker 环境）或window.open()（主页面）打开 - 移动端 Safari 和所有 iOS 浏览器基本不支持 Notification API，别指望它在那里生效
最容易被忽略的是：权限一旦被用户手动设为 "denied"，前端就彻底失去重试能力，连提示都弹不出来。这时候要么引导用户去浏览器地址栏手动开启，要么降级用 alert() 或页面内 Toast 提示——但别把降级逻辑写在权限请求的 .catch() 里，因为 denied 状态根本不会进 catch。
