There are a number of applications that can be used to turn a web application into a standalone desktop application. These applications are commonly referred to as Site Specific Browsers, or SSBs. The best way to generate an SSB is with Fluid (for Mac OS X) or Chrome (for Linux and Windows.)

People often create SSBs for sites that they keep open all day and don’t want hidden in one of their browser tabs (e.g. Gmail.) By isolating the website in its own application you no longer have to worry about browser crashes or accidentally closing a tab.

Beyond stability, there is another advantage to putting your web application in an SSB. Some SSBs provide special javascript APIs that let your web application integrate more closely with the desktop; blurring the line even more between web and desktop application. The most interesting of these new features is notifications.

Notifications from a Fluid app

Using notifications in a Fluid generated application is very simple. Fluid provides a new window.fluid object. This new object gives us access to Growl, dock badges, and even dock menu items. To emit a notification, simply test for the existence of the window.fluid object, and then use the showGrowlNotification method.

function notify (title, body, id) {
  if (window.fluid) {
    window.fluid.showGrowlNotification({
      title: title,
      description: body,
      priority: 1,
      sticky: false,
      identifier: id
    });
  }
}

The above javascript will show a temporary Growl notification (note: the msgid variable needs to be set to some unique identifier.) Beyond Growl notifications, we can also add a dock badge counter to the application’s icon.

This is done through the window.fluid.dockBadge property. There are a few quirks with the Fluid dock badge methods, so look closely.

function increaseBadgeCount () {
  if (!window.fluid) return;
  window.fluid.dockBadge ? window.fluid.dockBadge++
                         : window.fluid.dockBadge = 1;
}

function clearDockBadge () {
  if (!window.fluid) return;
  window.fluid.dockBadge = "";
}

The Fluid dock badge strangeness comes into play when trying to remove the dock badge from the icon. We can’t just set window.fluid.dockBadge to 0, because then it will show a “0” in the badge. If we set it to undefined or null it will display NaN (Not a Number.) The only way to remove the dock badge is to set it to “”. Because a blank dock badge is set to “”, we can’t simply do a window.fluid.dockBadge++ when we want to increase it.

Check out the Fluid developer page to find out more about the Fluid API.

Notifications in Chrome

As you can see, the Fluid API is not fully thought out and can be inconsistent at times. Luckily, the Chrome notification API is much more sane. Another nice thing about Chrome’s API is that it is also available from the regular Chrome browser, not just Chrome generated SSBs.

Because Chrome’s notifications are not limited to SSBs, you must request permission before displaying anything. This makes things somewhat more complicated, but not terribly so. Lets add Chrome support to the notify function from above:

function notify (title, body, id) {
    if (window.fluid) {
      window.fluid.showGrowlNotification({
        title: title,
        description: body,
        priority: 1, 
        sticky: false,
        identifier: id
      }); 
    }   
    else if (window.webkitNotifications) {
      if (window.webkitNotifications.checkPermission() == 0) {
        var popup = window.webkitNotifications.createNotification(
          "http://www.yoursite.com/an_icon.png",
          title,
          body
        );
    
        popup.ondisplay = function() {
          setTimeout(function () {popup.cancel();}, 3000);
        };
  
        popup.show();
      }
    }
  }
}

Here we have extended our notify function to work on both Chrome and Fluid. Now we test for window.webkitNotifications to see if Chrome’s notifications are available. Then we check if we have permission to display notifications with the checkPermission method. This method will return 0 if we have permission (which seems backwards to me.) Finally, once we know we have permission we can use the createNotification method. This is somewhat different from Fluid’s notification method in that it takes an image URL, and does not require an ID.

One annoyance with Chrome’s notifications is that they don’t automatically disappear. We use the returned popup object to hide the notification on our own. This is done above by creating a 3 second timeout inside the popup’s ondisplay event. If we don’t set this up in the ondisplay event the timing will be off, since it takes a few seconds for the popup to appear.

You may be wondering how we actually get permission to show a notification in Chrome. We request permission with:

window.webkitNotifications.requestPermission()

However, we can’t just use this method at any time. In my few experiments it only works inside a click event, though I suspect it will also work in a load event.

Check the Web Notifications spec to learn more about notifications in Chrome.