Desktop Notifications with WebKit

Chrome now supports desktop notifications using WebKit's webkitNotifications API. (Try the demo.)

Why is this awesome? Because it gives online tools like e-mail clients, calendering software, task managers, monitoring systems, etc. an elegant and consistent way to notify users without having to resort to annoying and invasive hacks like window.alert.

Stacked Desktop Notifications

Although the API is sparsely documented, it is simple and flexible and supports features such as domain based permissions, stacking of notification windows, embedded HTML, etc.

To use desktop notifications in your applications, you need the following three API calls:

• window.webkitNotifications.requestPermission(callback) - Request access to Desktop Notifications for this domain.
• window.webkitNotifications.checkPermission() - Returns 0 if this domain has Desktop Notification access.
• window.webkitNotifications.createNotification - Returns a popup notification instance, which you can display by calling show() on it.
  

A straightforward way to check for Desktop Notification support is by testing if window.webkitNotifications is defined. Take a look at Notifier.HasSupport() in the API wrapper below.

When you request permission with requestPermission(callback), Chrome slides out a small permissions dialog immediately above the page. (Click the image below to magnify.)

Permissions Dialog for Desktop Notifications

In the above image, licking "Allow" tells Chrome that all pages hosted on 0xfe.muthanna.com can send notifications to the desktop. You can remove this access by clicking the "Options" link on any notification from a site.

Here's a simple wrapper to the API (which is embedded in the demo below):

function Notifier() {}

// Returns "true" if this browser supports notifications.
Notifier.prototype.HasSupport = function() {
  if (window.webkitNotifications) {
    return true;
  } else {
    return false;
  }
}

// Request permission for this page to send notifications. If allowed,
// calls function "cb" with "true" as the first argument.
Notifier.prototype.RequestPermission = function(cb) {
  window.webkitNotifications.requestPermission(function() {
    if (cb) { cb(window.webkitNotifications.checkPermission() == 0); }
  });
}

// Popup a notification with icon, title, and body. Returns false if
// permission was not granted.
Notifier.prototype.Notify = function(icon, title, body) {
  if (window.webkitNotifications.checkPermission() == 0) {
    var popup = window.webkitNotifications.createNotification(
      icon, title, body);
    popup.show();
    return true;
  }

  return false;
}

Take a look at the WebKit Desktop Notification Demo for a working demo. [ View Source ]