思路:

  • 浏览器通知使用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来控制是否重复循环
Logo

前往低代码交流专区

更多推荐