Question

在Chrome中，工作正常（多个通知同时显示）。但是在Firefox中有多个通知时会显示NONE。请参阅小提琴演示：

场景：我有一个循环，可以读取要显示为通知的一系列内容。

我开始使用Notify.js一个很好的javascript包装器来通知api。我认为问题可能与此有关。然后我尝试直接使用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();   
}

关于排队......我有类似的问题，与Chromes相比，Firefox的实施很差。不过，通知可以使用以下方法排队：

创建时间间隔变量
使用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/

干杯，丹

Answer 2

如果您设置选项'requireInteraction：true'，它会为您堆叠通知，它们不会默认自动消失，但您可以使用以下内容隐藏它们。

setTimeout(notification.close.bind(notification), 5000);

多个HTML5桌面通知未显示

2 个答案: