前言
因为公司的项目中有涉及到社交，所以消息推送是免不了，那通过JS实现桌面推送，自然要用到H5的Notification对象，该通知是脱离浏览器的，即使用户最小化了浏览器，该通知信息也会显示。
Notification的基本语法
用户授权
想向用户显示消息通知，需要获取用户权限，而相同的域名只需要获取一次权限。只有用户允许的权限下，Notification才能起到作用
Notification.requestPermission().then(function(permission) {
if(permission === 'granted'){
console.log('用户允许通知');
}else if(permission === 'denied'){
console.log('用户拒绝通知');
}
});
触发弹窗
var notification = new Notification(title, options)
options选项（可选）：
- dir 主体内容的水平书写顺序
- body 通知的内容
- icon 通知的图标的URL
- image 通知中显示图像的URL
- tag 一个识别标签，相同tag时只会打开同一个通知窗口
- data 想要和通知关联的任务类型的数据
- vibrate 通知显示时候，设备震动硬件需要的振动模式
- renotify 布尔值。新通知出现时是否替换之前的，必须配合tag
- silent 布尔值。通知出现时是否要有声音
- sound 音频地址
隐藏弹窗
Notification.close()
对应事件
- Notification.onclick 点击通知事件
- Notification.onerror 通知显示异常事件
- Notification.onclose 通知关闭事件
- Notification.onshow 通知显示事件
实例
document.addEventListener('DOMContentLoaded', function () {
if (!('Notification' in window)) {
alert('Sorry bro, your browser is not good enough to display notification');
return;
}
Notification.requestPermission(function (permission) {
if (permission === 'granted') {
console.log('用户允许通知！');
} else if (permission === 'denied') {
console.log('用户拒绝通知！');
}
var notification = new Notification("Here I am!", {
body: 'Thanks for clicking that button. Hope you liked.',
icon: '',
dir: 'auto'
});
setTimeout(function () {
notification.close();//关闭桌面通知
}, 5000);
notification.onclick = function () {
notification.close();//关闭桌面通知
var href = window.location.href;//获取当前页面的url
window.close();//将当前页面关闭
window.open(href);//新开一个页面，url为当前页面
};
navigator.onerror = function () {
//当有错误发生时会onerror函数会被调用
console.log('桌面通知发生了错误');
};
navigator.onshow = function () {
//消息框显示时会被调用
console.log('桌面通知显示ing');
}
});
});
问题
- 本地打开的网页不会触发弹窗。因为chrome在记录弹窗权限的时候，会绑定到域名上
- 在服务器上，使用http发现页面不会弹出弹窗，有一个黄色的警告信息。
要使用这个必须要使用https进行配置。[Deprecation] The Notification API may no longer be used from insecure origins. You should consider switching your application to a secure origin, such as HTTPS. - 浏览器毕竟是依存在操作系统中，window设置中的通知模块，必须要允许chrome进行通知，我们才可以收到通知。
