How To Work with Javascript Web Notification API Tutorial

Reading Time: 5 minutes

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.

Read More: How To Get Time Difference in Minutes in PHP Tutorial

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


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

Read More: How To Find By Column Name in Laravel Eloquent Tutorial

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>

    function askNotificationPermission() {

        Notification.requestPermission().then((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" });


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

Read More: Javascript Auto Refresh Current Page with Regular Intervals

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.

Sanjay KumarHello friends, I am Sanjay Kumar a Web Developer by profession. Additionally I'm also a Blogger, Youtuber by Passion. I founded Online Web Tutor and Skillshike platforms. By using these platforms I am sharing the valuable knowledge of Programming, Tips and Tricks, Programming Standards and more what I have with you all. Read more