HTML 5 Notification

  • Avinash
  • 9
  • Apr 02, 2012
  • Web Development

HTML 5 has already placed the steps into web developement. As usual with any new version we are expecting a new features. So here is the same case with HTML 5 as well. HTML 5 has come with lots of new APIs to work with to improve the user interaction with just HTML. Isn’t it interesting? HTML 5 can be worked well with CSS3.

So here I am starting the series of articles related to API introduces in HTML 5. There are several API like Geolocation, Notification, File, etc. Here is the first article is related Notification API.

First thing you need to keep in mind, HTML 5 features and API will work on supported browsers only. So if browser is not supporting the HTML 5 then you can’t do any thing except html5 sims if possible. Today I am exploring the notification API.

Please note that this article is written for the browsers with webkit engine like Google Chrome (Not Mozila Firefox).

What is HTML 5 Notification?

HTML 5 Notification is kind of notification which we can provide to user on certain events or even user is on another tab of the browser. This notifications can be useful for events like New Mail, New Tweet, etc.

How it works?

There are several steps to work with Notification API. First we need to take permission from the user to show notification or not. We can show notification only if user has given the permission for the same.

We can show notification only if user has given the permission for the same.

So for first time this code will ask for permission instead of showing the notification. Now if user has given the permission to show the notification then we can show two types of notifications.

  1. Normal/Default Notification
  2. HTML Notification

So now let’s jump into the code.

Here you can see I have created the javascript function to show the notification, Please note: This function is limited to this article, because there are so many ways with which we can extend this function as per our need.

HTML

Show Normal Notification

Show HTML Notification

<h2>Show Normal Notification</h2>
<button class="btn btn-success" id="show_notification">
    Normal Notification
</button>
   
<h2>Show HTML Notification</h2>
<button class="btn btn-success" id="show_html_notification">
    HTML Notification
</button>

JavaScript

// Function to show Notification function createNotification(type) { if(type == '') type = 'normal'; if(type != 'html') { var title ="You have received HTML 5 Notification"; var msg="Content Goes Here......"; var notification = window.Notifications.createNotification("1.png", title, msg); } else { var notification = window.Notifications.createHTMLNotification('content.html'); } notification.show(); } // Binding the Click event on buttons. $(document).ready(function () { if (window.webkitNotifications) { window.Notifications = window.webkitNotifications; $('#show_notification').click(function () { if (window.Notifications.checkPermission() == 0) { createNotification('normal'); } else { window.Notifications.requestPermission(); } }); $('#show_html_notification').click(function () { if (window.Notifications.checkPermission() == 0) { createNotification('html'); } else { window.Notifications.requestPermission(); } }); } else { alert('HTML 5 Notifications are not supported on this browser/OS.'); } });
 // Function to show Notification
 function createNotification(type)
 {
    if(type ==  '')
      type = 'normal';
                       
    if(type != 'html')
    {
     var title ="You have received HTML 5 Notification";
     var msg="Content Goes Here......";
     var notification = window.Notifications.createNotification("1.png", title, msg);
    }
    else
    {
      var notification = window.Notifications.createHTMLNotification('content.html');
    }
    notification.show();
 }
 
 // Binding the Click event on buttons.
 
 $(document).ready(function ()
 {        
   if (window.webkitNotifications)
   {
    window.Notifications = window.webkitNotifications;
    $('#show_notification').click(function ()
    {
      if (window.Notifications.checkPermission() == 0)
      {
        createNotification('normal');
      }
      else
      {
        window.Notifications.requestPermission();
      }
    });
                               
    $('#show_html_notification').click(function ()
    {
     if (window.Notifications.checkPermission() == 0)
     {
        createNotification('html');
     }
     else
     {
        window.Notifications.requestPermission();
     }
    });
   }    
   else
   {
    alert('HTML 5 Notifications are not supported on this browser/OS.');
   }
 });

Demo

Have a look at this live demo for the same Notification API of HTML5. You should be asked for permission for showing the notification. If you allow then and then only above script will able to show the notifications.

For first time it will ask for permission rather than showing the notification.

Conclusion

So this is what I have explined for HTML 5 notification is applicable for Web Kit browsers only like Google Chrome. Mozilla Firefox has its own specification for this HTML 5 notification which I will cover in separate article.

If you don’t want to miss any related article/freebies then subscribe to our RSS Feed, Follow us on Twitter and Like us on Facebook.

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by:

  • Emil

    You should really say that it only works in Chrome. I tried in Safari (the original WebKit-browser) and iOS, not working there.

    • http://www.xpertdeveloper.com Avinash

      @Emil,
      Thanks for correcting me. text in article is corrected now..

  • Ant’s

    Nice article :)

  • Pingback: HTML contenteditable attribute Explained | Expert PHP Developer

  • http://enmisnegocio.blogspot.com/ Joe

    very good code, notifications are very important for modern day web platforms

  • Pingback: La Notificación HTML5

  • http://thefricky.wordpress.com The Fricky!

    Nice article, just to be fear, the API’s aren’t intended to work “just with HTML” but with Javascript. You really can’t do much with notifications just with HTML

  • http://www.anacondawebhosting.com/ Francisco

    Good good! very nice code

  • http://falgunipatel.in falguni

    nice one !!