javascript - 多个 HTML5 桌面通知未显示

Question

在 Chrome 中，一切正常(同时显示多个通知)。但是在 Firefox 中，当有多个通知时，不会显示任何通知。请查看 fiddle 演示:

http://jsfiddle.net/e6ps2/3/

场景:我有一个循环读取要显示为通知的事物数组。

我开始使用 Notify.js，它是通知 api 的一个很好的 javascript 包装器。我认为问题可能与此有关。然后我尝试直接使用 api，问题仍然存在。

因此，如果可能的话，我想将通知层层叠叠(这是应该发生的方式 - 并且确实发生在 Chrome 中)。但一个可能的回退是将通知排队并使用 notify.js notifyClose() 回调函数打开队列中的下一个通知 - 但不知道如何执行此操作。

if (Notify.isSupported()) {
    //Notify wrapper Notifications
     if (Notify.needsPermission()) Notify.requestPermission();
     //var j = 1; //uncomment this for single notification
     var j = 2;
     for (var i=0;i<j;i++) {
          var my_notification = new Notify('Hello World ' + i, {
                                    body: 'Some message here ' + i,
                                    tag:  "notify_" + i
                                });


         //uncomment below to show the notify plugin html5 notifications and then comment out the bare bones one
         //my_notification.show();

         //HTML5 bare nones  Notifications
         var notification = new Notification("Hi there! " + i, {
                                body: 'Some message here ' + i,
                                tag:  "Hello_"+ i
                            });

     }  
} else {alert("not supported"); }

希望这一切都有意义。

谢谢

Answer 1

对于第一个问题......如果没有获得许可，你需要在请求许可时给予回调以触发。将发送代码移动到一个函数中，允许它被独立调用，或者作为回调

if (Notify.needsPermission()) {
    Notify.requestPermission(queueNotifications);
} else {
     queueNotifications();   
}

关于排队...我遇到过类似的问题，Firefox 的实现与 Chrome 相比很差。不过，可以使用以下方法对通知进行排队:

• 创建时间间隔变量
• 使用 Notification onshow 事件，设置超时时间以隐藏通知

• 将通知的发送移动到一个单独的函数中，该函数可以通过 for 循环内的超时调用

  if (Notify.isSupported()) {
  var 
  showTimeout,
  displayTime = 5000,
  queueNotifications = function(){
      var i,
      j = 3;
      for (i=0;i<j;i++) {
          setTimeout(sendNotifications, displayTime*i, i);
      }
  },
  sendNotifications = function(i){
      var
      hideTimeout,
      onShow = function(){
          var $this = this;
          hideTimeout = setTimeout(function(){
              $this.close();
          }, displayTime);
      },
      my_notification = new Notify('Hello World ' + i, {
          body: 'Some message here ' + i,
          tag:  "notify_" + i
      });
  
      my_notification.onShowNotification = onShow;
      my_notification.show();
  }
  
  if (Notify.needsPermission()) {
      Notify.requestPermission(queueNotifications);
  } else {
       queueNotifications();   
  }
  

我已经用工作版本更新了你的 jsfiddle。 http://jsfiddle.net/e6ps2/5/

干杯，丹