必须满足HTTPS（或localhost）、用户主动触发、权限已授予三条件，缺一不可；Safari on iOS/iPadOS完全不支持；需用typeof Notification==='function'且permission非undefined双重校验，禁用时降级为alert或title闪烁。

直接用 Notification API 就行，但必须满足 HTTPS（或 localhost）、用户主动触发、权限已授予三个硬条件，缺一不可。Safari on iOS/iPadOS 完全不支持，别白费劲。

怎么判断浏览器是否支持 Notification API

不能只靠 "Notification" in window 就认定能用——有些环境（比如旧版 Edge 或禁用 JS 的浏览器）会返回 true 但实际调用失败。建议加一层运行时校验：

• 先检查 Notification 构造函数是否存在且可调用：typeof Notification === 'function'
• 再确认 Notification.permission 不是 undefined（IE11 返回 undefined）
• 移动端 Safari 必须跳过：可通过 navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome') 粗筛（iOS Safari 永远不支持）

为什么点按钮没弹授权框，或者直接报错 PermissionDeniedError

常见原因就三个，按优先级排查：

• 页面不是 HTTPS（生产环境）或 localhost（开发环境）——Chrome 91+ 会静默禁用 Notification，连 requestPermission() 都不会执行
• 调用 Notification.requestPermission() 不在用户手势上下文里（比如 onload、setTimeout、fetch 回调中），浏览器直接拒绝并抛 DOMException: The user gesture is required
• 用户之前点过“阻止”，此时 Notification.permission 是 denied，而 Chrome/Safari 不允许 JS 再次触发弹窗——只能引导用户去 chrome://settings/content/notifications 手动重置

new Notification() 报错 Failed to construct 'Notification' 是什么情况

这个错误基本等于“权限没拿到 + 强行创建”，不是语法问题。典型场景：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

• Notification.permission === 'default' 时直接 new Notification(...) —— 此时还没请求，浏览器不允许
• Notification.permission === 'denied' 时仍尝试创建 —— 浏览器直接 throw
• 传了非法 icon 路径（404、跨域、非 HTTPS 图片）——部分浏览器会静默失败，部分抛 DOMException
• 标题 title 是空字符串或 undefined —— 构造函数要求必填非空字符串

如何安全地发通知并兼容降级

不要写“先请求权限再发通知”的线性逻辑，要按状态分支处理：

• 如果 Notification.permission === 'granted'：直接 new Notification(title, options)
• 如果 Notification.permission === 'default'：调用 Notification.requestPermission()，然后在 then 里根据结果分支
• 如果 Notification.permission === 'denied'：放弃 Notification，改用 alert() 或标签栏闪烁（document.title 切换）
• 所有路径都要包裹 try/catch，因为即使权限 OK，图标加载失败也可能导致构造失败

真正容易被忽略的是：权限状态是**全局持久的**，不是单页生命周期。用户一次拒绝，整个域名下所有页面都失效，且无法用 JS 清除——这点和 localStorage 完全不同，得提前在 UI 上提示清楚。