vue浏览器消息提示

vue浏览器消息提示

JS部分

//判断浏览器是否支持浏览器消息弹窗
suportNotify() {
        if (window.Notification) {
          // 支持
          console.log("支持" + "Web Notifications API");
          //如果支持Web Notifications API，再判断浏览器是否支持弹出实例
          this.showMess(event)
        } else {
          // 不支持
          this.$notify("不支持 Web Notifications API");
        }
},
// 唤起浏览器弹框 前提浏览器得允许弹框通知显示
showMess() {
        var that =this
        setTimeout(function() {
          console.log('1：' + Notification.permission);
          //如果支持window.Notification 并且 许可不是拒绝状态
          if (window.Notification && Notification.permission !== "denied") {
            //Notification.requestPermission这是一个静态方法，作用就是让浏览器出现是否允许通知的提示
            Notification.requestPermission(function(status) {
              //如果状态是同意
              if (status === "granted") {
                var m = new Notification('测试标题', {
                  body: '测试内容', //消息体内容
                  icon: '测试icon' //消息图片
                });
                //点击当前消息内容
                m.onclick = function() { //点击当前消息提示框后，跳转到当前页面
                  that.$router.push({path:'/Reception/chatpage'})
                  window.focus();
                },
                //点击关闭消息提示框
                m.onclose = function(){
                  m.close()
                }
              } else {
                that.$notify('当前浏览器不支持弹出消息')
              }
            });
          }
        }, 1000)
 },

效果图展示