H5页面实现桌面通知（Notification）的知识点笔记
网站必须是https协议访问才有桌面通知的权限，http直接返回denied，并且移动端全面未支持桌面通知
<script type="javascript">
// 先检查浏览器是否支持
if (!window.Notification) {
console.log('浏览器不支持通知');
} else {
// 检查用户曾经是否同意接受通知
if (Notification.permission === 'granted') {
var notification = new Notification(title, options); // 显示通知
} else if (Notification.permission === 'default') {
// 用户还未选择，可以询问用户是否同意发送通知
Notification.requestPermission().then(permission => {
if (permission === 'granted') {
console.log('用户同意授权');
var notification = new Notification(title, options); // 显示通知
} else if (permission === 'default') {
console.warn('用户关闭授权 未刷新页面之前 可以再次请求授权');
} else {
// denied
console.log('用户拒绝授权 不能显示通知');
}
});
} else {
// denied 用户拒绝
console.log('用户曾经拒绝显示通知');
}
if (Notification.permission === 'granted') {
console.log('用户曾经同意授权');
// 随时可以显示通知
} else if (Notification.permission === 'default') {
console.log('用户还未选择同意/拒绝');
// 下一步请求用户授权
} else {
console.log('用户曾经拒绝授权 不能显示通知');
}
var option = {
dir: 'rtl', //主体内容的水平书写顺序
body: '通知的内容<b>html b code</b>', //不支持html标签，实测win10长度能够显示4行文字内容，1行17个汉字
tag: 'tag1',
icon: 'https://maill.xxxx.com/common/images/Logo_50_0925.png', //正方形图片的地址
data: {col1: 'test', col2: 'hello'},
renotify: true,
requireInteraction: true,
silent: true, //是否无声
sound:'',
noscreen: false,
}
var notify = new Notification('我的通知的标题', option)
notify.onshow = function(){console.log(arguments)}
notify.onerror = function(){console.log(arguments)}
notify.onclose = function(){console.log(arguments)}
notify.onclick = function(){console.log(arguments);}
</script>参数说明（摘自张鑫旭老师的博客）：https://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/comment-page-2/#comment-414810
dir 默认值是auto, 可以是ltr或rtl，有点类似direction属性。表示提示主体内容的水平书写顺序。
lang 提示的语言。
body 提示主体内容。字符串。会在标题的下面显示
tag 字符串。标记当前通知的标签。
icon 字符串。通知面板左侧那个图标地址。
data 任意类型和通知相关联的数据。
vibrate 通知显示时候，设备震动硬件需要的振动模式。所谓振动模式，指的是一个描述交替时间的数组，分别表示振动和不振动的毫秒数，一直交替下去。例如[200, 100, 200]表示设备振动200毫秒，然后停止100毫秒，再振动200毫秒。
renotify 布尔值。新通知出现的时候是否替换之前的。如果设为true，则表示替换，相同tag属性的只会显示一个，而不会是默认的叠高楼：叠高楼
silent 布尔值。通知出现的时候，是否无声。
sound 字符串。音频地址。表示通知出现要播放的声音资源。
noscreen 布尔值。是否不再屏幕上显示通知信息。
sticky 布尔值。是否通知具有粘性，这样用户不太容易清除通知。
当浏览器最小化后，点击通知让浏览器恢复显示的方法，比如聊天页面有消息后，让用户回到浏览器
notify.onclick = function () {
var win = window.open();
win.close();
}有时候想监测浏览器当前标签的状态，以选择使用何种通知方式（页面通知、桌面通知、浏览器标题栏提示），如下方法可以监测页面的变化
//浏览器监测标签状态，离开标签，最大最小化，都会触发这个事件，建议亲自试试以下代码
document.addEventListener("visibilitychange", function() {
console.log( document.visibilityState );
console.log(document.hidden);
});
//我们只需要判断 document.visibilityState 或者 document.hidden 即可知道页面是隐藏的还是显示的在必要的时候，还有一招就是浏览器标题栏提示
//实际测试，在浏览器最小化或者标签非活动标签（切换到其它标签）时，交换时间间隔变长，或者失效
var titleInit = document.title
var isShine = true //是否提示状态
setInterval(function() {
var title = document.title;
if (isShine == true) {
if (/新消息/.test(title) == false) {
document.title = '【你有新消息】';
} else {
document.title = '【 】';
}
} else {
document.title = titleInit;
}
}, 500);notification其他细节: 摘自其它技术文章，有可能过时，仅作参考
用户拒绝显示通知：
一旦用户禁止网站显示通知，网站就不能再请求用户授权显示通知，需要用户去设置中更改。
chrome浏览器的通知设置位置：设置>高级>内容设置>通知
saafari浏览器：偏好设置>网站>通知>找到网站>修改权限/恢复默认
关闭请求权限：
在chorme浏览器中：当用户关闭请求权限的弹窗(右上角的叉叉)，页面还没刷新，我们可以再次向用户请求权限。页面刷新过后，浏览器默认用户拒绝。
在safari浏览器下，没有关闭请求权限的选项，用户必须选择同意/拒绝。
icon不显示问题：
可能是网片有防盗链
safari下面不能显示icon
在safari下面，同一个网站(比如谷歌)，同样的代码，chorme可以正常显示icon，safari却没有icon，也没有报错。
在stack overflow里面看到safari只支持body和tag选项,并不支持icon选项。
tag：
tag相同的通知，同时只能出现一个，老通知是否会被覆盖取决于：renotify配置和浏览器。
chrome下：当通知关闭之后，上次出现过的tag在一段时间内，不能再出现，比如刷新页面再请求相同tag的通知。（在safari下正常出现）
连续触发
在safari和chrome下短时间内连续触发通知(不设tag，不设requireInteraction)，会出现如下表现：
合并为一条通知，内容只提示有XXX条通知
这个表现，通知没有icon、标题、内容，就显得没有意义了，浏览器以这种形式，限制开发者不要频繁打扰用户。