CODEWITHSUNDEEP
javascriptgoogle-chromefirefoxnotifications
Depado
Depado

Reputation: 4929

Chrome doesn't close the notification

I'm currently using this implementation to use Browsers based Notifications :
https://developer.mozilla.org/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.org/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.

Upvotes: 5

Views: 8387

Answers (2)

Niang Moore
Niang Moore

Reputation: 506

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"
                            };

Upvotes: 0

Depado
Depado

Reputation: 4929

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)

Upvotes: 13

Related Questions