前些天浏览网站的时候突然跳出个通知的允许与禁止，觉得很有新颖还很有意思，决定学习一下
了解得知这个是HTML5的消息通知机制notification
首先感谢以下文章帮助我少走了很多弯路
相信大家在看一些新闻，视频类的网站时会跳出一些通知
通知
当授权后有时候会跳出推送的消息
通知消息
这些功能很多主流网站已经在使用了，是时候好好学上一波了。
其实很简单，这玩意只需要对照notification这个接口即可。
在使用前查查是否是自己需要的，避免浪费时间
notifacation兼容性
想要了解怎么使用，没问题先把代码复制跑一边啥事都解决了。
// html
<button id="btn">点击</button>
// js
<script>
window.onload = function() {
//首先询问用户是否授权，只有授权后才能显示 Notification.requestPermission()
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
var notification = new Notification("消息通知", {
noscreen: true,
dir: 'rtl',
body: '哈哈！酷！',
tag: '1',
icon: 'img/1.png',
renotify: true
})
var notification2 = new Notification("消息通知", {
noscreen: true,
dir: 'rtl',
body: '哈哈！酷！',
tag: '2',
icon: 'img/1.png',
renotify: true
})
var notification3 = new Notification("消息通知", {
noscreen: true,
dir: 'rtl',
body: '哈哈！酷！',
tag: '3',
icon: 'img/1.png',
renotify: true
})
setInterval(function() {
notification.close()
console.log('关闭');
}, 5000)
notification.onclick = function() {
// alert('点击了');
console.log('点击了');
notification.close()
}
notification.onclose = function() {
// alert('已经关闭！');
console.log('已经关闭');
}
notification.onshow = function() {
// alert('弹出前！');
console.log('弹出前');
}
})
}
</script>
以下几个常用的API
//1.利用构造函数来创建一个实例
var notification = new Notification(title, options)
/*
title
一定会被显示的通知标题
options 可选（常用，更多需要查api）
一个被允许用来设置通知的对象。它包含以下属性：
dir : 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）
body: 通知中额外显示的字符串
tag: 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
icon: 一个图片的URL，将被用于显示通知的图标。
*/
如何判断用户是否同意呢
Notification.permission
授权状态：denied (用户拒绝了通知的显示), granted (用户允许了通知的显示),默认 default (因为不知道用户的选择，所以浏览器的行为与 denied 时相同).
发出一个通知后想要让其点击有效果
onclick：点击时触发
onshow：显示通知时触发
onclose：关闭通知时触发
onerror：通知发生错误时触发
上方的小例子中有使用可看看。
