如何利用浏览器API实现通知(Notifications)功能？

首先检查浏览器是否支持通知功能并请求用户授权，授权通过后使用new Notification()显示带标题、内容和图标的系统通知，同时可监听点击等交互事件实现页面跳转或数据处理。

要在网页中实现通知功能，可以使用浏览器提供的 Notifications API。这个 API 允许网页在用户的设备上显示系统级通知，即使页面不在前台也能提醒用户。以下是实现步骤和关键代码。

请求通知权限

在显示通知前，必须先获得用户的许可。通过 Notification.requestPermission() 方法请求权限，用户会看到一个弹窗提示。

if ("Notification" in window) {
  Notification.requestPermission().then(permission => {
    if (permission === "granted") {
      console.log("已获得发送通知的权限");
    }
  });
}

该方法返回一个 Promise，resolve 值为 "granted"、"denied" 或 "default"。只有 "granted" 状态下才能发送通知。

显示基本通知

权限通过后，使用 new Notification() 构造函数创建通知实例。

if (Notification.permission === "granted") {
  new Notification("你好！", {
    body: "这是一条来自网页的通知",
    icon: "/icon.png"
  });
}

支持的选项包括：

Cutout.Pro

AI驱动的视觉设计平台

下载

• body：通知正文内容
• icon：通知图标路径
• tag：用于去重或更新通知
• data：附加数据，可在事件中读取

处理用户交互

通知支持点击和关闭事件，可用于跳转页面或记录行为。

const notification = new Notification("点击我", {
  data: { url: "https://example.com" }
});

notification.onclick = function(event) {
  window.open(this.data.url);
};

常见事件有：

• onclick：用户点击通知时触发
• onclose：通知被关闭时触发
• onerror：通知出错时调用

检查权限状态与兼容性

建议在调用前检查浏览器是否支持，并避免重复请求权限。

function showNotification() {
  if (!("Notification" in window)) {
    alert("你的浏览器不支持通知功能");
    return;
  }

  if (Notification.permission === "granted") {
    new Notification("消息送达");
  } else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(permission => {
      if (permission === "granted") {
        new Notification("欢迎开启通知");
      }
    });
  }
}

基本上就这些。注意通知功能依赖用户授权，不能强制弹出。合理使用可提升用户体验，但滥用可能导致用户屏蔽站点权限。