Implementing HTML5 Desktop Notification -Tutorial Savvy

HTML5 provides desktop notification API for use by the developer to generate notification.
In this demo, “We will learn to create a desktop notification using HTML5 API”.
A desktop notification object is created using Notification() class with new keyword.
In this demo we have created a button for subscribing notification.When user click on the button browser asked for permission.If user allows the notification then the permission becomes granted.If user blocking it then permission becomes denied.
We can check the support of Notification in the browser by detection Notification property presence in Window object.
We can also check the support of notification using Can I use online tool.The following screenshot is taken from can I use online tool as of today.The screenshot shows the support of notification API by different browsers.

The HTML code for rendering a button is as follows:

<button onclick="notifyMe()">
 Subscribe TutorialSavvy Notification
</button>

The JavaScript code for requesting permission and generating notification are as follows.

document.addEventListener('DOMContentLoaded', function () {
  if (Notification.permission !== "granted"){
     Notification.requestPermission();
  }
});

function notifyMe() {

  if (!Notification) {
    alert('Desktop notifications not available in your browser.'); 
    return;
  }
  if (Notification.permission !== "granted")
    Notification.requestPermission();
  else {
    var notification = new Notification('TutorialSavvy Notification', {
      icon: 'http://www.tutorialsavvy.com/wp-content/uploads/2015/02/favicon.png',
      body: "Hey there! Welcome TutorialSavvy Site",
      tag :'Example'
    });

    notification.onclick = function () {
      window.open("http://www.tutorialsavvy.com/");      
    };  
  }
}