I'm currently using this implementation to use Browsers based Notifications :

This works like a charm.

if ("Notification" in window) {
        if(Notification.permission === "granted") {
            if($('#notify-on-message').is(':checked')) {
                var notification = new Notification(username + ' : ' + data, {'icon': "/custom/favicon.gif"});
            }
            if ($('#notify-on-hl').is(':checked')) {
                var patt = new RegExp("(^|\\W)"+selfusername+"(\\W|$)");
                if(patt.test(data)) {
                    var notification = new Notification(username + ' highlighted you.', {'icon': "/custom/favicon.gif"});
                }
            }
        }
    }

The main issue I have is that on chrome based browsers, the notification just doesn't close itself after the 3 seconds delay.
It tried adding this after the var notification = ...

setTimeout(function() {
    notification.close();
}, 2000);

Though that doesn't change a single thing. The notification remains.
Is it a known issue ? Is there an easy way to fix this behaviour I don't want ?

EDIT 1: According to this page :

This is a known issue :

Note: Firefox and Safari close the notifications automatically after a few moments, e.g. 4 seconds.

This can also be done at the web application level using the Notification.close() method, for example with the following code:

var n = new Notification("Hi!");
n.onshow = function () { 
    setTimeout(n.close, 5000); 
}

Though that code doesn't work. There is an error in the console that says that the notification doesn't have the close method or something like that.

I'm currently using this implementation to use Browsers based Notifications :
https://developer.mozilla/en-US/docs/Web/API/Notification

This works like a charm.

if ("Notification" in window) {
        if(Notification.permission === "granted") {
            if($('#notify-on-message').is(':checked')) {
                var notification = new Notification(username + ' : ' + data, {'icon': "/custom/favicon.gif"});
            }
            if ($('#notify-on-hl').is(':checked')) {
                var patt = new RegExp("(^|\\W)"+selfusername+"(\\W|$)");
                if(patt.test(data)) {
                    var notification = new Notification(username + ' highlighted you.', {'icon': "/custom/favicon.gif"});
                }
            }
        }
    }

The main issue I have is that on chrome based browsers, the notification just doesn't close itself after the 3 seconds delay.
It tried adding this after the var notification = ...

setTimeout(function() {
    notification.close();
}, 2000);

Though that doesn't change a single thing. The notification remains.
Is it a known issue ? Is there an easy way to fix this behaviour I don't want ?

EDIT 1: According to this page :
https://developer.mozilla/en-US/docs/WebAPI/Using_Web_Notifications
This is a known issue :

Note: Firefox and Safari close the notifications automatically after a few moments, e.g. 4 seconds.

This can also be done at the web application level using the Notification.close() method, for example with the following code:

var n = new Notification("Hi!");
n.onshow = function () { 
    setTimeout(n.close, 5000); 
}

Though that code doesn't work. There is an error in the console that says that the notification doesn't have the close method or something like that.

• javascript
• google-chrome
• firefox
• notifications

2 Answers 2

Well actually I was wrong, the code

var message_notification = new Notification("Data");
setTimeout(function(){
    message_notification.close();
}, 3000); 

Works in both Firefox and Chrome. (And Safari too I guess)

Adding a tag to the option will close active popup before showing new once

                            var options = {
                                body: msg,
                                icon: "logo.png",
                                dir: "ltr",
                                tag: "group1"
                            };