Visualforce component to display browser notifications when a case is updated that is owned by the currently logged in user

Streaming.component

<apex:component >
  <apex:attribute name="topic" description="The topic name" type="String" required="true"/>
    <apex:includeScript value="{!URLFOR($Resource.streaming, 'streaming/cometd.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.streaming, 'streaming/jquery-1.5.1.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.streaming, 'streaming/json2.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.streaming, 'streaming/jquery.cometd.js')}"/>
    <script type="text/javascript">
    (function($){
        $(document).ready(function() {
            $.cometd.addListener("/meta/*", 
               function(message) {
               
               var dateStr=new Date().toUTCString();
               $('#log').prepend(dateStr + '<br/>' +
               					'Received message ' + 
                                  message.channel + 
                                  '<br/>Successful = ' + 
                                  message.successful + 
                                  '<br/>Version = ' + 
                                  message.version + 
                                  '<br/>Client id = ' + 
                                  message.clientId +
                                  '<br/>Advice = ' + (null!=message.advice?('<br/>Reconnect: ' + 
                                                       message.advice.reconnect + 
                                                       '<br/>Interval: ' + 
                                                       message.advice.interval)
                                                :message.advice) + 
                                             '<br/>Error = ' + message.error + '<br/>');				
                })
                
            // Connect to the CometD endpoint
            $.cometd.init({
            				url: window.location.protocol+'//'+window.location.hostname+'/cometd/24.0/',
            				requestHeaders: { Authorization: 'OAuth {!$Api.Session_ID}' }
            			  }
            		     );
            		     
            // Subscribe to a topic. JSON-encoded update will be returned 
            // in the callback
            $.cometd.subscribe('/topic/{!topic}', function(message) {
                $('#content').append('<p>Notification: ' +
                    'Channel: ' + JSON.stringify(message.channel) + '<br>' +
                    'Record name: ' + JSON.stringify(message.data.sobject.Name) +             '<br>' + 
                    'Record owner: ' + JSON.stringify(message.data.sobject.OwnerId) +             '<br>' + 
                    'Created: ' + JSON.stringify(message.data.event.createdDate) + '<br>' +
                    "ID: " + JSON.stringify(message.data.sobject.Id) + '<br>' +
                    "Number: " + JSON.stringify(message.data.sobject.CaseNumber) + '<br>' +
                    "Event type: " + JSON.stringify(message.data.event.type)+ '<br/>' +
                    "Mine : " + (message.data.sobject.OwnerId=='{!$User.id}'?'Yes':'No') + '</p>');
                    
                if (message.data.sobject.OwnerId=='{!$User.id}')
                {
                	notify(message.data.sobject, message.data.event.type);
                }
            });
            
            if (Notification && typeof Notification.permission==="undefined")
            {
				var testNotification = new window.Notification('This is a test');

				if (testNotification.permission) 
				{
					Notification.permission=testNotification.permission;
				}
   					
			}
            
            if (Notification && Notification.permission!== "granted" && (Notification.permission !== "denied" ))
            {
            	$('#notifyon').click(function () {
    				Notification.requestPermission(function (status) {
				
						// Change based on user's decision
						if (Notification.permission !== status) {
							Notification.permission = status;
						}	
				
						// If it's granted show the notification
						if (status === "granted") {
						   	var n = new Notification("Notifications Enabled",  {
	   							tag: 'Notifications Enabled', 
		   						body: 'Notifications have been enabled for this page'
		    				});
		    			 $('#notifyon').toggle();   
						}
					});
    			});
    		}
    	
        });
    })(jQuery)
    
    	function notify(sobject, eventtype)
    	{
			// If notifications are granted show the notification
			if (Notification && Notification.permission === "granted") 
			{
	    		var millis=new Date().getTime();
	    		var tag = 'CU:' + millis;
			   	var n = new Notification("Case Update",  {
			   		icon : '{!URLFOR($Resource.notifyimg)}',
	   				tag: tag, 
	   				body: 'Case ' + sobject.CaseNumber + ' ' + eventtype
	    		});
				n.onclick = function(){
    				window.focus();
    				this.cancel();
				};
			}
		}
		
    </script>
    <button id="notifyon" style="display:none">Enable Chrome Notifications</button>
    <button id="sendnotify" onclick="notify();">Send Notification</button>
    
    <div style="float:right; width:250px"><h2>Log</h2></div>
    <div style="clear:both; float:right; width:250px;height: 400px; overflow:auto" id="log">
    </div>
    
    <div id="content" style="margin-right: 250px">
    	<p>Notifications should appear here...</p>
    </div>
</apex:component>