首先检查浏览器是否支持通知功能并请求用户授权，授权通过后使用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"
});
}
支持的选项包括：
- 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("欢迎开启通知");
}
});
}
}
基本上就这些。注意通知功能依赖用户授权，不能强制弹出。合理使用可提升用户体验，但滥用可能导致用户屏蔽站点权限。
