Introduction to Web Notifications API

Modern web overwhelmed by social networks having posts, replies and comments. Also Photos and videos play a vital role. This could be vital progress when compared to old system faded out of memory. A single page provides facility for tabbed browsing. Several enhancement were made to avoid the need for looking at new activies by clicking the tab. Notifications are considered one of that.

We were using own implementation to show the notifications in different styles. W3C has defined Web Notifications API to solve this problem. This could be the same kind we notice in mobile devices where various application show notification.

Definition

The Web Notifications API is “an API for front-end user notifications”. A notification allows the user to see alerts outside the context of a web page of an occurrence such as delivery of mail, user login, chat notification, process complete etc. The notifications will be in different style on different browser and based on the device we use. In mobile we usually see the notification in notification bar.

There are two major versions of API as it grown to stable now. The first version was implemented in older versions of chrome and Firefox. Now the specification seems to be stable.

Explore API

Web Notifications API can be accessed through Notification property of the window object. This is a constructor that helps to create a notification instance. It accept two parameters namely title of notification and an optional object of settings.

var notification = new Notification('Email received', {
 body: 'You have a total of 3 unread emails',
 lang: 'en-US',
 dir:'auto',
 tag:'disp-notify',
 icon:'images/notify.png',
});

Here

1. ‘body’ specify the purpose of the notification.
2. ‘lang’ specifies the language the notification. It’s value must be compliant with the BCP 47 Standard.
3. ‘dir’ specifies the direction of message’s text. To use the browser setting we have to set the value to ‘auto’. ‘ltr’ specifies text direction as left-to-right. ‘rtl’ to specifies text direct as right-to-left.
4. ‘tag’ specifies the ID that helps to retrieve, replace, or remove the notification.
5. ‘icon’ specifies the image url used for notification icon.

The settings we pass are also available as read-only properties of notification instance. There is an additional property called ‘permission’. ‘permission’ dictates the current permission to display notifications in string format. It’s value can be of any one of the following,

• ‘denied’ means that the user has denied notification.
• ‘granted’ means that the user has given permission to notifications.
• ‘default’ means that the user choice is unknown.

This API exposes the following methods.

• ‘requestPermission’ is used to request the permission from user to show notifications. It accepts an optional callback that is executed when the user accepts or denies permission. User chosen choice is passed to the callback as a parameter.
• ‘close’ is used to close the notification using code.

This API exposes the following events to which we can attach handler to do specific action as soon as the status of notification changes.

• ‘onclick’ is fired when user clicks on the notification
• ‘onclose’ is fired as soon as the user or the browser closes the notification
• ‘onerror’ is fired if an error occurs with the notification.
• ‘onshow’ is fired when the notification is shown.

Browser Compatibility

New version of API gets implemented from chrome 22 and Firefox 22 and both without a vendor prefix. Safari 6+ also supports this API. On the mobile side, only Firefox and Blackberry have full support. We can do a check with following code

if ('Notification' in window) {
 // API supported
} else {
 // API not supported
}

Dive into Action

The following example get the latest tweet made from your twitter timeline. Twitter REST API helps to achieve this. We can change the code to run in a scheduled interval to retrieve latest tweet made.

The code verifies the notification availability in browser and the permission granted. When there is no permission it raises the request for permission and when granted tries to connect with PHP script to get latest tweet and in turn PHP script get the tweet using twitter wrapper library.

The code requires twitter app created in order to connect to timeline, so we have provide all credentials in ‘notify.php’ before getting that into work.

You can download the source code here.