Web Notifications

Web Notifications allows users to get updates on a webpage even if they’re not looking at it, shown to them through small notification boxes, think growl. This opens up some great potential for the current web apps out there. When you get a new email it could popup a little notification much like our desktop email clients do now or your twitter page could let you know when new @replies have come in, the possibilities are endless.

Interaction with your web app no longer needs the focus of the user to be informed that something has occurred, I know I would find notifications very useful.

Support for this is in latest stable Chrome (25.0.1364.172) and Firefox Nightly (22.0a1).

Update: Web Notifications spec is now a Working Draft and has dramatically changed, this article has been updated to reflect that.

You’ve got mail

I’ll go through a simple demo I have put together on how to setup and start using notifications today.

First example of Web Notifications in Chrome
This is what a notification looks like using the Notification() method

Everyone loves the classic “you’ve got mail” voice, so let’s go through how to do that with Web Notifications.

TCNWN.permission = function(callback) {
        if(permission === "granted") {
        } else {
            // handle other scenarios

A few things are happening here, for notifications to ever work you need to ask the user for permission. So we use the requestPermission() method which gives us a callback function and passes in the status as the first argument. Once permission has been granted notifications can then be used. A few differences are Chrome won’t allow me to programmatically check for permssion and automatically show the notification whereas Firefox Nightly will.

var notification = function() {
    var nw = new Notifications("You've got mail", {
        icon: "icon.png",
        body: "The CSS Ninja has sent you an email",
        tag: 'got_mail'
    nw.addEventListener("show", function() {
        var audio = new Audio("youvegotmail.mp3");
    }, false);
    return nw;

Now we have permission (hopefully you allowed!) we can construct a new Notification to be shown to the user. Notifications is a constructor that takes one required argument and a second argument that allows you to alter a bunch of options.

  • First argument is the Notification title
  • The second argument has a few properties like icon, body and tag. See spec for full list

The icon and body parameters a pretty self-explanatory but tag not so much. Basically tag allows you to supply an id to a Notification so you can reuse that notification rather than create a new one to display every time.

The next bit of code allows us to attach to certain events that the Notification will fire, in our case we want to play audio when it’s shown. There are three other events onclick, onclose and onerror to handle other scenarios.

Looks promising

Web notifications do look like a promising addition to the browser land and can create some really useful feedback to a user. With today‚Äôs web applications pushing the limits of the current technology available in the browser, I’m sure many developers will embrace web notifications in clever and exciting new ways.