Delivering Quality » Cross Platform http://www.markdeepwell.com A Software Developers View of the World Thu, 29 Jul 2010 16:44:04 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Browser Notifications with Yip http://www.markdeepwell.com/2009/08/browser-notifications-with-yip/ http://www.markdeepwell.com/2009/08/browser-notifications-with-yip/#comments Mon, 10 Aug 2009 02:51:35 +0000 Mark http://www.markdeepwell.com/?p=119 Yip Icon

Ever wanted your web application to be able to show notifications even if the user may be in another browser tab or application? Now you can!

The relatively new Yip extension for Firefox adds notification functionality. This is not a small JavaScript notification that pops up in the browser tab, but one that integrates directly with the users Operating System.

Yip uses libnotify/notify-osd on Ubuntu Linux, Growl on Mac, and Snarl or Growl for Windows on Windows. If none of these notification applications are installed, it will use Firefox's simple and not as pretty notification system. Ubuntu Linux users have notify-osd installed by default, Growl is popular with Mac users, yet Windows users probably don't have Snarl or Growler for Windows installed.

When building with notifications remember that they are meant to enhance the user experience, not require it.

The Yip extension supports both the Fluid and Prism APIs, but recommends Fluid because of support for an onclick callback function.

The API is simple and straight to the point:

PLAIN TEXT
JAVASCRIPT:
  1. window.fluid.showGrowlNotification({
  2.   title: "your notification title",
  3.   description: "some description",
  4.   onclick: optionalCallbackFunction,
  5.   icon: "URL to an icon"
  6. });

Since Yip may not be installed on the users computer, just wrap it with a check for fluid. A complete example looks like this:

PLAIN TEXT
JAVASCRIPT:
  1. if (typeof(fluid) !== 'undefined') {
  2.   window.fluid.showGrowlNotification({
  3.   title: "Hello World",
  4.   description: "The Google icon says Hi",
  5.   icon: "http://www.google.com/favicon.ico"
  6.   });
  7. }

Related Projects

  • Roar: Embed notifications into a web page (powered by MooTools).
  • growl.js: Windows only notifications using Growl for Windows.
  • NotificationAPI: Notifications in Google Gears

Of all these options, Yip is the best solution by far; its fully cross platform, has a simple to use API, and is ready to use. Install Yip now.

]]> http://www.markdeepwell.com/2009/08/browser-notifications-with-yip/feed/ 2