How to show Notifications using Javascript?
What are Browser Notifications?
The Side Popups which appear on the browser are called Notifications. They are only displayed when the user is opted by allowing when the browser asks for permission to allow these notifications to be displayed.
Throughout this tutorial, we’ll be doing most work on Notification
class.
How does it work?
Notification
API is used to display notifications. The step starts by triggering Notification.requestPermission
a method that will ask for permission for enabling notification coming from the website.
And If the client has already allowed or blocked the showing of notification it will not show the dialog box again.

chrome browser show notification request permission alert box
And then for display notifications create an object from Notification
a class. The browser will detect it and it will be displayed.

sample notification displayed in chrome browser
Checking if a client has given Permission to allow notifications
For permission there are three types of choices available:
- default: Represents when the browser doesn’t know whether the client is allowed or denied the notification.
- granted: Represents when a client has to allow an application to show notifications.
- denied: Represents when a client has blocked notifications from displaying.
Note
The website must have an SSL certificate in order to display Notifications.
Check permission for Notification
If you want to know whether notification permission status before you ask for notification permission. Use the Notification.permission
property.
Notification.permission;
Ask for Permission to allow notifications
If a client has not granted permission you may choose the remind client for providing the necessary permissions to display notification by using Notification.requestPermission()
method.
The Notification.requestPermission()
will return a promise and can be evaluated using then()
method or by using async
and await
.
Notification.requestPermission() .then( perm => console.log("Permission:", perm)) .catch(e => console.log("error", e));
This will show the alert box and ask’s client to allow or block notification.
Show Notifications
Create an object from the class Notification
and the required parameter to the constructor.
let title = "Test Title"; let body = "Test content"; let icon = "https://thecodelearners.com/wp-content/uploads/2020/12/icon.jpg"; // optional let newNotification = new Notification(title, { body, icon });
Notification
an object the notification will be automatically called.Triggering function on Notification Click
A method onclick
will be called when the client clicks on the notification popup card.
newNotification.onclick = function(e){ console.log("event", e); }
Triggering function on Notification Show
A method onshow
will be called when a notification is displayed.
newNotification.onshow = function(e){ console.log("onshow event", e); }
Triggering function on Notification close
A method onclose
will be called when the notification is closed.
newNotification.onclose = function(e){ console.log("onclose event", e); }
Triggering function on Notification error
A method onerror
will be called when the notification encounters an error.
newNotification.onerror = function(e){ console.log("onerror", e); }
Increase visibility time for browser notification
By default, the notification displayed expires in 5 seconds. And to increase the time duration pass requireInteraction
as true
.
Next time when notifications will be displayed they will be closed only after the client clicks on the close button.
Notification(title, { body, icon, requireInteraction: true, })
Trigger vibrate for devices
Within the objects as a second parameter you can also pass vibrate: true to trigger vibration when the device receives a notification.
Notification(title, { body, icon, vibrate: true, })
Check if Browser Supports Notification
Here is a very straightforward way to check whether your browser supports Notification by using the below snippet.
typeof Notification !== "undefined"
Cross-Browser Compatibility for Notification
Still, some modern browsers don’t support completely support sending notifications.
And here is the website caniuse.com to check which browsers do support and which don’t.