使用Notification的流程
1.检查浏览器是否支持Notification
2.检查浏览器的通知权限
3.如果权限不够则申请获取权限
4.创建消息通知
5.展示消息通知
Notification API
构造方法
let notification = new Notification(title, options)
参数
title: 通知的标题
options:
dir : 文字的方向;它的值可以是 auto(自动), ltr(从左到右), or rtl(从右到左)
lang: 指定通知中所使用的语言
body: 通知中显示的内容
tag: 赋予通知一个ID,以便在必要的时候对通知进行刷新、替换或移除
icon: 一个图片的URL,将被用于显示通知的图标
静态属性
Notification.permission
一个用于表明当前通知显示授权状态的字符串。可能的值包括:denied (用户拒绝了通知的显示), granted (用户允许了通知的显示), 或 default (因为不知道用户的选择,所以浏览器的行为与 denied 时相同)。
事件
Notification.onclick:每当用户点击通知时被触发。
Notification.onshow:当通知显示的时候被触发。
Notification.onerror:每当通知遇到错误时被触发。
Notification.onclose:当用户关闭通知时被触发。
方法
1.静态方法
Notification.requestPermission()
用于当前页面向用户申请显示通知的权限。
2.实例方法
Notification.close()
用于关闭通知。
其它实例方法暂时用不上。
栗子🌰
if (!("Notification" in window)) {
alert("浏览器不支持")
} else if (Notification.permission === "granted") {
this.showNotice()
} else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
if (permission === "granted") { // 如果用户同意,就可以向他们发送通知
this.showNotice()
}
})
}
showNotice () {
let myNotification = new Notification('标题区域', {
body: '内容区域',
icon: '图标链接'
})
myNotification.onclick = () => {
console.log('通知被点击')
}
},
来源:oschina
链接:https://my.oschina.net/u/4291402/blog/3190521