HTML 5 Notification Feature

HTML5 is going to be the De facto for the web application and sites like facebook, twitter & not to mentioned Google chrome extensions which is going to extensively use Notification to replace all tab alert based extensions with notification api from HTML 5.

The new Notification API allows websites to send notifications directly to your desktop which can be facebook chat alerts, email alerts with first few lines of email etc. The below post will explain you three different methods which can be used to achieve this functionality. in simple steps. You can try these methods in one html page on any html5 ready browser as Chrome/Safari etc.

First step will be to check if the notification support is there in the browser, which you can do with the following method.

if (window.webkitNotifications) {
  //Notifications are supported!
  //Notification is not supported.

Next step would be to check if user has granted you the permissions to receive notification from your website or your webapp. If you don't have the permissions yet you can request the permission and this whole permission request does makes sense as otherwise there will be popups all over. You can do this with the following code:

if (window.webkitNotifications.checkPermission() == 0) {
  //You have permissions 
     window.webkitNotifications.requestPermission();//requesting the permissions

Note: webkitNotifications is the present name of the method as it is a draft, once it goes live this method name will be changed to Notifications

Once the user has granted the permissions you can call window.webkitNotifications.createNotification method with the icon, notification title & notification content as follows.

window.webkitNotifications.createNotification('tclicks-icon.png', 'Notification Title', 'Notification content...');

That's all you need to do to get the notifications on desktop. Happy Notifying !


July 28, 2010 at 10:43 PM Sagar said...

Hi, Is notifications really a part of HTML5. I think it's a part of webkit.

September 12, 2010 at 10:21 AM Anonymous said...

@Sagar Its part of HTML5 Javascript API

January 2, 2011 at 6:50 PM James Brown said...

FYI it was dropped from HTML5

July 28, 2011 at 9:37 AM Rob said...

It may have been dropped but google are making it a cornerstone of their web apps. So I think its fair to say this is pretty relevant.

Post a Comment