HTML5 Notification API可在浏览器最小化时推送桌面消息，需先检查并获取用户授权，再创建通知并添加点击等交互事件。
想让网页在用户没盯着看的时候也能提醒新消息？HTML5 的 Notification API 就是干这个的。它能让你的网站像QQ、微信那样，在系统右下角弹出提示框，哪怕浏览器被最小化或切换到其他标签页也照样能收到通知。
检查权限并请求授权
浏览器出于安全考虑，不会让你随便弹窗打扰用户。必须先获得用户的许可。
- 首先判断当前浏览器是否支持 Notification API：if ("Notification" in window)。
- 然后检查当前的授权状态：Notification.permission，它有三个值："granted"（已授权）、"denied"（已拒绝）和 "default"（默认，未询问过）。
- 如果状态是 "default"，就需要调用 Notification.requestPermission() 方法来向用户发起授权请求。用户同意后，后续的通知才能正常显示。
创建并显示通知
一旦获得了授权，就可以开始发送通知了。
- 使用 new Notification(title, options) 构造函数来创建一个通知实例。第一个参数是通知的标题，第二个参数是一个包含详细信息的配置对象。
- options 对象里常用的属性有：
- body：通知框里的正文内容。
- icon：通知左侧显示的小图标，通常传一个图片URL。
- tag：给通知打个标签，相同 tag 的通知会互相替换，避免重复弹窗。
为通知添加交互事件
一个死板的通知没什么用，让它动起来！你可以为通知绑定点击、关闭等事件。
立即学习“前端免费学习笔记（深入）”；
- onclick：当用户点击通知时触发。比如，点击通知就跳转到相关的消息页面，可以用 notification.onclick = function() { window.open(url); } 实现。
- onclose：当通知被用户手动关闭时触发，可以用来做数据统计或清理工作。
- onerror：当通知显示出现错误时触发。
基本上就这些，不复杂但容易忽略细节。核心就是“先要权限，再发消息，最后加点反应”。搞定这几步，你的网页就能拥有酷炫的消息提醒功能了。
