一、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
|
// 判断浏览器是否支持Notificationif (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
|
// 判断浏览器是否支持Notificationif (window.Notification) { switch (Notification.permission) { case 'default': alert('用户暂未开启该网站消息通知'); break; case 'granted': alert('用户已开启该网站消息通知'); break; case 'denied': alert('用户拒绝该网站消息通知'); break; }} else { alert('暂不支持消息通知');} |
为了避免网站滥用通知扰民，在向用户显示通知之前，需要经过用户同意。
Notification.permission 用于表明当前通知显示的授权状态,它有三个值：
- default: 默认值，用户还未选择
- granted: 用户允许该网站发送通知
- 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 只读 为带有振动硬件的设备指定振动模式。