JavaScript发送浏览器通知需三步：检查支持性、请求用户授权（须用户手势触发）、创建通知；受限于HTTPS、用户主动触发、权限不可重置及iOS不支持等限制。
JavaScript 实现浏览器通知主要依靠 Notification API，它允许网页在用户授权后向操作系统发送桌面通知。但该功能有明确的使用限制，不是所有场景都能随意触发。
如何用 JavaScript 发送浏览器通知
基本流程是：检查支持性 → 请求用户授权 → 创建并显示通知。
- 先判断浏览器是否支持：
if ('Notification' in window) - 调用
Notification.requestPermission()获取用户授权（必须由用户手势触发，如点击） - 授权成功后，用
new Notification(title, options)创建通知，options可含body、icon、badge、data等字段 - 示例：
document.getElementById('notify-btn').addEventListener('click', () => { if (Notification.permission === 'granted') { new Notification('你好', { body: '这是一条通知' }); } else if (Notification.permission !== 'denied') { Notification.requestPermission().then(permission => { if (permission === 'granted') { new Notification('你好', { body: '授权后发送' }); } }); } });
浏览器通知 API 的核心使用限制
这些限制是为了防止滥用、保护用户体验，不同浏览器大体一致，但细节略有差异：
-
必须由用户主动触发：
requestPermission()和new Notification()都不能在页面加载、定时器、后台脚本中自动调用，必须绑定在 click、tap 等用户手势事件内 - 仅限 HTTPS 环境（或 localhost）：非安全上下文（http://）下，Chrome、Firefox、Edge 等现代浏览器会直接禁用 Notification API
-
权限状态不可绕过：用户拒绝后，浏览器通常不再提示；再次调用
requestPermission()不会弹窗，只返回'denied'；需引导用户手动在地址栏或设置中更改 - 通知内容受平台约束：例如 iOS Safari 完全不支持 Notification API；部分安卓 WebView 或旧版浏览器可能无响应或静默失败
-
无法控制通知样式和交互逻辑：不能自定义按钮位置、颜色、动画；点击通知默认聚焦标签页，无法直接执行任意 JS（除非监听
notification.click事件并在同源页面中处理）
常见问题与注意事项
实际开发中容易踩坑的地方：
立即学习“Java免费学习笔记（深入）”；
- 不要在页面初始化时立即请求权限——90% 用户会直接拒绝；建议结合具体场景（如用户完成某操作后）再友好提示
- 注意权限状态缓存：
Notification.permission是只读属性，每次需检查其值（'granted'/'denied'/'default'） - 通知图标推荐使用 192×192 或 512×512 PNG，否则在某些系统上可能模糊或被忽略
- 移动端支持有限：Android Chrome 支持良好，iOS Safari 不支持；PWA 可通过
service worker + push API实现离线推送，但需额外配置
Notification API 本身简单，但权限模型和平台兼容性让它需要谨慎设计交互流程。不复杂但容易忽略。
