HTML 5 Notification

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

[cc lang=”html”]

Show Normal Notification

Normal Notification

Show HTML Notification

HTML Notification

[/cc]

JavaScript

[cc lang=”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.’);
}
});
[/cc]

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.