桌面通知需先获用户授权，使用Notification.requestPermission()请求权限，根据返回的granted、denied或default状态决定是否创建new Notification发送消息，并在用户拒绝后引导其手动开启，避免频繁打扰。
桌面通知功能可以让网页应用在用户的桌面上弹出消息提醒，提升用户体验。要实现这一功能，需正确使用浏览器的通知 API 并妥善管理权限。以下是如何使用通知 API 及进行权限管理的实用指南。
请求通知权限
在发送桌面通知前，必须先获得用户的许可。浏览器不会默认允许网页发送通知，需通过 Notification.requestPermission() 主动请求。
- 调用
Notification.requestPermission()会弹出浏览器原生的权限提示框 - 用户可选择“允许”、“拒绝”或关闭对话框（表示未决定）
- 返回 Promise，结果为
'granted'、'denied'或'default'
示例代码：
if (window.Notification) {
Notification.requestPermission().then(permission => {
if (permission === 'granted') {
new Notification('你好！通知已启用');
}
});
}
检查当前权限状态
每次使用通知前应检查当前权限状态，避免重复请求或在无权限时尝试发送。
-
Notification.permission返回当前权限值 -
'granted'：已授权，可直接发送通知 -
'denied'：用户已拒绝，无法发送，且不能再次请求 -
'default'：未做选择，可再次请求权限
建议在页面加载或用户触发操作时检查：
function showNotification() {
if (Notification.permission === 'granted') {
new Notification('最新消息提醒');
} else if (Notification.permission === 'default') {
Notification.requestPermission();
}
// 若为 'denied'，则不执行任何操作
}
发送桌面通知
当权限被授予后，可通过 new Notification() 创建通知实例。
- 构造函数接收标题字符串和配置对象（可选）
- 配置项包括 body（正文）、icon（图标）、tag（分组标识）等
- 通知会在系统托盘区域显示，点击后可触发事件
示例：
const notification = new Notification('新邮件到达', {
body: '你有一封来自同事的重要邮件',
icon: '/images/email-icon.png'
});
notification.onclick = () => {
window.focus();
notification.close();
};
处理用户拒绝与重试策略
若用户拒绝权限，浏览器将永久阻止该站点发送通知，无法通过代码再次请求。
- 应在 UI 中提示用户手动前往浏览器设置中更改权限
- 可提供引导文字，如：“请在地址栏右侧点击锁形图标，开启通知权限”
- 避免频繁弹出请求，影响体验
合理做法是仅在用户明确表达需要提醒功能时（如点击“开启提醒”按钮）才发起请求。
基本上就这些。掌握权限流程和用户交互节奏，才能让通知功能真正发挥作用又不造成打扰。
