Skip to content

Instantly share code, notes, and snippets.

@abhinavguptas
Created February 12, 2012 13:34
Show Gist options
  • Save abhinavguptas/1808548 to your computer and use it in GitHub Desktop.
Save abhinavguptas/1808548 to your computer and use it in GitHub Desktop.
Force.com Streaming API Chrome Desktop Notifications
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment