JavaScript Notifications API enables web pages to display messages to users on their devices across different platforms. These notifications appear even after the user has switched tabs or moved to another application. These messages (also called or notifications) can be used to notify the user about important events such as an email, new social media message, live chat notification, calendar reminders, etc. You can even use system notifications to send marketing campaigns. system desktop In this tutorial, I'll explain the primary usage of Notifications API to display messages to the user while the site is opened in a browser tab. API Usage The Notifications API is fairly new and it may not work in older browsers. Therefore, you should explicitly verify if the API is supported by the browser or not before showing a message. You can do this by checking if the has a property called : window Notification if(!window.Notification) {
	console.log('Browser does not support notifications.');
} else {
	// display message here
} On supported platforms, displaying a desktop notification involves requesting permission and creating a new notification to display to the user. Note: The Notification API requires your website to use an SSL certificate. It does not work on insecure origins (HTTP). Requesting Permission The user needs to grant the current origin permission to show desktop notifications. You can easily check if the user has already been granted permission to display system notifications using property. This property has the following possible values: Notification.permission - The user has not yet decided to accept notifications from your site default - The user has allowed your site to display notifications granted - The user has chosen to block notifications from your site denied If it is the first case, you can request permission from the user using of the Notifications API. It will open a dialog to ask the user to either allow or block notifications from this site. Once the user has made a choice, the setting will be saved for the current session. requestPermission() If the user has already denied the request for showing notifications, we can not do anything. The browser will ignore any request to show a notification or request permission again. if (!window.Notification) {
    console.log('Browser does not support notifications.');
} else {
    // check if permission is already granted
    if (Notification.permission === 'granted') {
        // show notification here
    } else {
        // request permission from user
        Notification.requestPermission().then(function(p) {
           if(p === 'granted') {
               // show notification here
           } else {
               console.log('User blocked notifications.');
           }
        }).catch(function(err) {
            console.error(err);
        });
    }
} The returns a promise. The callback function will be called once the promise is either resolved or rejected (upon user choice of notifications). requestPermission() Showing Notification If the user has chosen to accept notifications from our site, you can create a new desktop notification using to display it to the user. Just pass a title to the constructor to create a new notification. Notification() var notify = new Notification('Hi there!'); Optionally, you can also pass an options object to specify text direction, body text, the icon to display, notification sound to play, and more. var notify = new Notification('Hi there!', {
    body: 'How are you doing?',
    icon: 'https://bit.ly/2DYqRrh',
}); Putting everything all together, we can create a function that will show a desktop notification once called, requesting permission if not already granted: function notifyMe() {
    if (!window.Notification) {
        console.log('Browser does not support notifications.');
    } else {
        // check if permission is already granted
        if (Notification.permission === 'granted') {
            // show notification here
            var notify = new Notification('Hi there!', {
                body: 'How are you doing?',
                icon: 'https://bit.ly/2DYqRrh',
            });
        } else {
            // request permission from user
            Notification.requestPermission().then(function (p) {
                if (p === 'granted') {
                    // show notification here
                    var notify = new Notification('Hi there!', {
                        body: 'How are you doing?',
                        icon: 'https://bit.ly/2DYqRrh',
                    });
                } else {
                    console.log('User blocked notifications.');
                }
            }).catch(function (err) {
                console.error(err);
            });
        }
    }
} Now we can call the above function when the user clicks a button: <button onclick="notifyMe()">Notify Me</button> Alternatively, you can bind the above function to the event which will be called once the web page is completely loaded: onload <!DOCTYPE html>
<html>
<body onload="notifyMe()">

</body>
</html> ✌️ I write about modern JavaScript, Node.js, Spring Boot, and web development. to get web development tutorials & protips every week. Subscribe to my newsletter Also published . here

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Display Desktop Notifications Using JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

103 Stories To Learn About Tutorial For Beginners

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

103 Stories To Learn About Tutorial For Beginners

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps