之前试了很多方法都不能用,chrome和Firefox都是无效状态,但是360浏览器却坚强的存活着(敬畏之心油然而生)

后来发现是因为Windows 10 有一个通知盒子
微信截图_20190826180712.jpg
导致推送的通知都收录到盒子里了,并没有对外展示,调整一番Windows后,在Chrome下可以正常访问,但是Firefox至今仍没有调试成功,貌似需要 ServiceWorker去执行,但是各个浏览器对 ServiceWorker兼容性都不是很好,还行测试

首先要向用户获取通知权限,如果没有通知权限,则通知无效

然后获取到通知权限后,推送消息

 test=()=>{

    var NotificationHandler = {
      isNotificationSupported: 'Notification' in window,
      isPermissionGranted: function () {
        return Notification.permission === 'granted';
      },
      requestPermission: function () {
        //验证浏览器是否支持Notification,如果不支持打印提示信息并返回
        if (!this.isNotificationSupported) {
          console.log('当前浏览器不支持Notification API');
          return;
        }
        //该方法将会询问用户是否允许显示通知,不能由页面调用(onload),必须由用户主动事件触发(onclick等)
        //当用户同意之后,再次调用该方法则无效,即该方法仅对Notification.Permission不为'granted'的时候起作用
        Notification.requestPermission(function (status) {
          //status是授权状态,如果用户允许显示桌面通知,则status为'granted'  
          console.log('status: ' + status);
          //permission只读属性:  
          //    default 用户没有接收或拒绝授权 不能显示通知  
          //    granted 用户接受授权 允许显示通知  
          //    denied  用户拒绝授权 不允许显示通知  
          var permission = Notification.permission;
          console.log('permission: ' + permission);
        });
      },
      showNotification: function () {
        if (!this.isNotificationSupported) {
          console.log('当前浏览器不支持Notification API');
          return;
        }
        if (!this.isPermissionGranted()) {
          console.log('当前页面未被授权使用Notification通知');
          return;
        }

        var n = new Notification("您有一条新消息", {
          icon: 'cat.jpg',
          body: '请五分钟后到老总办公室领取本年度奖金!'
        });

        //onshow函数在消息框显示时会被调用  
        //可以做一些数据记录及定时操作等  
        n.onshow = function () {
          console.log('显示通知信息');
          //5秒后自动关闭消息框  
          setTimeout(function () {
            n.close();
          }, 5000);
        };

        //消息框被点击时被调用  
        //可以打开相关的视图,同时关闭该消息框等操作  
        n.onclick = function () {
          alert('打开相关视图');
          //opening the view...  
          n.close();
        };

        //当有错误发生时会onerror函数会被调用  
        //如果没有granted授权,创建Notification对象实例时,也会执行onerror函数  
        n.onerror = function () {
          console.log('产生错误');
          //do something useful  
        };

        //一个消息框关闭时onclose函数会被调用  
        n.onclose = function () {
          console.log('关闭通知窗口');
          //do something useful  
        };
      }
    };
    //此处无效,不能由页面调用(onload)
    document.addEventListener('load', function () {
      NotificationHandler.requestPermission();
    });
    setTimeout(function () {
      //if there has new mail, show notification  
      NotificationHandler.showNotification();
    }, 3000);

    NotificationHandler.showNotification()
     
  }

参考链接
MDN notification
MDN WEB_PUSH_API