js浏览器消息通知接口Notification

html:

浏览器消息测试

js:

     //浏览器消息推送
      chromeMessageBtn(){
        this.createNotify('测试通知',{body:'您收到一条新信息！',sticky:'true'})
      },
      createNotify(title,options) {
        var PERMISSON_GRANTED = 'granted';
        var PERMISSON_DENIED = 'denied';
        var PERMISSON_DEFAULT = 'default';
        if (Notification.permission === PERMISSON_GRANTED) {
          setTimeout( ()=> {
            this.notify(title,options);
          },3000)
        } else {
            Notification.requestPermission(function (res) {
                if (res === PERMISSON_GRANTED) {
                    this.notify(title,options);
                }
            });
        }
      },
      notify($title,$options) {
        var notification = new Notification($title, $options);
        notification.onshow = function(event){ console.log('show : ',event); }
        notification.onclose = function(event){ console.log('close : ',event); }
        notification.onclick = function(event){ 
            notification.close();
        }
        noticeFactionMsg.show()
      }
 
 
   //浏览器标题闪烁通知 
    var noticeFactionMsg = {
      time: 0,
      title: document.title,
      timer: null,
      //显示新消息提示
      show: function () {
          var title = noticeFactionMsg.title.replace("", "").replace("【您有新消息】", "");
          //定时器，此处产生闪烁
          //由于定时器无法清除，在此调用之前先主动清除一下定时器打到缓冲效果，否则定时器效果叠加标题闪烁频率越来越快
          clearTimeout(noticeFactionMsg.timer);
          noticeFactionMsg.timer = setTimeout(function () {
              noticeFactionMsg.time++;
              noticeFactionMsg.show();
              if (noticeFactionMsg.time % 2 == 0) {
                  document.title = "【您有新消息】" + title
              } else {
                document.title = title
              };
          }, 300);
            return [noticeFactionMsg.timer, noticeFactionMsg.title];
        },
          //取消新消息提示
          //此处起名最好不要用clear，由于关键字问题有时可能会无效
      clears: function () {
          clearTimeout(noticeFactionMsg.timer);
          document.title = noticeFactionMsg.title;
      }
    }
  window.document.addEventListener("mouseover", noticeFactionMsg.clears);

还在技术调研中，以上方法浏览器提示需要https连接，可以先用localhost进行测试。原文参考

控制台

福音~ 本地起前端服务，将下面代码粘贴到html文件中，网址用localhost访问就能看到桌面弹窗效果。

    
        
        
        
        
    

    
        
notification
    
    

方案二：
title部分轮播显示字
【VUE】浏览器消息通知（声音提醒，标题栏闪动，弹框提醒）

如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！