HTML 5 Webkit Desktop Notification Code (Google Chrome Support Only… for Now.)

I was on gmail the other day and it prompted me to allow desktop notifications for my chat.. Hm, YES! It’s very helpful to have a popup come up as though it were built-in to the OS. Get’s your attention right away. So my next thought went to… How can I leverage this same benefit for my users? So I found a site that gave a great tutorial on how to do it, my example supplements it a bit, but the other is definitely worth a peek!

http://www.beakkon.com/tutorial/html5/desktop-notification

$('body').click(function(){
		displayNotification();
	});
    
    if (!window.webkitNotifications) {
        alert('Sorry , your browser does not support desktop notification. Try Google Chrome.');
    } 

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

	function displayNotification()
	{
		if(window.webkitNotifications.checkPermission() > 0){
			
			sendPermissionRequest(displayNotification);
			
		} else {

    	    var icon  = 'link_to_logo.png';
            var title = 'Routy Development';
            var body   = 'Kapow!';
     
            var popup = window.webkitNotifications.createNotification(icon, title, body);
            
            popup.show();
            
            setTimeout(function(){
            	popup.cancel();
            }, '15000');

		}
	
	}

	function displayHtmlNotification()
    {
        if (window.webkitNotifications.checkPermission() > 0) {
        	sendPermissionRequest(displayHtmlNotification);
        } else {
        
            var popup = window.webkitNotifications.createHTMLNotification('http://blog.routydevelopment.com');
            popup.show();
            
            setTimeout(function(){
            	popup.cancel();
            }, '15000');
        }
    } 

A few links that I had to also browse to when finding/installing this gem:

http://www.beakkon.com/tutorial/html5/desktop-notification
http://www.quora.com/Mozilla-Firefox/When-will-firefox-support-Desktop-Notifications-like-Chrome
http://stackoverflow.com/questions/4913866/webkitnotifications-security-err-dom-exception-18-script-ok-button

Friday, March 25th, 2011 Javascript, jQuery

Leave a Reply

You must be logged in to post a comment.

[ad code=1 align=center]