Understanding the Notifications API

I continue a series of translations of html5rocks articles. We have already talked about how to embed fonts , how to work with video , today we will talk about how to make pop-up messages in the browser using the Notifications API . It works unfortunately so far only in Chrome, but there is already the initial version of the specification . Under the cut details.

First, we check if it is possible to use this functionality:

if (window.webkitNotifications) {
console.log( "Notifications are supported!" );
}
else {
console.log( "Notifications are not supported for this Browser/OS version yet." );
}


The name webkitNotifications is temporary - the standard is still not approved.

Next, create the notification itself, which can be either a simple text message or html. Below is a function that generates alerts of both types depending on the settings:

function createNotificationInstance(options) {
if (options.notificationType == 'simple' ) {
return window.webkitNotifications.createNotification(
'icon.png' , 'Notification Title' , 'Notification content...' );
} else if (options.notificationType == 'html' ) {
return window.webkitNotifications.createHTMLNotification( 'http://someurl.com' );
}
}


Now we’re probably moving to the key point in creating alerts — the security settings. Any of the above methods will throw a security error if there are no permissions. You can avoid these errors using try-catch or simply use the checkPermission method.

document .querySelector( '#show_button' ).addEventListener( 'click' , function () {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
createNotificationInstance({ notificationType: 'html' });
} else {
window.webkitNotifications.requestPermission();
}
}, false );


If permissions have not yet been issued, we will see the following message:


')
The key point here is that the requestPermission method can only be called as a result of an event, such as pressing a key. Thus, we always need user activity in order to display messages.

We can also trigger some actions related to the appearance of an alert — change the background color, play the sound, and so on. How to do this is shown below:

document .querySelector( '#show_button' ).addEventListener( 'click' , function () {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
notification_test = createNotificationInstance({notificationType: 'html' });
notification_test.ondisplay = function () { ... do something ... };
notification_test.onclose = function () { ... do something else ... };
notification_test.show();
} else {
window.webkitNotifications.requestPermission();
}
}, false );


Click the link to see an example of downloading the latest tweets from any user.

And the last comment. Only 5 messages can be displayed on the screen at a time, the rest will appear after closing visible ones.