Notification——HTML5桌面通知弹窗(你用过吗？点击测试地址体验一下吧)

内容介绍

Notification 向用户显示通知信息（即时用户不在当前标签页，或浏览器已经最小化），兼容性较差。

一、用户授权（相同域名只需用户授权一次）

1、获取授权信息

  Notification.permission

console.log(Notification.permission);
Notification.requestPermission().then(function(permission) {
     
    if (permission === 'granted') {
     
        console.log('用户允许通知');
    } else if (permission === 'denied') {
     
        console.log('用户拒绝通知');
    }
});

参数	说明
default	默认，不知用户选择
granted	用户允许
denied	用户拒绝

二、弹窗

1、显示弹窗

let myNotification = new Notification(title, options);

2、参数

2.1、title

通知标题，显示在通知窗口顶部

2.2、options(可选)

options对象包含应用于通知的任何自定义设置选项

参数	说明
dir	通知方向，默认auto，也可设置ltr(从左往右)和rtl(从右往左)
lang	通知语言
badge	通知的图像URL
body	通知正文，显示在标题下方
tag	通知的识别标签
icon	通知中显示的图标URL
image	要在通知中显示的图像URL
data	与通知相关联的任意数据
vibrate	支持振动的设备，通知时触发
renotify	新通知代替旧通知时是否通知用户
requireInteraction	表示通知应保持有效，直到用户点击或关闭它，而不是自动关闭。默认值为false
注：	以下为最新规范，所有浏览器均不支持
silent	指明通知是否应该是无声的,即,不需要发出声音或振动，无论设备设置如何。默认值为false，这意味着它不会保持静默
sound	包含通知触发时要播放的音频文件的URL
noscreen	指定通知触发是否应启用设备的屏幕。 默认值为false，这意味着它将启用屏幕
sticky	指明通知是否应该是“粘”, 即不易被用户清理。默认值为false，这意味着它不会粘

3、隐藏弹窗

Notification.close()

4、事件

4.1、onclick：点击时

Notification.onclick = function(event) {
     
    event.preventDefault(); 
    window.open('http://www.mozilla.org', '_blank');
}

4.2、onshow： 显示时

Notification.onshow = function(event) {
     
    console.log("触发show");
}

4.3、onclose：关闭时

Notification.onclose = function(event) {
     
    console.log("触发close");
}

4.4、onerror：异常时

Notification.onerror = function(event) {
     
    console.log("触发error");
}

5、环境

注：
  本地环境只有授权弹窗，没有通知弹窗，控制台显示以下提示，需要使用https

  如没有授权弹窗，需在浏览器中设置通知权限，chrome浏览器为例：

Created with Raphaël 2.2.0 设置 隐私设置和安全性 网站设置 权限 通知 添加域名 授权弹窗 yes

三、示例地址

示例地址：https://liujianwei695.gitee.io/phpsession/

---

标签：HTML5，通知弹窗，桌面通知，Notification

---

更多演示案例，查看 案例演示

---

欢迎评论留言!