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('用户拒绝通知');
    }
});

二、弹窗

1、显示弹窗

let myNotification = new Notification(title, options);

2、参数

2.1、title

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

2.2、options(可选)

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

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浏览器为例：

三、示例地址

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

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

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

欢迎评论留言!