HTML5 Desktop Notifications

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:granted, denied 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.