Displaying notifications (deprecated)

Firefox offers support for "desktop notifications"; these are notifications that are displayed to the user outside the context of the web content, using the standard notification system provided by the operating system.

For example, on Android, notifications appear in the bar at the top of the screen, and in the panel that appears when you drag that bar downward.

Creating a notification

The first thing you need to do is create the notification object by using the navigator.mozNotification object's createNotification() method, as follows:

var notification = navigator.mozNotification.createNotification(
        "Hey, check this out!", "This is a notification posted by " +
        "Firefox 4. You should take some action. Right now!");

This returns a new notification object, but does not actually display the notification. This lets you configure the event listeners before the notification is shown, if you need to be notified when the notification is dismissed.

Setting up event listeners on the notification

There are two events you can listen to on created notifications:

onclick

This event is fired when the user clicks (or taps) on the notification.

onclose

This event is fired when the notification is closed (whether by being clicked or by some other means).

For example, let's simply append a little HTML to our document when these events fire:

notification.onclick = function() {
  var e = document.createElement("p");
  e.innerHTML = "<strong>The notification was clicked.</strong>";
  document.body.appendChild(e);
};
notification.onclose = function() {
  var e = document.createElement("p");
  e.innerHTML = "<strong>The notification was closed.</strong>";
  document.body.appendChild(e);
};

Displaying the notification

Once the notification is configured the way you want it to be, call its show() method to display the notification:

notification.show();

On Android, for example, the resulting notification panel looks like this:

When the user taps on the "Hey, check this out!" notification here, the resulting changes to the document look like this:

If you're using Firefox Mobile, you can see this example live by tapping the button below.

View Live Examples

See also

• navigator.mozNotification
• notification