June 20, 2021

How to Show Notification in Javascript using Notification API

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to show notification in javascript using Notification API. This is a great feature if you just want to greet your website users with a nice greeting message in the notification or promote some sort of product by providing a discount coupon in the notification message.

Any user who visits your website for the first time will be asked to grant permission so that he can receive notifications. A user can accept or decline the permission. It will only happen once so next time when that user will visit your website you can show him a notification right away.

We are going to cover only the basic usage of Notification API. The real power comes when you can send such notifications, also known as web push notifications, through a server or third-party service. Such a thing is out of the scope of this tutorial. You can google to learn more about web push notifications.

I recommend you to check out MDN docs for Notification API to learn more about it.

In the following example, we will show the notification to the user upon click of a button. Please have a look over the code example and the steps given below.

HTML & CSS

We have 2 elements in the HTML file (div and button). The div element is just a wrapper for the button element.
The innerText for the button element is “Show Notification”.

We are using style attribute with both div and button elements to apply some basic styles.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div style="margin-top: 20px; text-align: center;">
        <button style="padding: 10px 5px">Show Notification</button>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

Javascript

We have selected the button element using document.querySelector() method and stored it in the button variable.
We have attached a click event listener to the button element.
We are checking whether a browser supports Notification API or not by using if statement and Notification property of the window object.

We are requesting permission using requestPermission() method and then executing showNotication() method.
The showNotification() method has permission parameter which returns permission status.
We are using the Notification constructor to create an instance. It will take 2 parameters, the title of notification and an options object. The body will be the message in the notification and the icon will be the image that will be displayed on the right-hand side. I already have icon.png in the local directory, so just replace it with your image.

In the onclick event handler function, we are opening a website when somebody clicks on the notification. You can use window.open or window.location.href to open a website in javascript.

let button = document.querySelector('button');

button.addEventListener('click', () => {

    if(!window.Notification) return;
   
    Notification
    .requestPermission()
    .then(showNotification)
});


function showNotification(permission){
    if(permission !== 'granted') return;

    let notification = new Notification('My Title', {
        body:"Hi, how are you today?",
        icon:'icon.png'        
    })

    notification.onclick = () => {
        // window.open('https://google.com')

        window.location.href= "https://www.google.com"
    }
}

You May Also Like: