The Most Secure Cross Browser Testing Platform since 2012


Using Web Notifications API Cross Browser

BLOG / Web Development

Using Web Notifications API Cross Browser

The Web Notifications API allows a website to notify users of some event even if the website in question is currently not in the foreground. But, you might have guessed it, this API is not yet implemented in all major browsers as we can see on CanIUse.

Using the basic Notifications API is rather simple and can be done with a few lines of JavaScript.

Notification.requestPermission(function() {
    var notification = new Notification('My Notification', { body : 'You have a new notification' });

First, you need to request the user’s permission to show notifications. After that creating a new Notifications object is all it takes to display a notification.

This code will work out of the box in Chrome, Opera, Firefox, and Safari.

Unfortunately, neither Internet Explorer nor Microsoft Edge supports the notifications API at this point. You can work around this by using a polyfill like notification.js but this will not give you the full features the real API does.

Image by Johan Larsson