JavaScript桌面通知需先调用Notification.requestPermission()获取用户授权，仅在用户点击等交互后有效，权限状态分granted/denied/default；获准后方可通过new Notification()发送通知，且要求HTTPS（localhost除外）。
JavaScript 实现桌面通知需要使用浏览器提供的 Notification API，而获取权限是前提——用户必须明确授权，否则无法弹出通知。
如何请求桌面通知权限
调用 Notification.requestPermission() 方法会触发浏览器权限提示（仅在用户手势如点击后有效）。该方法返回一个 Promise，在现代浏览器中推荐用 await 处理：
- 权限状态可能为
"granted"（已允许）、"denied"（已拒绝）或"default"（未选择，等同于拒绝） - 不能在页面加载时自动调用，需由用户交互（如按钮点击）触发，否则会被浏览器忽略或静默拒绝
- Chrome、Edge、Firefox 支持良好；Safari 仅支持较新版本，且需在 macOS 系统设置中开启网站通知权限
检查并请求权限的推荐写法
避免重复请求，先检查当前状态再决定是否调用 request：
async function requestNotificationPermission() {
if (Notification.permission === "granted") {
return true;
}
if (Notification.permission === "denied") {
console.warn("通知权限已被拒绝");
return false;
}
try {
const permission = await Notification.requestPermission();
return permission === "granted";
} catch (err) {
console.error("请求权限失败", err);
return false;
}
}
发送桌面通知的条件与写法
只有权限为 "granted" 时才能创建通知。注意以下要点：
立即学习“Java免费学习笔记（深入）”；
- 构造
new Notification(title, options)即可触发系统级弹窗 -
options可包含body（正文）、icon（图标 URL）、badge、tag（用于去重）等字段 - 若页面不在前台，通知仍会正常显示；若在前台，需手动监听
notificationclick事件处理点击行为 - 部分浏览器（如 Chrome）要求站点启用 HTTPS（本地
localhost除外）
完整可用示例
结合权限检查与通知发送：
document.getElementById("notifyBtn").addEventListener("click", async () => {
const granted = await requestNotificationPermission();
if (granted) {
new Notification("你好！", {
body: "这是一条桌面通知",
icon: "/icon.png"
});
}
});
权限只会在首次请求时弹出提示框，后续刷新页面不会再次出现——用户可在浏览器地址栏右侧点击锁形图标管理该站点的通知权限。不复杂但容易忽略交互触发时机和 HTTPS 要求。
