⬆️ ⬇️

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:



image

')

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.

Source: https://habr.com/ru/post/104670/



All Articles