How To Add Browser Notification Using JavaScript

There is a lot of methods to enable a popup notification for a certain event on the browser. But all of that notifications will be in your webpage. The user will see the notification if the user is on that page.
But today I am here to tell you guys a cool JavaScript program for the browser side that will give notifications on your browser.
In recent times to promote your blog, it’s very useful to add these push notifications so that you can achieve more visitors to your website.

 

This notification will work even if the user is not on the webpage. The browser will send the user a notification.

You can use this feature as per your need, but here I will create a button.

When a user will click that button user will be asked for permission from the web browser. The user just needs to allow that button in order to receive notifications.

So without wasting time I’m gonna show you how it works and will tell you some basic implementations.

 

JavaScript code for browser push notification

You just need to put it anywhere you want to.

Or for testing, you might save it in a “.html” file or PHP file.

Below is given our JavaScript program:

// browser will ask for permission
<script type="text/javascript">document.addEventListener('DOMContentLoaded', function () {
  if (!Notification) {
    alert('Desktop notifications not available in your browser. Try Chromium.'); //if browser is not compatible this will occur
    return;
  }

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

function notifyMe() {
  if (Notification.permission !== "granted")
    Notification.requestPermission();
  else {
    var notification = new Notification('CodeSpeedy (Notification Title)', {
      icon: 'https://www.codespeedy.com/wp-content/themes/codespeedy/img/CodeSpeedy-Logo.png',
      body: "New Notification! Click to Check",
    });

    notification.onclick = function () {
      window.open("http://170.187.134.184");      
    };

  }

}</script>

Now to achieve your target you need to add a button so that users can click on that and the JavaScript starts working.

Add Button

Below is the button with the onclick attribute by providing the notifyMe() as the function call:

<button onclick="notifyMe()">Click me!</button>

 

notifyMe() is the JavaScript Function which is provided in the previous source code. Check the first code to clarify it.

notification.onclick = function () {
      window.open("http://170.187.134.184");      
    }

This is the onclick function for the event which is going to be occurred after clicking the notification.
window.open("URL")    —- In the  URL field you can place the website URL which you want your users to be driven.

 

Leave a Reply

Your email address will not be published. Required fields are marked *