web Notification 桌面提示

web Notification 桌面提示

1.注册Notification.permission 网页授权

//当值为default或者denied时都不会显示通知消息，只有明确的被设置成granted才会显示通知消息
if(Notification.permission=== 'granted'){
    console.log('已经授权通知，可以进行你的通知啦！');
}else{
    console.log('用户还未授权，请先授权！');
}

2.实例化new Notification 然后桌面提示

 var notification = new Notification("您有新的消息待处理：", {
                body: '欢迎使用百度',
				icon: 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3832721317,312397218&fm=26&gp=0.jpg',
				//这里可以定义很多你想要的数据
				data: {
                    url: 'https://www.baidu.com/'
                  },
            });  

3.事件回调 notification

        // 点击页面提示后的回调函数
         notification.onclick = function (e) {
            //可以直接通过实例的方式获取data内自定义的数据
            //也可以通过访问回调参数e来获取data的数据
            window.open(notification.data.url, '_blank');
            notification .close();
        }
        //关闭页面提示后的回调函数
        notification.onclose = function () {
            console.log('关闭页面');
        }
        //报错函数
        notification.onerror = function (err) {
            console.log('报错');
            throw err;
        }