• 0
  • 0

h5 网页通知

2020-04-29 77 0 admin 所属分类:HTML

Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息。该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来。

如果用的是Chrome浏览器的新版本,则必须是https协议

① 用户权限获取

想要向用户显示通知消息,需要获取用户权限,而相同的域名只需要获取一次权限。只有用户允许的权限下,Notification 才能起到作用.

 Notification.permission  属性 值
 default  不知道用户的选择,默认
 granted  用户允许
 denied 用户拒绝
if (Notification.permission === 'granted') {
    console.log('用户允许通知');
} else if (Notification.permission === 'denied') {
    console.log('用户拒绝通知');
} else {
    console.log('用户还没选择,去向用户申请权限吧');
}

② 请求权限

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

③ 推送通知

获取用户授权之后,就可以推送通知了。

var notification = new Notification(title, options)

 options:通知的设置选项(可选)   含义 
  body 通知内容
  tag 代表通知的一个识别标签,相同tag时只会打开同一个通知窗口
  icon 要在通知中显示的图标的URL
 image 要在通知中显示的图像的URL
 data 想要和通知关联的任务类型的数据 点击通知回调的参数
 requireInteraction 通知保持有效不自动关闭,默认为false

//判断浏览器是否支持Web Notifications API
function suportNotify() {
    if (window.Notification) {
        // 支持
        console.log("支持" + "Web Notifications API");
        //如果支持Web Notifications API,再判断浏览器是否支持弹出实例
        // showMess()
    } else {
        // 不支持
        console.log("不支持 Web Notifications API");
    }
}
//判断浏览器是否支持弹出实例
function showMess(data) {
    setTimeout(function() {
        console.log('1:' + Notification.permission);
        //如果支持window.Notification 并且 许可不是拒绝状态
        if (window.Notification && Notification.permission !== "denied") {
            //Notification.requestPermission这是一个静态方法,作用就是让浏览器出现是否允许通知的提示
            Notification.requestPermission().then(function(permission) {
                if (permission === "granted") {
                    var m = new Notification('有新的消息', {
                        body: data && data.msg ? data.msg : '您当前有一个消息通知,请注意想查看',
                        tag: 'tag',
                        data: data,
                        icon: "/icon/notice.png"   //消息图片
                    });
                    m.onclick = function() { //点击当前消息提示框后,跳转到当前页面
                        if (m.data) {
                            window.open('你的连接地址', '_blank');
                        }
                    }
                    setTimeout(function() {
                        m.close();
                    }, 5000);
                } else {
                    alert('当前浏览器不支持弹出消息')
                }
            });
        }
    }, 1000)
}

④ 关闭通知

如果想定时删除通知可以如下操作

setTimeout(function() {
    m.close();
}, 3000);

⑤ 点击事件处理

m.onclick = function() {
   //你的点击处理
}


返回顶部