Webkit Notifications on Multiple Tabs

Question

I am using WebKit Notifications for my app. Say if I am using this code:

var n = window.webkitNotifications.createNotification(
   'icon.png',
   'New Comment',
   'Praveen commented on your post!'
);
n.onclick = function(x) { window.focus(); this.cancel(); };
n.show();

PS 1: The first five lines are actually a single line. Just for readability I have posted this way.

PS 2: For the full code, please see this: Unable to show Desktop Notifications using Google Chrome.

My question is, what if I have more than one tab opened?

Say if this is gonna get fired when a new comment appears on my app. What if I have more than one tab open? Will this generate many notifications? Say, I have 10 - 15 tabs open and I get two notifications fired. How many notifications will be generated, 20 - 30?

If that is the case, how to prevent generation of a single notification multiple times for each opened tab?

ddnt even know about this functionality, lol, gonna go look into it! — SpYk3HH, Nov 11 '12 at 16:03
Try it out buddy. It is awesome! :) Check out my linked question for the way I implemented it! :) — Praveen Kumar Purushothaman, Nov 11 '12 at 16:04
I'm also looking for an answer to this. Did you get to any solution? — CIF, May 09 '13 at 17:15
Were you able to find a solution for your problem? I'm in exactly same place now :( Tried the solution in answer but it doesn't work giving an error in firebug - `ReferenceError: Notification is not defined [Break On This Error]` `var notification = new Notification('Hey!', {` — Fr0zenFyr, Oct 11 '13 at 12:49
It's very bad to see that nobody in this vast SO community knows a solution for it. — Fr0zenFyr, Oct 14 '13 at 04:56

score 25 · Answer 1 · answered Jun 26 '13 at 07:30

25

You just need to specify "tag" option for notification. Notifications with the same value in tag only shows once even if many tabs are opened.

For example:

var notification = new Notification('Hey!', {
    body : 'So nice to hear from you',
    tag : 'greeting-notify',
    icon : 'https://mysite.com/my_funny_icon.png'
});

answered Jun 26 '13 at 07:30

Alexander Vorobyov

261
3
3

Oh. Nice. Lemme check it out and let you know. Thanks for answering. – Praveen Kumar Purushothaman Jun 26 '13 at 07:31
this isn't a webkit notification it's safari's version of a notification which has a tagging method but i you notice they define theirs with an object with methods where as the other is an array of values. I also have no found an answer to this. – btm1 Mar 06 '14 at 21:40
5

This is useful. But it shows flickering of notifications. Is there any way to prevent flickering? – Mohammad Kashif Sulaiman Nov 19 '16 at 06:57
This didn't work for me on firefox Did adding a tag actually solve this problem for you in safari ? – eran otzap Feb 21 '17 at 10:18

score 8 · Accepted Answer · answered Apr 14 '14 at 16:28

A detailed explanation of Tagging notifications so only the last one appears is available on the MDN docs site

An excerpt of the code [just in case the docs go down]

The HTML

<button>Notify me!</button>

The JS

window.addEventListener('load', function () {
  // At first, let's check if we have permission for notification
  // If not, let's ask for it
  if (Notification && Notification.permission !== "granted") {
    Notification.requestPermission(function (status) {
      if (Notification.permission !== status) {
        Notification.permission = status;
      }
    });
  }

  var button = document.getElementsByTagName('button')[0];

  button.addEventListener('click', function () {
    // If the user agreed to get notified
    // Let's try to send ten notifications
    if (Notification && Notification.permission === "granted") {
      for (var i = 0; i < 10; i++) {
        // Thanks to the tag, we should only see the "Hi! 9" notification
        var n = new Notification("Hi! " + i, {tag: 'soManyNotification'});
      }
    }

    // If the user hasn't told if he wants to be notified or not
    // Note: because of Chrome, we are not sure the permission property
    // is set, therefore it's unsafe to check for the "default" value.
    else if (Notification && Notification.permission !== "denied") {
      Notification.requestPermission(function (status) {
        if (Notification.permission !== status) {
          Notification.permission = status;
        }

        // If the user said okay
        if (status === "granted") {
          for (var i = 0; i < 10; i++) {
            // Thanks to the tag, we should only see the "Hi! 9" notification
            var n = new Notification("Hi! " + i, {tag: 'soManyNotification'});
          }
        }

        // Otherwise, we can fallback to a regular modal alert
        else {
          alert("Hi!");
        }
      });
    }

    // If the user refuses to get notified
    else {
      // We can fallback to a regular modal alert
      alert("Hi!");
    }
  });
});

Webkit Notifications on Multiple Tabs

2 Answers2

Linked