JavaScript浏览器通知需先获用户授权，调用Notification.requestPermission()请求权限（仅限用户交互事件中），通过Notification.permission检测状态，HTTPS环境下用new Notification()发送通知，并做兼容性降级处理。
JavaScript 实现浏览器通知，核心是使用 Notification API，但必须先获得用户授权。未授权直接调用会静默失败，且现代浏览器（Chrome、Edge、Firefox 等）只允许在用户交互（如点击）后发起权限请求。
怎样请求用户授权？
调用 Notification.requestPermission() 发起授权请求，该方法返回一个 Promise（新版浏览器），或接受回调函数（旧版兼容写法）。注意：它只能在用户触发的事件中调用（例如 click、keydown），否则会被浏览器忽略或拒绝。
- 推荐使用 Promise 写法（Chrome 72+、Firefox 70+ 支持）：
<button id="notifyBtn">开启通知</font>
<script>
document.getElementById('notifyBtn').addEventListener('click', async () => {
try {
const permission = await Notification.requestPermission();
if (permission === 'granted') {
& // 可以发送通知
new Notification('你好！', { body: '这是第一条通知' });
} else if (permission === 'denied') {
// 用户明确拒绝，后续无法再弹请求（需手动在设置中开启）
} else {
// 'default' 表示用户未选择，下次仍可请求
}
} catch (err) {
console.error('请求权限失败:', err);
}
});
</script>
如何检测当前权限状态？
避免重复请求，应先检查 Notification.permission 的当前值：
- 'granted'：已授权，可直接发通知
- 'denied'：被拒绝，不能再次弹窗请求（浏览器限制）
-
'default'：未决定，可以调用
requestPermission()
建议在页面加载后读取一次权限状态，并根据结果调整 UI（例如按钮文案：“开启通知” / “已启用” / “已禁用”）。
立即学习“Java免费学习笔记（深入）”；
发送通知的注意事项
调用 new Notification(title, options) 前，请确认：
- 页面处于**HTTPS 环境**（本地
localhost也允许，但http://非本地域名会失败） - 用户已授予
'granted'权限 - 标题（
title）为字符串，必填；options中常用字段：body（正文）、icon（图标 URL）、badge（小图标）、tag（用于去重或更新通知） - 部分浏览器（如 Safari）对通知频率有限制，频繁调用可能被忽略
兼容性与降级处理
IE 不支持 Notification API；较老版本 Android WebView 或部分国产浏览器也可能不支持。建议：
- 使用
if ('Notification' in window)检测 API 是否可用 - 对不支持的环境提供替代提示（如 toast 提示、邮件订阅入口等）
- 不要依赖通知作为关键功能的唯一通道（例如重要提醒应同时发邮件或站内信）
