HTML5通知API怎么用_HTML5NotificationsAPI发送浏览器通知的方法
答案：HTML5 Notifications API可在浏览器中发送系统级通知，需先请求用户授权。通过Notification.requestPermission()获取权限后，使用new Notification()创建通知，并可监听点击事件。应根据granted、denied、default状态优化提示逻辑，兼顾用户体验与兼容性，适用于消息提醒等场景。
授权。通过Notification.requestPermission()获取权限后，使用new Notification()创建通知，并可监听点击事件。应根据granted、denied、default状态优化提示逻辑，兼顾用户体验与兼容性，适用于消息提醒等场景。HTML5 Notifications API 允许网页向用户发送系统级通知，即使浏览器最小化或在后台也能显示。这个功能适合用于消息提醒、新闻推送等场景。使用前需要用户授权，以下是具体使用方法。
请求通知权限
在发送通知前，必须先获取用户的许可。通过 Notification.requestPermission() 方法请求权限，该方法返回一个 Promise，状态为 "granted"（允许）、"denied"（拒绝）或 "default"（未决定）。
if ("Notification" in window) {
Notification.requestPermission().then(permission => {
if (permission === "granted") {
console.log("已获得发送通知的权限");
}
});
}
发送浏览器通知
权限通过后，就可以使用 new Notification() 构造函数创建通知实例。
if (Notification.permission === "granted") {
const notification = new Notification("通知标题", {
body: "这是通知内容",
icon: "/icon.png" // 可选：通知图标
});
}
通知会出现在系统右下角（Windows）或其他系统默认位置。可监听通知的点击事件：
notification.onclick = function() {
window.focus(); // 点击通知后激活页面
};
处理不同权限状态
实际应用中应判断当前权限状态，避免频繁请求打扰用户。
- granted：已授权，可直接发送通知
- denied：用户已拒绝，无法发送，建议不再提示
- default：用户未选择，可以请求一次权限
示例逻辑：
function showNotification() {
if (!("Notification" in window)) {
alert("您的浏览器不支持通知功能");
return;
}
if (Notification.permission === "granted") {
new Notification("你好！", { body: "这是一条测试通知" });
} else if (Notification.permission !== "denied") {
Notification.requestPermission().then(permission => {
if (permission === "granted") {
new Notification("你好！", { body: "这是一条测试通知" });
}
});
}
}
基本上就这些。只要注意权限管理、用户体验和浏览器兼容性，Notifications API 是个很实用的功能。现代主流浏览器都支持，但部分移动端浏览器可能有限制。
