Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

Desktop Notifications with Webkit

Mohit Muthanna has a nice blog post explaining how you can create desktop notifications with the latest Webkit/Chrome.


There are essentially three API calls you use:

  • 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(icon,title,body) - Returns a popup notification instance, which you can display by calling show() on it.

The demo code is pretty straight forward:

  2. function Notifier() {}
  4. // Request permission for this page to send notifications. If allowed,
  5. // calls function "cb" with "true" as the first argument.
  6. Notifier.prototype.RequestPermission = function(cb) {
  7.   window.webkitNotifications.requestPermission(function() {
  8.     if (cb) { cb(window.webkitNotifications.checkPermission() == 0); }
  9.   });
  10. }
  12. // Popup a notification with icon, title, and body. Returns false if
  13. // permission was not granted.
  14. Notifier.prototype.Notify = function(icon, title, body) {
  15.   if (window.webkitNotifications.checkPermission() == 0) {
  16.     var popup = window.webkitNotifications.createNotification(
  17.       icon, title, body);
  19.     return true;
  20.   }
  22.   return false;
  23. }

The user request happens the same way the W3C geo location API requests access - a toolbar popping up asking you if you are OK to see Desktop Notifications. This is good as I can see this being used by people to fake IM messages - much like they do now in the browser.

The notifications animate in from top right and have the originating URL and a "block" link - which makes it hard to use them for phishing.

Interesting concept and if it could use native systems like Growl it would spell the end of awkward alerts and hand-rolled notification windows in the document.

No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...