Search code examples
htmlgoogle-chromewebkitnotificationshtml5-notifications

Webkit Notifications on Multiple Tabs


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?


Solution

  • 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!");
        }
      });
    });