Reading Time: 5 minutes

794 Views

Inside this article we will see the concept i.e How To Work with Javascript Web Notification API Example Tutorial. Article contains the classified information about Creating a Browser Notification in JavaScript.

Web notifications API was designed to display frontend / end user notifications (desktop notifications), which allows alerting the user outside the context of a web page.

This API is really very useful to show real time notifications like new email notifications, new tweet notification, new message notification ..etc, but the only thing you need to remember is the user interface of this notifications are not consistent. User Interface may vary depending on the browser (FF,Google Chore..etc) and devices.

If you are looking for a solution i.e How To Create Push Notifications in JavaScript then this article will help you a lot for this. Tutorial is super easy to understand and implement it in your code as well.

Let’s get started.

How To Create Web Browser Notification

There are few steps which you need to follow to add a browser notification in your application. Before showing any browser notification, first you need to check the user’s browser permission.

Check User’s Browser Permission

Request Permission To user for Notification

Notification.requestPermission();

Check Notification permission Available – Permission is from any of these (default, granted, denied)

default – When user either does not select any of these – Allow and Block
granted – When user allows notification
denied – When user blocks notification

window.Notification && Notification.permission !== "denied"

Ask for User’s permission

Notification.requestPermission().then((result) => {

   console.log(result); // result: default, granted, denied
});

Create Notification

var n = new Notification(title, options)

title: Notification title

options: It includes body, icon, tag, etc.

Let’s see the complete code to check notification permission and show notification if permission is allowed.

Application Programming

Create a folder say web-notification in your localhost directory. Create a file index.html into it.

//...

<button onclick="askNotificationPermission()" style="padding:20px;margin:150px;">Show Notification</button>

<script>
    function askNotificationPermission() {

        Notification.requestPermission().then((result) => {
            //console.log(result);
            // result: default, granted, denied
            if (result == "granted") { // If allowed
                // Show notification
                var n = new Notification("OWT Notification", { body: "Welcome To Online Web Tutor", icon: "logo.png" });
            }
        });
    }
</script>

//...

Here, you can see logo.png used for icon which is an image stored into the same location where index.html exists.

Application Testing

Open browser and type your application URL:

URL: http://localhost/web-notification/index.html

When you open it, it will ask you for the permission if notification disabled in browser. If you allow it, then it will show you the notification of browser.

Once, we allow notification then it start showing notifications.

We hope this article helped you to learn How To Work with Javascript Web Notification API Tutorial in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.