Introducing Yip: A Unified Notification System for the Web

Jump to Comments

It’s 2009 and no browser vendor supports notifications for Webapps. The revolution begins today.

Let me first explain in Simple English: (1) Install Yip, (2) Go to Meebo.com and (3) When you receive an IM, you’ll see a notification on your screen like the one in the screenshot below. Works for Filttr.com and a whole host of other sites too.

Now for the explanation that geeks prefer – Yip is a Firefox extension that ports the Fluid and Prism notification APIs over to Firefox so you can receive Growl notifications from web applications. (Update: with Yip 0.2, if you’re on Windows, you can get Snarl or Growl for Windows or plain old Firefox notifications and if you use Linux, you can get libnotify/notify-OSD notifications. Read more about this here).

Download

The great thing about Yip is that we don’t have to be stuck in a chicken-and-egg situation. Many websites have already implemented notifications (despite the fact that no major browser has added support for it!). Some support Fluid, some support Prism and some do both. So, you can immediately start using Yip.

If you log into Meebo and you have Yip installed, the next time your friends sends you an IM, you should see a notification (obviously, Meebo should not be your focused window/tab at that point).

Apologies to my Chinese readers. I merely take screenshots and post them without reflecting on their contents.

Another cool website is Filttr which is a Twitter app that supports notifications for replies and direct messages.

A number of other Webapps also support notifications. And there are a whole slew of Greasemonkey userscripts to enable notifications for Facebook, Gmail, FriendFeed, Github, etc.

Yet another standard?

As pointed out earlier — NO, the goal of Yip is not to create a standard for notifications but to support all the existing kinds of notifications. Currently, Yip only supports Fluid and Prism which cover the large majority (100%?) of currently implemented notifications. When Gears/Chrome starts supporting notifications (which might never happen because I don’t see anyone working on the proposal), Google will no doubt add notifications to all its web apps. Then, I’ll add support for the Gears Notification API to Yip too. If you know any other API, let me know in the comments and I’ll support it.

The API

Fluid

If you want to support notifications on your website, Fluid’s API is great. The function takes a single jQuery-style argument:

window.fluid.showGrowlNotification({
title: "title",
description: "description",
onclick: callbackFunc,
icon: URL string
});

All arguments are optional. Note that Fluid/Growl also supports the priority, sticky and identifier properties which are not yet supported by Yip.

Prism

Yip also supports the Prism API. Unfortunately, this API does not support even an onclick callback so I recommend that you use window.fluid instead. But since both Prism and Yip run on XULRunner, I’ll probably add a patch to Prism soon. Here, all arguments must be specified:

window.platform.showNotification(
title,
text/description,
icon
);

Extensions

If you’re another extension, you want to use use Yip,

var yip = Components.classes['@foyrek.com/yip;1']
.createInstance(Components.interfaces.nsIYip);
yip.showGrowlNotification({...});

Code

Now, go try it! Load up a HTML page and just add some javascript code like

fluid.showGrowlNotification({title:"Yippie!", description:"Just testing Yip! It's awesome", icon: "http://www.google.com/favicon.ico"});

The code for Yip itself can be found on Github. Do whatever you want with it (it’s MIT licensed).

A bit of technical history

The challenge in this extension is to define a global property on every window object of every tab. This took me forever (6  months, to be precise) to figure out because it’s a tough question to phrase and because not many people want to do this. But, eventually, I did (I’ll write a bit more about how this is done in the next post). I have to thank a bunch of people on IRC for this including mfinkle, zpao, Unfocused, Mook and dolske.

Part 2

In line with my philosophy of releasing things at every useful step, I have released Yip pretty early. But be sure that there will be no sophomore slump here. Part 2 of this project is way way more exciting. But you’ll have to wait for it. Watch this project on Github in the meantime!

And because I like LOLPuppies better than LOLCats

I used to have a puppy. It died. Photo credit to jaysonmaceo on Flickr

You should subscribe to new my blog.

63 Comments

Filed under Philosophy, Programming

Tags: extension, extension de, Firefox, fluid, growl, mozconcept, notifications