HTML5 Desktop Notifications

Posted on: June 4, 2016 by Dimitar Ivanov

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.

Figure 1. Web notification request permission

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.

Subscribe to our newsletter

Join our mailing list and stay tuned! Never miss out news about Zino UI, new releases, or even blog post.

0 Comments

Comments are closed

Categories