一.什么是Web Notifications API
Web Notifications API允许网页或者是应用程序以系统级别发送在页面外部显示的通知，这样就可以实现即时应用程序在后台或者是空闲状态，Web应用程序也会向用户发送信息。
二.Notification的状态
1.denied（拒绝）——不允许发送通知
2.granted（同意）——允许发送通知
3.default（默认状态）——根据浏览器来决定，一般是询问浏览器，来请求获取发送通知的权限
三.场景实现步骤
1.检查浏览器是否支持
2.首先请求权限，在应用程序可以发送通知之前，需要用户授予应用程序发生通知的权限
3.创建并显示通知
具体实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Notification Example</title>
<script>
// 当页面加载时执行
document.addEventListener('DOMContentLoaded', function() {// 检查浏览器是否支持Notification APIif (!("Notification" in window)) {alert("This browser does not support desktop notification");}// 检查用户是否已经授予权限else if (Notification.permission === "granted") {// 如果已经授权，可以直接显示通知showNotification();}// 如果用户尚未做出选择或默认为'default'，则请求权限else if (Notification.permission !== "denied") {Notification.requestPermission().then(function(permission) {// 一旦用户响应，可以显示通知if (permission === "granted") {showNotification();}});}// 显示通知的函数function showNotification() {var notification = new Notification("Hello", {body: "This is a notification message!",icon: 'icon.png' // 路径到图标文件});// 可以添加事件监听器来处理用户交互notification.onclick = function() {// 这里可以打开新窗口或跳转到特定页面window.open('https://www.example.com', '_blank');};}
});
</script>
</head>
<body>
<h1>Web Notifications API Example</h1>
<p>Check the top-right corner for the notification!</p>
</body>
</html>四.优缺点：
优点：1.可以定制通知的外观和行为
2.不需要用户授权
3.可以应用到现有的网页设计中
缺点：1.需要适配移动端设备
2.过多的使用可能会影响页面性能。
