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

2024年5月3日 238次阅读 来源: 聪明努力的积极向上

思路：

  • 浏览器通知使用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来控制是否重复循环
    原文作者：聪明努力的积极向上
    原文地址: https://blog.csdn.net/weixin_38792911/article/details/110389306
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞