前言
通知可以说是 web 中比较常见且重要的功能，私信、在线提问、或者一些在线即时通讯工具我们总是希望第一时间知道对方有了新的反馈，这个时候，就需要页面给予即使的通知。
在最早的时候，通知主要是通过不断地闪烁页面标题来实现的，实现的原理也十分的简单，就是在需要通知的时候，通过定时器不断地去修改网页的标题，然后在用户返回网页以后，取消掉这个闪烁。
但是这个做法的弊端也非常的明显，一旦用户的浏览器最小化了，自然就看不到标题了，那也就没办法即时送达通知了，对于这个问题，Web Notification API 就能够很好的解决
Web Notification API
浏览器能够帮我们推送一些通知到用户的桌面，这样哪怕是用户当前不处于我们的网页，或者说不再使用浏览器，也能够一样的收到这个通知，因为这个通知时桌面级别的，拿 window10 来说，就是会在右下弹出通知窗口，并且在通知管理列表当中能够一直存在
这能够有利于我们传递一些重要的信息，因为它哪怕在用户未使用浏览器的情况下也能够送达。
如何推送桌面消息
最简单的桌面消息推送只需要一行代码
let notification = new Notification('有一条新通知');
在你调用了 Notification 相关的 API 以后，浏览器会提示用户是否允许弹窗，只有用户允许，那么桌面推送才会奏效。
当然， Notification 还有其他的能力用于实现更加丰富的功能，比如说我们可以通过 Notification.requestPermission() 获取当前用户是否允许浏览器推送消息，这个方法会返回一个 Promise 它的值为字符串类型，可能有三种结果
denied用户拒绝显示通知granted用户接受显示通知default用户的选择是位置的，因此浏览器的行为类似于值是denied
我们通过 Notification.permission 也能够获取当前用户的选项，只不过这是要给只读的属性，并不会使得浏览器给用户弹出提示想要获取权限，所以我们可以在刚开始的时候使用 Notification.requestPermission() 获取权限，并且让用户判断是否授予权限，之后的逻辑中都可以使用 Notification.permission 只读的获取当前权限
在我们实例化 Notification 的时候，第一个参数是通知的 title 这是必须的，第二个参数是一个对象 option，它提供给了我们一些可选的参数：
| dir | 文字显示通知方向，默认auto,可选ltr,rtl |
| lang | 通知的语言 |
| body | 通知的显示的文本 |
| icon | 通知显示的图标 |
| image | 作为通知的一部分显示图像 |
| tag | 赋予通知一个ID，方便之后用于通知的刷新，替换或者移除 |
| requireInteraction | 表示通知应保持有效，直到用户点击或关闭它，而不是自动关闭。默认值为false |
| renotify | 指定在新通知替换旧通知后是否应通知用户。默认值为false |
这里我简单的把每个参数都填上试一下弹窗：
var notification = new Notification('这是通知标题', {
body: '这是通知内容',
icon:"./dog.jpg",
dir: 'ltr',
lang: 'zh-CN',
tag: '111',
requireInteraction： false,
renotify: true,
});
如果你开启了 requireInteraction 弹窗的样式将会发生改变，并且不再会自己消失
多个弹窗的 tag 如果相同的话，就不会重复通知，但是要是开启了 renotify 参数，就还是会照样通知。
这里更多的参数就不做太多介绍，刚兴趣的可以自己去阅读官方文档尝试一下，示例代码放在文末。
事件
在弹窗推送之后，我们可以监听某些事件来得知用户对弹窗做了什么操作。
notification.onclick = () => {
console.log('onclick'); // 当用户点击通知时触发。
}
notification.onclose = () => {
console.log('onclose'); // 当用户点击通知时触发。
}
notification.onerror = () => {
console.log('onerror'); // 当通知发生错误时触发。
}
notification.onshow = () => {
console.log('onshow'); // 当通知显示时触发。。
}
要注意其中的 onclose 事件不会再用户点击关闭的时候触发（这里使用的是谷歌浏览器）只会在你去调用 notification.close() 的时候触发。
源码
这里掘金的代码编辑器是无法触发的，可以复制代码本地起一个服务来验证
