Notification桌面消息通知

通过Notification实现桌面弹出浏览器消息对话框

浏览器最小化后展示电脑桌面级消息通知，避免由于最小化导致的消息查看不及时问题。

代码示例

descNotice({
id: id,
title: '桌面消息-' + id,
content: '这是一条桌面消息',
icon: 'http://assets.souche.com/shop/assets/sso/favicon.ico',
click() {
console.log('桌面消息点击')
},
close() {
console.log('桌面消息关闭')
},
error() {
console.log('桌面消息出错')
}
})

options

实现

const descNotice = (options = {}) => {
return new Promise(resolve => {
const { id, title, icon, content, click, error, close } = options
const Notification = window.Notification || window.mozNotification || window.webkitNotification
if(Notification){
Notification.requestPermission((status) => {
//status默认值'default'等同于拒绝 | 'denied' 意味着用户不想要通知 | 'granted' 意味着用户同意启用通知
if(status != 'granted') {
return
}
const notify = new Notification( title, {
dir:'auto',
lang:'zh-CN',
requireInteraction: true,
tag: id, // 实例化的notification的id
icon: icon, // "图标路径，若不指定默认为favicon"
body: content // 通知的具体内容
})
resolve()
notify.onclick = () => {
// console.log('HTML5桌面消息点击！！！')
window.focus()
notify.close()
click && click()
},
notify.onerror = function () {
// console.log('HTML5桌面消息出错！！！')
error && error()
}
notify.onclose = function () {
window.focus()
// console.log('HTML5桌面消息关闭！！！')
close && close()
}
})
}else{
console.log('您的浏览器不支持桌面消息')
}
})
}

最后

以上就是单薄雪碧为你收集整理的Notification桌面消息通知Notification桌面消息通知的全部内容，希望文章能够帮你解决Notification桌面消息通知Notification桌面消息通知所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。