01

Delicious Web Notifications

Wouldn't it be swell if you could notify a user with an important message even if the browser isn't currently in use? Drumroll please: enter the Web Notifications API!

Here are some examples

A single notification (everytime you click the button).
Receive a notification every 5 seconds

How does it work?

To send notifications from a page you have to call requestPermission() first. This will make the browser bar pop up. After you've requested permission you can check if you have been granted permissions to send notifications by calling checkPermission().

After the initial bootstrapping, you can create a notification with createNotification(icon, title, content). You can even attach callbacks, for instance when the notification is shown or when it's dismissed by the user. To show the notification, you call show() on the created notification object.

Useful?

We'd say so! We love the fact that you now have the ability to notify a user, even when your application isn't in the topmost window. The user still has to open your page for it to work, but even if it's in the background, the notifications will pop up.

Here are some more practical applications:

  • Message notification during online chat
  • Notify a user that there is a new mail
  • Get notifications of server status, if for instance your server is going haywire
  • Notify online shoppers after 20 minutes that they have added things to their cart but not checked out yet

Great, but can I use it today?

These examples currently work in Chrome and should work in Safari on Mountain Lion, but Mozilla is working on notifications too. The spec is still being drafted and is subject to change. The only version that's currently usable is actually based on an outdated spec.

Show me the source!

Feel free to look around the differente source files we used for this example.