html5 Notification API可在浏览器最小化时推送桌面消息，需先检查并获取用户授权，再创建通知并添加点击等交互事件。

想让网页在用户没盯着看的时候也能提醒新消息？html5 的 Notification API 就是干这个的。它能让你的网站像qq、微信那样，在系统右下角弹出提示框，哪怕浏览器被最小化或切换到其他标签页也照样能收到通知。

检查权限并请求授权

浏览器出于安全考虑，不会让你随便弹窗打扰用户。必须先获得用户的许可。

• 首先判断当前浏览器是否支持 Notification API：if (“Notification” in window)。
• 然后检查当前的授权状态：Notification.permission，它有三个值：”granted”（已授权）、”denied”（已拒绝）和 “default”（默认，未询问过）。
• 如果状态是 “default”，就需要调用 Notification.requestPermission() 方法来向用户发起授权请求。用户同意后，后续的通知才能正常显示。

创建并显示通知

一旦获得了授权，就可以开始发送通知了。

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

26

查看详情

• 使用 new Notification(title, options) 构造函数来创建一个通知实例。第一个参数是通知的标题，第二个参数是一个包含详细信息的配置对象。
• options 对象里常用的属性有：
  • body：通知框里的正文内容。
  • icon：通知左侧显示的小图标，通常传一个图片URL。
  • tag：给通知打个标签，相同 tag 的通知会互相替换，避免重复弹窗。

为通知添加交互事件

一个死板的通知没什么用，让它动起来！你可以为通知绑定点击、关闭等事件。

立即学习“前端免费学习笔记（深入）”；

• onclick：当用户点击通知时触发。比如，点击通知就跳转到相关的消息页面，可以用 notification.onclick = function() { window.open(url); } 实现。
• onclose：当通知被用户手动关闭时触发，可以用来做数据统计或清理工作。
• onerror：当通知显示出现错误时触发。

基本上就这些，不复杂但容易忽略细节。核心就是“先要权限，再发消息，最后加点反应”。搞定这几步，你的网页就能拥有酷炫的消息提醒功能了。