Creating a Desktop Notification using JavaScript Notification API Tutorial

Submitted by oretnom23 on Saturday, October 8, 2022 - 13:05.

Introduction

In this tutorial, I will teach you how to create a Desktop Notification using JavaScript Notification API. This tutorial aims to help IT/CS students or beginners learn some ways and techniques for developing web applications. Here, sample source code and snippets will be provided that demonstrates how to use JS Notification API and how to apply it to your own site or web application.

What is a Desktop Notification?

A Desktop Notification is a popup notification window on your desktop that notifies your software or application end-users. It contains data or content about the site or software notification which commonly includes the site logo, image banner, title, and description. Desktop notification helps your application or site to alert your end-users even if the browser is minimized.

What is a JavaScript Notification API?

Notification API is JavaScript API for displaying notifications to end-users. These can be seen even after the user has changed tabs or switched to another app because they are outside the top-level browsing context viewport. The API is intended to work with current notification systems on various platforms.

How to enable Notification in your browser?

The JavaScript Notification API provides the developer with a simple script for asking end-users to allow the site to use the browser's or system's notification feature to alert or notify them. To ask the end-user, you can use the Notification.requestPermission() method. Here's an example snippet for using requestPermission() method of Notification API.

Notification.requestPermission().then((permission)=>{
    if(permission === 'granted'){
        alert("Notification Permission is Granted")
    }else if(permission === 'denied'){
        alert("Notification Permission is Denied")
    }
})

Note: The Notification API is not supported by some other browsers or platforms. to learn more about this API compatibility. Visit https://developer.mozilla.org/en-US/docs/Web/API/notification#browser_compatibility

Example

Here is an example application that demonstrates the usage of Notification API.

Site Page Interface

The following script uses Bootstrap Framework CDN which means an internet connection is required to run the script with the right design on your local machine.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Desktop Notification Demo</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
 
    <style>
        html, body{
            min-height:calc(100%);
            width: calc(100%);
        }
        body{
            min-height: 100vh;
            width: 100vw;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body class="bg-light bg-gradient">
    <div class="container w-100">
        <h1 class="text-center fw-bolder my-4">Desktop Notification using JavaScript Notification API</h1>
        <div class="d-flex justify-content-center">
            <hr class="col-4">
        </div>
        <div class="card rounded-0 shadow col-lg-5 col-md-7 col-sm-12 mx-auto">
            <div class="card-body">
                <div class="container-fluid">
                    <p>This is a sample application that demonstrates the JavaScript Notification API.</p>
                    <p class="text-muted">Sample Code of using JS Notification API</p>
    <pre class="text-bg-dark">
    <code>
        if(!("Notification" in window)){
            alert("Your current browser does not support desktop notification!");
            console.error("Your current browser does not support desktop notification!");
        }else{
            console.log(Notification.permission)
                if(Notification.permission !== 'granted' && Notification.permission !== 'denied'){
                    Notification.requestPermission().then((permission)=>{
                        if(permission === 'granted'){
                            alert("Notification Permission is Granted")
                        }else if(permission === 'denied'){
                            alert("Notification Permission is Denied")
                        }
                        location.reload()
                    })
                }
        }
    </code>
    </pre>
                    <div class="d-grid gap-2">
                        <button class="btn btn-sm btn-primary rounded-0" type="button" id="notif1">Sample Notification #1</button>
                        <button class="btn btn-sm btn-warning rounded-0" type="button" id="notif2">Sample Notification #2</button>
                        <button class="btn btn-sm btn-info rounded-0" type="button" id="notif3">Sample Notification #3 w/ Image</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
 
<script src="./notification.js"></script>
</html>

Main JS Script

The following script is a JavaScript file that contains the scripts that request permission to end-user for using notification and triggers the sample notifications.

$(document).ready(function(){
 
    function ask_permission(){
        if(!("Notification" in window)){
            alert("Your current browser does not support desktop notification!");
            console.error("Your current browser does not support desktop notification!");
        }else{
            console.log(Notification.permission)
                if(Notification.permission !== 'granted' && Notification.permission !== 'denied'){
                    Notification.requestPermission().then((permission)=>{
                        if(permission === 'granted'){
                            alert("Notification Permission is Granted")
                        }else if(permission === 'denied'){
                            alert("Notification Permission is Denied")
                        }
                        location.reload()
                    })
                }
        }
    }
    ask_permission()
    $('#notif1').click(function(){
        if(Notification.permission === 'default'){
            ask_permission()
        }else if(Notification.permission === 'granted'){
            var notification = new Notification("Sample Notification #1",{
                body:"This is a sample notification content or description 101.",
                icon:'http://localhost/js_notification/test-icon.png'
            })
            notification.onclick = (event)=>{
                    event.preventDefault()
                    window.open("https://sourcecodester.com")
            }
        }else{
            alert("Notification Permission is not granted.")
        }
    })
 
    $('#notif2').click(function(){
        if(Notification.permission === 'default'){
            ask_permission()
        }else if(Notification.permission === 'granted'){
            var notification = new Notification("JavaScript Tutorials",{
                body:"Here are some tutorials of using JavaScript for IT/CS Students or beginners.",
                icon:'http://localhost/js_notification/test-icon.png'
            })
            notification.onclick = (event)=>{
                    event.preventDefault()
                    window.open("https://www.sourcecodester.com/tutorial/javascript")
            }
        }else{
            alert("Notification Permission is not granted.")
        }
    })
    $('#notif3').click(function(){
        if(Notification.permission === 'default'){
            ask_permission()
        }else if(Notification.permission === 'granted'){
            var notification = new Notification("JavaScript Tutorials",{
                body:"This mini-project is entitled Basketball Scoreboard Application. It is a web application that simulates the scoreboard of a basketball game. It has a simple and dark user interface, easy-to-read fonts, and uses Bootstrap Framework.",
                icon:'http://localhost/js_notification/test-icon.png',
                image:'https://www.sourcecodester.com/sites/default/files/styles/large/public/images/oretnom23/JS-scoreboard-basketball.jpg'
            })
            notification.onclick = (event)=>{
                    event.preventDefault()
                    window.open("https://www.sourcecodester.com/javascript/15730/basketball-scoreboard-application-using-javascript-and-jquery-free-source-code")
            }
        }else{
            alert("Notification Permission is not granted.")
        }
    })
})

Sample Snapshots

Here are the snapshots of some results of the example application.

Application Main Page

Sample Notification

Sample Notification with Image

DEMO VIDEO

There you have it! You can now test the sample application that demonstrates the usage of JS Notification API. You can also download the sample application source code on this website for free. The download button is located below this article. Feel free to download and modify it to do some experiments using the said API.

That's the end of this tutorial. I hope this JavaScript Notification API Tutorial helps you with what you are looking for and that you'll find this useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Add new comment

899 views