HTML5 Notifications are yet another great addition to the new HTML5 specification. The new API allows websites to send notifications directly to your desktop. The purpose of this post is to explain how to use Notifications by providing a concrete example for using them in your own website.

HTML5 Notifications in the real world

Don't be surprised if you see social networking sites or microblogging sites like Facebook or Twitter utilizing the new feature as soon as HTML5 goes mainstream. For example, let's say that someone on Facebook sends you an instant message. Currently, if you're viewing another website in a different window while Facebook is open, and a user sends you an instant message, Facebook will alert you by updating the webpage with AJAX, causing the associated browser tab to flash. With HTML5, Facebook could send an alert directly to your desktop with an embedded instant message.

HTML5 Notifications code

To use HTML5 notifications in your own website, you'll need to add code that looks something like this:

function RequestPermission (callback) {

window.webkitNotifications.requestPermission (callback);
}

function showNotification () {

if (window.webkitNotifications.checkPermission ()> 0) {

RequestPermission (showNotification);

}

else {

window.webkitNotifications.createNotification ("http://a1.twimg.com/profile_images/710503034/lillypad_rss_normal.png",

"Title", "Body"). Show ();

}
}

HTML5 Notification API

Before making use of HTML5 notifications, you'll have to prompt the user for permission first. This is done with the requestPermission () method. It takes one optional argument, the name of the call back function. In this case, the call back function is showNotification (). When the user accepts the request, the showNotification () function is called again. The difference this time, however, is that the notification permission is now set to "0", allowing the createNotification () method to be executed successfully.

The createNotification () method takes three arguments: an image, a title, and a notification body. If you don't want an image to appear in your notification, you can leave the argument blank.