Force.com Streaming API Chrome Desktop Notifications

streamingNotifications.html

<apex:page sidebar="false" tabStyle="Account">
    <apex:includeScript value="{!URLFOR($Resource.comet, 'cometd.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.comet, 'jquery-1.5.1.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.comet, 'jquery.cometd.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.comet, 'json2.js')}"/>

    <style type="text/css">
      #chatterNotificationPanel {
        display: none;
      }
    </style>

    <script type="text/javascript">
    (function($){
        $(document).ready(function() {
            // if webkit notifications are not available, leave :(
            if (!window.webkitNotifications) {
              alert('Please use this page with Google Chrome, desktop notifications are not supported in your browser');
              return;
            }

            if (window.webkitNotifications.checkPermission() != 0) {                
                $('#chatterNotificationPanel').show();
                $('#listeningStatus').hide();
                $('#enableDesktopNotifcations').click(function() {                                
                                window.webkitNotifications.requestPermission(function() {
                                    if (window.webkitNotifications.checkPermission() == 0) {
                                        $('#chatterNotificationPanel').hide();
                                        listenForNotifications();
                                    } else {
                                        alert('User denied desktop notifications permission');
                                    }                                                                                                              
                                });
                            
                        });               
            } else {
              listenForNotifications();
            }                       

            // this function listens for Topic notifications
            function listenForNotifications() {
                $('#listeningStatus').show();
                // Connect to the CometD endpoint 
                $.cometd.init({
                   url: window.location.protocol+'//'+window.location.hostname+'/cometd/23.0/',
                   requestHeaders: { Authorization: 'OAuth {!$Api.Session_ID}'}
               });

               // Subscribe to a topic. JSON-encoded update will be returned 
        
               // in the callback         
               $.cometd.subscribe('/topic/AccountUpdates', function(message) {
                   // Update the debug logs area in the page, for this notifications
                   $('#content').append('<p>Notification: ' +
                        'Channel: ' + JSON.stringify(message.channel) + '<br>' +
                        'Record name: ' + JSON.stringify(message.data.sobject.Name) + '<br>' +
                        'ID: ' + JSON.stringify(message.data.sobject.Id) + '<br>' +
                        'Event type: ' + JSON.stringify(message.data.event.type)+'<br>' +
                       'Created: ' + JSON.stringify(message.data.event.createdDate) + '</p>');
                  
                  // prepare the chrome notification
                  var notifDetails = '' ;
                  if (message.data.event.type == "created") {
                    notifDetails += "New Record Created, with Name: " +  message.data.sobject.Name;
                  } else {
                    notifDetails += "Record: '" +  message.data.sobject.Name + "' changed";
                  }
                  
                  var notif = window.webkitNotifications.createNotification(
                      'http://dl.dropbox.com/u/1162324/blog/desktop-notification/horn-icon.gif', 
                      "Account Notifications", 
                      notifDetails);
                  notif.onclick = function() {
                      window.open(window.location.protocol+'//'+window.location.hostname + '/' + message.data.sobject.Id);
                      this.cancel();
                  }
                  notif.show();
                });              
            }
        });

   
})(jQuery)
   
</script>
   
   <apex:sectionHeader title="Account Desktop Notifications !"/>
   
   <div id="chatterNotificationPanel">
    <apex:pageBlock title="Enable Notifications">
        <apex:pageBlockSection title="Step 1 : Request notification permissions from browser !">
            <input type="button" value="Click here to request" id="enableDesktopNotifcations"/> 
        </apex:pageBlockSection>  
        <apex:pageBlockSection columns="1" title="Step 2 : Allow this page">
            <apex:pageMessage summary="You will see a bar like the one shown below in screenshot, please click Allow button" 
                    severity="info" strength="3" />
            <apex:image value="http://dl.dropbox.com/u/1162324/blog/desktop-notification/desktop-notification-bar.png" width="95%"/>
        </apex:pageBlockSection>
          
    </apex:pageBlock>
   </div>

   <div id="listeningStatus">
       <apex:pageBlock title="Notifications ON, page is listening !"> 
            <apex:pageMessage summary="You can leave the page now, notifications will pop on updates" 
                    severity="info" strength="3" />
            <apex:image value="http://dl.dropbox.com/u/1162324/blog/desktop-notification/listeningup.gif" />
       </apex:pageBlock>
       
<div id="content">
           
<h2>Debug logs</h2>
       
</div>       
   </div>
   




    
</apex:page>