One of the HTML5 features I've played with recently is the Web notifications API, which adds desktop-class notifications to the browser.


The web notifications spec is still an early draft so it's subject to change, and the only browser implementing it is Google Chrome (all the other browsers are not planning to support it in short-term), so Web notifications are only suitable for use in few very specific scenarios... use them with care!

Who's already using Web notifications

As the spec and the first implementation of Web notifications were written by Google, they were the first to use them in a real world product: in fact Gmail has been using them for several months.

How to use them

To use the Notifications API, first of all you have to let the user grant permissions to your page to show notifications.

To do so, the first to do is to check if she has already granted the permissions by calling the checkPermission() method. This method returns 0 in case the user has already granted permissions and 1 if not:

// function to check if the user has already granted notification permissions
var hasNotificationsPermissions = function() {
  // Check if the browser supports notifications
  if (window.webkitNotifications) {
    return window.webkitNotifications.checkPermission() === 0;
  } else {
    return false;

And then use the previous function to create the method askForPermissions():

// function to ask for notification permissions if the user hasn't done it already
var askForPermissions = function askForPermissions() {
  if (window.webkitNotifications && !hasNotificationsPermissions) {

Also, it's very important to point out that the requestPermission() method only works when it's been triggered by a user-generated event, like a click or keypress event (to prevent unsolicited requests). So we have to create a button in our app to ask for notification permissions:

<button id="notification-permissions">Ask for notification permissions</button>

<script type="text/javascript">
document.querySelector('#notification-permissions').addEventListener('click', askForPermissions);

Once the user clicks on the button, she will get a popup which asks her to grant the website permissions:

Grant permissions popup

Once she clicks on "Allow", we'll be able to start sending notifications. As the notifications are displayed indefinitely (once created they never disappear), I use a simple wrapper function to send notifications with a timeout:

// Sends a notification that expires after a timeout. If timeout = 0 it does not expire
var sendNotification = function sendNotification(image, title, message, timeout, showOnFocus) {
  // Default values for optional params
  timeout = (typeof timeout !== 'undefined') ? timeout : 0;
  showOnFocus = (typeof showOnFocus !== 'undefined') ? showOnFocus : true;

  // Check if the browser window is focused
  var isWindowFocused = document.querySelector(":focus") === null ? false : true;

  // Check if we should send the notification based on the showOnFocus parameter
  var shouldNotify = !isWindowFocused || isWindowFocused && showOnFocus;

  if (window.webkitNotifications && shouldNotify) {
    // Create the notification object
    var notification = window.webkitNotifications.createNotification(
      image, title, message

    // Display the notification;

    if (timeout > 0) {
      // Hide the notification after the timeout
      }, timeout);

As you can see, this wrapper function has also a last argument called showOnFocus, which allows restricting notifications only when the browser window is not the active window in the desktop. When no timeout or showOnFocus parameters are specified, it behaves just identically as the original browser method.

Finally, this is how web notifications look on OSX (using Google Chrome, of course):

Example of a web notification

Scope of usage

As I said before, Web notifications are only available on Google Chrome, so the usage scope is really reduced; I would only recommend using it if:

In fact, I've been testing the Web Notifications in this last scenario, which is a perfect scenario for Web Notifications as all the visitors will use Google Chrome for sure. Also, having desktop-class notifications in an application is really useful, no matter if the app is being executed on a browser.

Improvements needed in the Notifications API

Although all of this sounds good, there are some flaws in the current specification of Web Notifications:

Also, the current implementation on Google Chrome would improve a lot if instead of using its own notification display system, it were integrated with external notification systems like Growl or libnotify.

« Home