17370845950

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" 时才能创建通知。注意以下要点：

• 构造 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 要求。