使用HTML5 Notification API可实现网页桌面消息提醒，需先检查浏览器支持并获取用户授权，获准后通过new Notification()创建通知，可设置标题、内容、图标等，并添加点击跳转等交互行为。
要在网页中实现像桌面应用那样的消息提醒，可以使用HTML5的Notification API。这个功能能让网站在用户的操作系统层面弹出通知框，即使浏览器不在当前窗口也能看到，非常适合用来提醒用户有新消息、新动态等。
检查支持与请求授权
使用通知功能前，必须先确认浏览器是否支持，并且要获得用户的许可。未经允许就弹窗会破坏体验，所以浏览器强制要求这一步。
核心步骤是：首先检查window对象是否有Notification属性，然后调用requestPermission方法申请权限。该方法返回一个Promise，根据用户的选择得到granted（允许）、denied（拒绝）或default（未决定）状态。
if ('Notification' in window) { Notification.requestPermission().then(function(permission) { if (permission === 'granted') { // 用户同意了，可以发送通知 } }); }创建并显示通知
当获得授权后，就可以通过new Notification()构造函数来创建通知实例。第一个参数是标题，第二个参数是一个配置对象，可以设置通知的详细内容。
立即学习“前端免费学习笔记（深入）”；
常用配置项包括：
- body：通知正文的文字内容。
- icon：通知左侧显示的图标图片URL。
- tag：为通知分配一个ID，相同tag的通知不会重复弹出，可用于更新或替换。
- dir：文本方向，如ltr（从左到右）或rtl（从右到左）。
添加交互行为
通知不只是静态展示，你还可以让它对用户的操作做出反应，比如点击后跳转页面或关闭自身。
通过监听onclick事件，可以在用户点击通知时执行代码，例如打开一个新窗口。onshow、onclose和onerror事件则分别对应通知显示、关闭和出错时的处理逻辑。
notification.onclick = function() { window.open('https://example.com'); this.close(); // 点击后关闭通知 }; 基本上就这些。整个流程很直接：先检查支持，再拿授权，然后发通知，最后加点互动。关键是别忘了用户授权这一步，不然什么都弹不出来。
