Browser Notification Using Web Notification API

Last updated on August 28th, 2020 at 05:11 pm

In this post I can explain to you how we can show implement web and mobile browser notification Notification using Web Notification API. With help of Browser notification, you can send a notification to your user in your web application. You can follow simple steps to show browser notification in your application.

Send Browser Notification

Step 1. Create a simple layout using HTML as shown below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Browser Notification</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
    #container{ 
        margin:0px auto; width: 800px;
    }
    .button {
        font-weight: bold;
        padding: 7px 9px;
        background-color: rgb(25, 150, 247);
        color: #fff !important;
        font-size: 12px;
        text-decoration: none;
        text-shadow: 0 1px 0px rgba(0,0,0,0.15);
        border-width: 1px 1px 3px !important;
        border-style: solid;
        border-color: rgb(18, 102, 167);
        border-radius: 3px;
    }
    </style>
</head>
<body>
    <div id="container">
        <h1>Browser notification demo</h1>
        
        <h4>Generate Notification with tap on Notification</h4>
        <a href="#" id="showNotification" class="button">Notification</a>
    </div>
</body>
</html>

Output:-

Display Browser Notification Using Web Notification API

Step 2. Now we can add javascript and ask for permission to allow browser notification for your website. Add <script> and add below code and ask for permission

document.addEventListener('DOMContentLoaded', function (){
  if (Notification.permission !== "granted"){
     Notification.requestPermission();
  }
});

after implement above code save and run when you refresh your page you get pop like as shown in the image below

Display Browser Notification Using Web Notification API

Click on allow.

Step 3. Now we once you allow your site to show notification we can show notification, to show notification we need to add clicklistener on a link we add in our template(step 1) . to add click listener add below code

document.addEventListener('DOMContentLoaded', function (){

    if (Notification.permission !== "granted"){
        Notification.requestPermission();
    }

    document.querySelector("#showNotification").addEventListener("click", function(e){

        // SHOW NOTIFICATION
        e.preventDefault();
    });
});

Step 4. Now we can create a function through which we can show notification on click on button add below code in your script and call inside your click listener

function notifyBrowser(title,desc,url){

    if (!Notification) {
        console.log('Desktop notifications not available in your browser..');
        return;
    }
    
    if (Notification.permission !== "granted") {
        Notification.requestPermission();
    } else {
        var notification = new Notification(title, {
            icon:'https://trinitytuts.com/wp-content/uploads/2018/07/macaw.png',
            body: desc,
        });
        
        notification.onclick = function () {
            window.open(url);
        };

        notification.onclose = function () {
            console.log('Closed notification popup');
        };
    }
}

Complete script code:-

<script type="text/javascript">

    var title="Trinity Tuts";
    var desc='Most popular blogs.';
    var url= "trinitytuts.com";
    
    //notifyBrowser(title,desc,url);

    document.addEventListener('DOMContentLoaded', function ()
    {

        if (Notification.permission !== "granted"){
            Notification.requestPermission();
        }

        document.querySelector("#showNotification").addEventListener("click", function(e){
            notifyBrowser(title,desc,url);
            e.preventDefault();
        });

    });

    function notifyBrowser(title,desc,url)
    {
        if (!Notification) {
            console.log('Desktop notifications not available in your browser..');
            return;
        }
        if (Notification.permission !== "granted") {
            Notification.requestPermission();
        } else {
            var notification = new Notification(title, {
                icon:'https://trinitytuts.com/wp-content/uploads/2018/07/macaw.png',
                body: desc,
            });
            
            notification.onclick = function () {
                window.open(url);
            };

            notification.onclose = function () {
                console.log('Closed notification popup');
            };
        }
    }

</script>

Now refresh your page and click on the button and you get the output as shown in below image.

Display Browser Notification Using Web Notification API