轻松让HTML5可以显示桌面通知Notification非常实用

使用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()

用于关闭通知。

其它实例方法暂时用不上。

栗子

 1       if (!("Notification" in window)) {
 2         alert("浏览器不支持")
 3       } else if (Notification.permission === "granted") {
 4         this.showNotice()
 5       } else if (Notification.permission !== 'denied') {
 6         Notification.requestPermission(function (permission) {
 7           if (permission === "granted") {  // 如果用户同意，就可以向他们发送通知
 8             this.showNotice()
 9           }
10         })
11       }
12       showNotice () {
13         let myNotification = new Notification('标题区域', {
14           body: '内容区域',
15           icon: '图标链接'
16         })
17         myNotification.onclick = () => {
18           console.log('通知被点击')
19         }
20       },

转载请注明来源: 我的007办公资源网https://www.wode007.com