CODEWITHSUNDEEP
htmlnotifications
davidpaquipalla
davidpaquipalla

Reputation: 183

HTML5 Desktop notifications

I am dealing with desktop notifications on HTML5. My problem is on Firefox (on Chrome is fine), there I cann't throw more than 1 notification.

//Requestion permissions blablabla
if (permission === "granted") {
     var notification = new Notification(id, opt, null);
     var notification2 = new Notification(id, opt, null);
     var notification3 = new Notification(id, opt, null);
}

This doesn't work on Firefox, if I comment the last ones, works. Somebody know if I can do this

Upvotes: 2

Views: 2667

Answers (1)

Giuseppe Bertone
Giuseppe Bertone

Reputation: 2244

Many aspects of displaying notifications are up to browsers, but in particular in this case you need to show more then one notification at the same time you can set a different "tag" attribute to each notification (http://www.w3.org/TR/notifications/#tags-example). If you don't specify a tag, the default one is used and the last notification "wins" over the previous ones.

Check this example:

<button id="authorize">Authorize notification</button>
<button id="show">Show notification</button>
<button id="show_another">Show another notification</button>

<script>
function authorizeNotification() {
    Notification.requestPermission(function(perm) {
        alert(perm);
    });
}
function showNotification(myTag) {
    var notification = new Notification("This is a title with tag " + myTag, {
        dir: "auto",
        lang: "",
        body: "This is a notification body with tag " + myTag,
        tag: myTag,
    });
}
document.querySelector("#authorize").onclick = authorizeNotification;
document.querySelector("#show").onclick = function(){ showNotification("firstTag"); };
document.querySelector("#show_another").onclick = function(){ showNotification("secondTag"); };
</script>

If you click "show notification" many times, the notification is closed and a new one is opened. Using the second button a new notification is shown without closing the old one.

You can find a working sample at JSFiddle (http://jsfiddle.net/TuJHx/350/)

Upvotes: 7

Related Questions