HTML5 Web notification API

Introduction

Web notifications are the ability for an application to notify user even if they are not at the web page in the form of small notification popup box. This creates a great deal for the web applications where even if the interaction between the web application and user is not in synch they can have notifications reached to the end user.

Let me first introduce you to the various types of the notifications so it will be easy to explain different use cases for.

• Ambient notification: A notification which appears and disappears automatically without user action.
• Interactive notification: A notification which can receive events from user actions and deliver them to the application which created the notification.
• Persistent notification: A notification which is displayed until the user explicitly dismisses it.
• Notification platform: A notification platform is a system outside the browser which provides desktop notifications. Examples include Growl on MacOS, NotifyOSD on Linux, and the Windows notification API.
• Simple notification: A notification which consists only of an icon and one or two lines of text.
• Web notification: A notification which consists of Web platform content, such as HTML or SVG.

This specification provides an API to generate simple notifications to alert users outside of the web page. When this specification refers to displaying notifications on the "desktop", it generally refers to some static display area outside the web page, but may take several forms, including:

• a corner of the user's display,
• an area within the chrome of the browser,
• the "home" screen of a mobile device

User case

When an application need to display email related notifications to user about ‘new email arrived’ it can display ambient notification with new email subject, from, etc. fields or it can display an interactive notification with an ability to return to inbox.

An application where it needs to display a upcoming meeting notification that the user might have set in his calendar or interactive notification that will allow user to snooze the meeting reminder for specific time interval.

Sometimes it can also span over wide range of notifications where say some one has posted on user’s comment, status on Facebook and user has opened multiple tabs in browser where Facebook needs to notify user about this activity.

Some application like Flicker or Picasa might want to notify user about his image upload completion progress by the time he has navigated away from the current tab.

One of the security aspects that need to be considered by an author is to make sure that the user has granted permission for a notification to appear on his platform.

Examples

Notification objects dispatch events during their lifecycle, which authors can use to generate desired behaviors. The show event occurs when the notification is shown to the user -- this may be at some time after the show() method is called in the case of limited display space and a queue. In the following example, this event is used to guarantee that regardless of when the notification is shown, it is displayed for only 15 seconds.

var notification = new Notification("mail.png", "New Email Received");

notification.onshow = function() { setTimeout(notification.cancel(), 15000); }

notification.show();

When a meeting reminder notification is acknowledged, the application suppresses other forms of reminders.

var notification = new Notification("calendar.png", "Meeting about to begin", "Room 101");

notification.onclose = function() { cancelReminders(event); }

notification.show();