HTML5 Desktop Notification

I have wrote a jQuery plugin for Notifications. You can find it here 
http://athousandnodes.com/article/jquery-html5-desktop-notification-plugin
I have just came across a cool HTML5 Feature called desktop notifications. We have only been able to show messages inside the browser using HTML and Javascript But with HTML5 and webkit enabled browsers we can do quite a lot of cool stuff outside the browser But as in most practices we have to check if the browser supports it, Currently i have only played around with chrome and safari
if (window.webkitNotifications){
 }
If the feature is available, we will still need the user to allow the page to show notifications. For this we have to ask the browser to prompt the user for permission and later have to check if the permission has been granted. This can be done recursively. The code to check for permission also takes the name of a callback function. Once we give it our own syntax
//Definition of callback function
function requestingPopupPermission(callback){
  window.webkitNotifications.requestPermission(callback);
}
Then we can give the name of the function to be called once permission is granted. In this case i am going to do it recursively.
//Definition of callback function
function showPopup(){
  if(window.webkitNotifications.checkPermission() > 0){
   requestingPopupPermission(showPopup);
}
else{
 //Show Popup
}
}
The createNotification function takes 3 parameters
  1. thumb: url of the image to be shown in the notification
  2. title: title of the notification
  3. body: text to show in the notification
In case if you want to show an HTML page in the notification then then use
window.webkitNotifications.createHTMLNotification("url for the page");
These notifications once brought up don't have an auto close they have to be closed by the user or we have to do it using code, with a time-out In the end All would look like this
Click on the button to generate a Notification Message
<script>
if (window.webkitNotifications){

function requestingPopupPermission(callback){
  window.webkitNotifications.requestPermission(callback);
}

function showPopup(){
  if(window.webkitNotifications.checkPermission() > 0){
   requestingPopupPermission(showPopup);
}
else{
var thumb = 'http://athousandnodes.com/logo.png';
var title = 'Test Notification';
var body = 'Test Notification body. Test Notification body. Test Notification body. Test Notification body. ';

 
        var popup = window.webkitNotifications.createNotification(thumb, title, body);

        //Show the popup
        popup.show();

        //set timeout to hide it
        setTimeout(function(){
        popup.cancel();
        }, '10000');

}
}

 }
else{
alert('Desktop Notification is not supported by browser');
}
</script>
<button onClick='showPopup()'>Notify</button>

Comments

I see that Gmail is using this : "Click here to enable desktop notifications for Gmail.". or did i miss it before?

Yep but they are only supporting it for Chrome. Though didn't try it in Safari

Well its not working in Safari..
I am surprised!

is not working any of all latest version of browser.

Thats funny.
I havn't seen any issues being posted by others. Also iv tested it ad is working on Chrome 9 and Opera 11

Can someone post an update on which browsers is working with it?

Thanks,

Jim

Go Home Doodle, You are drunk