实现的效果如下:
不同的浏览器,不同的PC设备显示的样式各有千秋。
windows:chrome浏览器
windows:360极速浏览器
MacOs:Chrome浏览器
如何使用Notification ?
1.检查当前浏览器是否支持Notification Api
if (!('Notification' in window)) {
return this.$noticeTips.error(this.$t('当前浏览器不支持通知'))
}
2.检查权限
发送通知需要用户授权,通过只读属性 Notification.permission 获取是否有权限,其属性值有
- granted:用户已明确授权显示通知的权限
if (window.Notification.permission === 'granted') {
//do something
}
- denied:用户已明确拒绝显示通知的权限
if (window.Notification.permission === 'denied') {
this.$noticeTips.error(this.$t('通知权限尚未开启'))
}
- default:用户还未被询问是否授权
通过 Notification.requestPermission 去申请权限
if (window.Notification.permission === 'default') {
window.Notification.requestPermission((res) => {
console.log('Notification.requestPermission', res)
})
}
此时浏览器会弹窗询问你是否授权
允许:res会打印 granted 表示已授权
禁止:res会打印 denied 表示已拒绝
X号: res会打印 default 下次还会弹窗询问你
3.创建通知
通过 new Notification("title", options) 创建一条通知其中title是必填参数,使用 options 对通知做一些自定义设置,包含
不同浏览器的实现样式略有不同,js代码不能控制具体的位置和样式,可以确定标题,内容,和一个系统icon。对于chrome浏览器,一般几秒钟后会被自动关闭,其他浏览的各个版本实现各有不同
当通知创建后会被立即显示出来,过一段时间会自动关闭,包含 4 个事件
- onshow:当通知显示时触发
- onclick:当用户点击通知后触发(点击后通知会被关闭)
- onclose:当使用 notice.close.bind(notice) 关闭通知后触发(自动关闭的通知无法触发)
- onerror:当通知无法显示给用户时触发(常见于没有用户没有授权)
Notifications API 兼容性如下
Notifications API - Web API 接口参考 | MDN
完整代码如下:
Notification.requestPermission((res) => {
if (res !== 'granted') return // 未授权通知
const notice = new Notification('J&T Notification', {
body: `${_this.$t('您刚刚收到一条新通知,单击即可立即查看')}`,
icon: noticeImg,
renotify: false, // 重复的 tag 是否再次通知,默认 false 不重复通知
requireInteraction: false, // 是否强制手动关闭,默认 false 会自动关闭
silent: false, // 是否静音
image: noticeImg
})
notice.onshow = function () {
console.log('show')
setTimeout(notice.close.bind(notice), 5000) //五秒后自动关闭
}
notice.onclick = function () {
//do something
}
notice.onclose = function () {
console.log('close')
}
notice.onerror = function () {
console.log('error')
}
})