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) {
    Notifications.requestPermission(function(permission){
        if(permission === "granted") {
            callback();
        } 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");
        audio.play();
    }, 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.

Post filed under: html5, javascript.

Skip to comment form.

  1. phish says:

    Hi,
    thanks for these posts which are very helpfull.

    Are These features currently experimented and only available on webkit?

    Safari uses webkit so why these examples do not work on it and just on chrome?

  2. Yes, web notifications is still very experimental and the spec is currently in discussion on the web-apps mailing list.

    Google is the main driver behind this implementation and has only done the changes to their chromium build. I’d imagine it won’t be merged back into the main webkit trunk until it is more refined and there is at least a consensus about how it should work.

  3. jkulak says:

    It doesn’t work on MAC OS X yet, but it creates many great features to come! Excited about it.

  4. Dries says:

    Very helpfull article! Been playing with this code and was wondering if you can call the notification function when something is posted on your blog. Have tried to implement this in my wordpress but when updating or posting a new post, the javascript function isn’t called. Any thoughts on that issue/idea?

  5. @Dries – That sounds like a tricky implementation. You would have to have localStorage on a users computer keeping a record of what posts they’ve seen and if there are any new ones. From there execute a function to show a notification. Running the function could happen onload of the page which could run on every page view.

  6. @Dries/Ninja: Maybe combine a timer with AJAX to run a query on the wordpress db. Every post/revision has an ID, so you could use localStorage with onLoad to store the most recent post ID, and then every x amount of seconds, query the db and see if there are any ID’s higher than the one stored in localStorage -if so, shoot out a notification. Seems pretty straight forward. I haven’t tested it, but I don’t see why that wouldn’t work. You could even go as far as testing if post_name contains “revision” and alert viewers that a post has been updated, versus just newly created posts.

    Awesome idea Dries. If I have time to work on it I’ll post an update here.

  7. @Kyle – Sounds like it could work, would be interested to see a working example. Keep us posted.

  8. Jamie says:

    Wow! That’s fantasic!! Is there any original code on this. Such as html5.

  9. Yaffle says:

    If you have two or more opened tabs, each tab want to show notification, how to avoid opening two or more same notifications?
    I have site with chat. New chat messages showed with notifications.
    I have to use `SharedWorker` to avoid opening two nofitications with same message. Are you have any idea how to implement it withou “SharedWorker” ?

    p.s.
    http://en.wikipedia.org/wiki/Race_condition

  10. AJ ONeal says:

    Here’s a Remote Control example using SharedWorker and Notifications. I hope others find this useful. I was banging my head against the wall for a while before I finally got it right:

    http://coolaj86.github.com/html5-shared-web-worker-examples

    https://github.com/coolaj86/html5-shared-web-worker-examples