Growl notifications in web application

Question

The web application I work on includes long running tasks that show progress in the browser. While a task is running the user can browser and use the rest of the application. Would a pattern like Growl be a good model for showing when these running tasks complete? If so, could Growl notifications also be used when a new record is added/removed from a grid and a simple form submission too to be consistent across the app.

Answer 1

This is a very difficult problem on the web because (until the HTML5 web notifications API is adopted more widely), you can only notify users if they're already looking at your page.

If a long-running task is going on in the background, you probably can't safely assume that the user will be using your page while they're waiting for it; they're more likely to be doing something else in the background, whether that's browsing other websites in other tabs/windows or checking email or whatever the case may be.

That means you need to factor in two things that aren't always so important in Growl's case:

1. Notifications should have a reasonable degree of permanence (stay shown until the user clearly returns to the page and possibly until he or she dismisses it)
2. Your notification should try (reasonably) to indicate a state change to the user, even if they have since changed to a different page.

As far as actually accomplishing this, there are a couple of options I'm aware of:

• Facebook, Omegle and Gmail change the page title (often animating it) to indicate a new message, which is visible in browser tab bars and the Windows taskbar (at least with titles expanded).
• In IE9 and 10, pinned sites can add notification indicators to their taskbar icons to indicate updates/unread items.
• If you're deploying in a captive-market/enterprise scenario, users could install an NPAPI plugin in their browsers and you can trigger real Growl notifications using Javascript.

Finally, if you're really dead-set on implementing Growl-like notifications on your site only, other people have done most of the hard work for you already.

Answer 2

Web applications like Gmail and Rdio use HTML5 web notifications API. The spec and some examples are on HTML5Rocks. It actually works pretty nicely in my opinion and is very similar to Growl.

Browser support is limited to Firefox and Chrome right now so obviously this may make it not an option for your audience or you may need fallbacks for other browsers.