Notification 浏览器桌面通知的使用

一、Notification

• Notification是HTML5新增的API，用于想用户配置和现实桌面通知。这些通知的外观和特定功能因平台而异。
• Notification通知是脱离浏览器的，即使用户没有停留在当前的标签页，甚至最小化了浏览器，也会在主屏幕的右下角显示通知，然后过一段时间后消失。
• Notification在操作中也可以监听通知的显示，点击，关闭等事件。

二、例子

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

// 判断浏览器是否支持Notification if (window.Notification) {     switch (Notification.permission) {         case 'default':             alert('用户暂未开启该网站消息通知');             defaultPermission();             break;         case 'granted':             alert('用户已开启该网站消息通知');             showNotification();             break;         case 'denied':             alert('用户拒绝该网站消息通知');             break;     } } else {     alert('暂不支持消息通知'); }   function defaultPermission() {     Notification.requestPermission().then(permission => {         switch (permission) {             case 'default':                  break;             case 'granted':                 showNotification();                 break;             case 'denied':                 alert('用户还是拒绝了该网站消息通知');                 break;         }     }); }   function showNotification() {     new Notification('我是消息通知！'); }

 

注意：如果第一次在域名控制台中执行上述代码，会提示你是否开启通知。如果开启过，就会自动显示通知。
注意：如果之前在域名中禁止消息通知，可以自己手动在开启，Notification是不能在禁止状态下代码设计开启消息通知的。

用户拒绝显示通知：

一旦用户禁止网站显示通知，网站就不能再请求用户授权显示通知，需要用户去设置中更改。

已谷歌为例，在浏览器设置中，开始添加或者开始网站的消息通知。不同的浏览器通知设置的地方不太一样。

 三、Notification检测权限

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// 判断浏览器是否支持Notification if (window.Notification) {     switch (Notification.permission) {         case 'default':             alert('用户暂未开启该网站消息通知');             break;         case 'granted':             alert('用户已开启该网站消息通知');             break;         case 'denied':             alert('用户拒绝该网站消息通知');             break;     } } else {     alert('暂不支持消息通知'); }

 

为了避免网站滥用通知扰民，在向用户显示通知之前，需要经过用户同意。

Notification.permission 用于表明当前通知显示的授权状态,它有三个值：

1. default: 默认值，用户还未选择
2. granted: 用户允许该网站发送通知
3. denied: 用户拒绝该网站发送通知

   

四、Notification请求权限

1 2 3 4 5 6 7 8 9 10 11 12 13

Notification.requestPermission().then(permission => {     switch (permission) {         case 'default':             alert('用户关闭了授权');             break;         case 'granted':             alert('用户同意授权')             break;         case 'denied':             alert('用户还是拒绝了该网站消息通知');             break;     } });

 

  

五、Notification推送通知

当Notification.permission为granted时 ，请求到用户权限之后，不必立即发送通知，可以在任意时刻，以任意形式来发送通知。

1 2 3 4 5 6 7

onst title = '这是自定义消息通知'; const options = {     body: 'body：字符串。通知的body内容。',     dir: 'auto',     icon: 'http://cdn.duitang.com/uploads/item/201410/21/20141021130151_ndsC4.jpeg' }; const notification = new Notification(title, options);

 

Notification的参数：

1. title：消息通知标题

2. options：

• body 只读 在构造函数的options参数中指定的通知的正文字符串。
• data 只读 返回通知数据的结构化克隆。
• dir 只读 通知的文本方向，在构造函数的options参数中指定。
• lang 只读 在构造函数的options参数中指定的通知的语言代码。
• tag 只读 在构造函数的options参数中指定的通知的ID（如果有）。
• icon 只读 在构造函数的options参数中指定的用作通知图标的图像的URL 。
• image 只读 要在通知中显示的图像的URL，在构造函数的options参数中指定。
• renotify 只读 指定在新通知替换旧通知后是否应通知用户。
• requireInteraction 只读 甲Boolean指示通知应该保持有效，直到用户点击或将其关闭，而不是自动关闭。
• silent 只读 指定通知是否应该保持静音-即，无论设备设置如何，都不会发出声音或振动。
• timestamp 只读 指定创建或适用通知的时间（过去，现在或将来）。
• title 只读 在构造函数的第一个参数中指定的通知的标题。
• vibrate 只读 为带有振动硬件的设备指定振动模式。