Thursday, April 22nd, 2010

Desktop Notifications with Webkit

Category: JavaScript, WebKit

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

desktop-notifications

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:

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

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.

Related Content:

Posted by Chris Heilmann at 5:36 am
3 Comments

++++-
4 rating from 6 votes

3 Comments »

Comments feed TrackBack URI

Don’t forget to hide the popup after a few seconds:

After
popup.show();

Insert
setTimeout(function(){
popup.cancel();
}, ’15000′);

Comment by csulok — April 22, 2010

One of the intentions of this is to check for growl support and fallback to in browser notifications if the user doesn’t have growl or other specified notification tools.

Comment by Ahrjay — April 23, 2010

Since it can be disabled (pretty much like popups), I think it’s fine. Hope people will not abuse it – and no, skinning support sounds bad enough: I’d rather have a stock growl-like notification message, than a pink rounded box.

Comment by rosamez — April 23, 2010

Leave a comment

You must be logged in to post a comment.