一、Notification
- Notification是HTML5新增的API，用于想用户配置和现实桌面通知。这些通知的外观和特定功能因平台而异。
- Notification通知是脱离浏览器的，即使用户没有停留在当前的标签页，甚至最小化了浏览器，也会在主屏幕的右下角显示通知，然后过一段时间后消失。
- Notification在操作中也可以监听通知的显示，点击，关闭等事件。
二、例子，你试试
// 判断浏览器是否支持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检测权限
// 判断浏览器是否支持Notification if (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请求权限
Notification.requestPermission().then(permission => { switch (permission) { case 'default': alert('用户关闭了授权'); break; case 'granted': alert('用户同意授权') break; case 'denied': alert('用户还是拒绝了该网站消息通知'); break; } });
当Notification.permission为default的时候，我们需要使用Notification.requestPermission()来请求用户权限。 Notification.requestPermission()基于promise语法，then的回调函数参数是用户权限的状态Notification.permission的值。
五、Notification推送通知
当Notification.permission为granted时，请求到用户权限之后，不必立即发送通知，可以在任意时刻，以任意形式来发送通知。
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 只读 为带有振动硬件的设备指定振动模式。
六、Notification事件处理
- click：用户点击通知时被触发
- show：通知显示的时候触发
- error：通知遇到错误的时候触发
- close：通知被关闭的时候触发
const 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.onclick = e => { alert(1); } notification.onclose = e => { alert(2); } notification.onshow = e => { alert(3); } notification.onerror = e => { alert(4); }
七、Notification使用场景
- 即时通讯的软件中可以使用，如邮件通知。聊天的通知。
- 结果通知，如福利彩票结果通知。
- 新闻通知，如新闻网站的新闻通知。
- 网站更新，如在系统进行了迭代更新，可以进行通知。
八、示例完整代码
<template> <div> <button @click="grantedPermission">弹出消息</button> </div> </template> <script type="text/javascript"> export default { data() { return { } }, created() { // 判断浏览器是否支持Notification if (window.Notification) { switch (Notification.permission) { case 'default': this.defaultPermission(); break; case 'granted': this.grantedPermission(); break; case 'denied': alert('用户拒绝该网站消息通知'); break; } } else { alert('暂不支持消息通知'); } }, methods: { /** * [defaultPermission 当用户拒绝消息通知时，可以询问用户是否开启消息通知] * @version [1.0] */ defaultPermission() { Notification.requestPermission().then(permission => { switch (permission) { case 'default': break; case 'granted': this.grantedPermission(); break; case 'denied': alert('用户还是拒绝了该网站消息通知'); break; } }); }, /** * [grantedPermission 运行消息通知状态，可以向发起消息通知] */ grantedPermission() { const 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.onclick = e => { alert(1); } notification.onclose = e => { alert(2); } notification.onshow = e => { alert(3); } notification.onerror = e => { alert(4); } } } } </script>
九、最大问题
目前Notification除了IE浏览器不支持外, 其他浏览器都已支持桌面通知，移动端浏览器基本都未支持。
