举例说明如何实现浏览器桌面通知？

要实现浏览器桌面通知，你需要使用 Notification API。以下是一个简单的例子，演示了如何请求权限并在获得权限后显示通知：

// 检查浏览器是否支持通知
if ("Notification" in window) {
  // 检查通知权限
  if (Notification.permission === "granted") {
    // 如果已获得权限，直接显示通知
    showNotification();
  } else if (Notification.permission !== "denied") {
    // 如果未获得权限，请求权限
    Notification.requestPermission().then(function (permission) {
      // 如果用户接受，显示通知
      if (permission === "granted") {
        showNotification();
      }
    });
  } else {
    // 如果用户拒绝了通知权限，可以引导用户到浏览器设置中重新开启
    console.log("用户已拒绝通知权限");
    // 可以在这里添加一些提示信息，引导用户重新开启通知权限
    // 例如：alert("请在浏览器设置中开启通知权限");
  }
} else {
  // 浏览器不支持通知 API
  console.log("浏览器不支持通知 API");
}


function showNotification() {
  // 创建通知
  const notification = new Notification("新消息提醒", {
    body: "您有一条新消息！",
    icon: "/path/to/icon.png", // 可选：通知图标
    tag: "new-message", // 可选：通知标签，用于区分不同的通知
    // 其他可选参数，例如：
    // requireInteraction: true, // 通知保持显示，直到用户点击或关闭
    // silent: true, // 静默通知，不发出声音
    // data: { url: "/messages" }, // 自定义数据，可以在点击通知时使用
    // actions: [ // 自定义操作按钮
    //   { action: "reply", title: "回复" },
    //   { action: "archive", title: "存档" }
    // ]
  });

  // 点击通知时触发
  notification.onclick = function (event) {
    // 可以在这里打开一个新的页面或执行其他操作
    console.log("通知被点击");
    window.open("https://www.example.com"); // 例如打开一个新页面
    // 如果设置了 data 属性，可以通过 event.notification.data 获取
    // console.log(event.notification.data.url);
  };

  // 通知关闭时触发
  notification.onclose = function () {
    console.log("通知被关闭");
  };

  // 错误处理
  notification.onerror = function (event) {
    console.error("通知出错:", event);
  };
}

代码解释:

Notification API: 核心 API，用于创建和管理通知。
Notification.permission: 检查通知权限状态，值为 granted（已授权）、denied（已拒绝）或 default（未请求）。
Notification.requestPermission(): 请求通知权限，返回一个 Promise。
new Notification(title, options): 创建一个新的通知，title 为标题，options 为可选参数，例如 body（内容）、icon（图标）等。
事件处理: onclick、onclose、onerror 等事件可以用于处理通知的交互和错误。