Table of Contents

WEB NOTIFICATIONS

Thanks to HTML5 specification modern browsers are able to display desktop notifications. If you ever have seen such a popup, that is because user-agent asks for permission to display web notifications from current domain.
Granting permission the domain for notifications, allows the website to display notifications, that looks like this:
The icon at the bottom right corner of the notification, allows you to manage the notification exceptions.
In Chrome, navigate to Settings » Privacy » Content settings… » Notifications » Manage exceptions…

NOTIFICATION API

  • How to check whether notifications are supported:
    if ('Notification' in window) {

    }
  • To find out the current permission to display notifications, use the permission static property. Possible values are:granteddenied and default.
    if (Notification.permission !== 'denied') {

    }
  • How to ask for permission:
    Notification.requestPermission(function (permission) {
    if (permission === 'granted') {
    // create notification
    }
    });
  • How to create notification:
    var note = new Notification('Hooray!', {
    icon
    : 'https://example.com/notification-icon.png',
    body
    : 'Lorem ipsum dolor sit amet.'
    });
  • The notification object supports onclick and onerror event handlers.
    note.onclick = function(e) {
    e
    .preventDefault();
    window
    .open('https://zinoui.com', '_blank');
    }
  • How to close notification:
    note.close();

BROWSER COMPATIBILITY

Edge 14+, Firefox 22+, Chrome 22+, Safari 6+, Opera 25+

CONCLUSION

Web notifications are great addition to the web platform and could be used practically anywhere. That makes them extremely useful.