【VUE】浏览器消息通知（声音提醒，标题栏闪动，弹框提醒）

思路：

• 浏览器通知使用Notification，详情可查看Notification.Notification()
• 标题栏闪动利用循环实现
• 声音提醒可以使用播放本地音频实现
  总结：在当前页面接收到消息时，声音提醒，当不在当前页面接收到消息时，声音+闪动+弹框提醒

实现：

//申请浏览器通知权限，具体参见上面文档链接
notification(){
      let that=this;
      if (!("Notification" in window)) {
        console.log("浏览器不支持消息通知");
        return;
      }
      Notification.requestPermission(function (permission) {});
}

//当需要通知时

//声音提醒 
   that.$refs.audioTip.load();
   that.$refs.audioTip.play();
 //如果不是当前页面，标题栏闪动+消息提示
      if(document.hidden){
        var options = {
          body: '您有新的未读消息，请及时处理',
          silent: true
        }
        var notification = new Notification('消息通知', options);
        notification.onclick=function(){
          window.open(`页面链接`, '_blank');
        }
          //标题栏闪动
          var defaultTitle = document.title;
          if(that.isReceive){
            return;
          }else{
            that.isReceive=true;
          }
          that.timer=setInterval(function(){
              var title = document.title;
              if (document.hidden&&that.isReceive) {
                  if (/你有新消息/.test(title) == false) {
                      document.title = '【你有新消息】';    
                  } else {
                      document.title = defaultTitle;
                  }
              } else {
                  that.isReceive=false;
                  document.title = defaultTitle;
              }
            }, 500);
      }

本地音频参见【VUE】播放本地语音/音频

 watch: {
    isReceive(current, old){
      let that=this;
      if(!current){
        clearInterval(that.timer);    //停止
      }
    }
  },

问题：

• document.hidden判断是否在当前页面，也可以使用window.onfocus ，但是我看到说window.onfocus 有时会错误触发HTML5 Notification实现浏览器通知
• silent: true 处理Notification的默认自带声音
• notification.onclick点击后可以跳转到想去的页面
• document.title获取当前的标题栏
• 如果当前已经在setInterval，就没有必要再次setInterval，所以定义了一个变量isReceive来控制是否重复循环