Desktop notification is another interesting feature of HTML5. With this new webkit API, websites can send desktop notification. Think of a real life example, suppose you want to alert user if he receives new message and he is currently on other page. So what you will do? The solution is HTML5 Desktop notification.
Though it has a major drawback that only CHROME supports it now. But all major browsers will support it soon.
So, in this tutorial we will learn how to send desktop notification.
Try the following demo,
DEMO
Lets implement the above demo.
First we have to check browser's support,
For this,
if (!window.webkitNotifications) {
alert('Sorry , your browser does not support desktop notification. Try Google Chrome.');
}
Now, we will take user's permission to show notifications.
window.webkitNotifications.requestPermission(callback);
callback function is called if user grants permission.
We have to check if user has granted permission,
window.webkitNotifications.checkPermission()
It will return 0, if permission is granted.
Next, we have to create notification
window.webkitNotifications.createNotification(url, title, body)
This function creates notification having parameters-
- url-url of the image to be shown in desktop notification.
- title-title of the desktop notification.
- body-text to be shown in notification.
You may also want to show a page in notification. For this use the following function-
window.webkitNotifications.createHTMLNotification("url of page");
And now , most important we have to hide the popup after sometime,
setTimeout(function(){
popup.cancel();
}, '15000');
Thats it. Below is the complete HTML code...
CODE
<script>if (!window.webkitNotifications) {
alert('Sorry , your browser does not support desktop notification. Try Google Chrome.');
}
function RequestPermission (callback)
{
window.webkitNotifications.requestPermission(callback);
}
function notification ()
{
if (window.webkitNotifications.checkPermission() > 0) {
RequestPermission(notification);
}var icon = 'http://www.beakkon.com/sites/default/files/images/logo.png';
var title = 'BEAKKON';
var body = 'Flying he keeps his eyes on the stars';var popup = window.webkitNotifications.createNotification(icon, title, body);
popup.show();
setTimeout(function(){
popup.cancel();
}, '15000');
}function HTMLnotification ()
{
if (window.webkitNotifications.checkPermission() > 0) {
RequestPermission(HTMLnotification);
}var popup = window.webkitNotifications.createHTMLNotification('http://www.beakkon.com');
popup.show();
setTimeout(function(){
popup.cancel();
}, '15000');
}
</script>
</head>
<body>
<button onclick="notification()">NOTIFY</button>
<button onclick="HTMLnotification()">NOTIFY ME(HTML)</button>
</body>
</html>
