Web Push Notification

Web Push Notification

As in android/iOS, in web app also we can have a push notification, in this blog you will learn step by step guide for creating a web notification for your website.

It is combination of Javascript and scripting language that your site uses, generally PHP.

=> Notification object properties are described below.

Methods, Properties, and Events: 

In web design service,The Web Notifications API is used from the Notification property of the window object. This is a constructor that allows us to create a notification instance. 
It accepts two parameters: 

  1. A string containing the title of the notification
  2. An optional object of settings. 

Following are parameters for Notification object:

  • body: A string used to further specify the purpose of the notification.
  • lang: Specifies the language of the notification. Its value must be compliant with the BCP 47 standard. For Examples en-US, it-IT.
  • dir: Defines the direction of the message’s text. Its value can be auto meaning that the direction is based on the browser’s settings, ltr to specify a left-to-right direction, or rtl to specify a right-to-left direction.
  • tag: A string that is used as an ID that can be employed to retrieve, replace, or remove the notification.
  • icon: Specifies the URL of an image that will be used as the notification’s icon.

=> To enable browser notification, user must allow notification from browser as described below.

document.addEventListener('DOMContentLoaded', function () {
  if (Notification.permission !== "granted") {
    Notification.requestPermission();
  }
});

This would as for Notification permission from your browser as below screenshot.

Web Push Notification

Use below script in your file to send notification to browser on clicking “Notify” button.

Web Push Notification

<script type="text/javascript">

      // DEFINES SET OF ARRAY TO BE USED FOR NOTIFICATION CONTENT
      var articles = [
        ["JOY OF GIVING","http://www.addwebsolution.com/blog/joy-giving"],
        ["Drupal 8 Must Know Features","http://www.addwebsolution.com/blog/drupal-8-must-know-features"],
        ["DrupalCon Dublin 2016 – Bringing back galore of memories!","http://www.addwebsolution.com/blog/drupalcon-dublin-2016-bringing-back-galore-memories"],
        ["Let's Foster Contribution!","http://www.addwebsolution.com/blog/lets-foster-contribution"],
        ["AddWeb Targeting - DrupalCamp London 2016","http://www.addwebsolution.com/blog/addweb-targeting-drupalcamp-london-2016"],
        ["London Eye – Drupal Camp 2016","http://www.addwebsolution.com/blog/london-eye-drupal-camp-2016"],
      ];

      document.addEventListener('DOMContentLoaded', function () {
          
        if (Notification.permission !== "granted") {
          Notification.requestPermission();
        }

        document.querySelector("#notificationButton").addEventListener("click", function(e) {
          var x = Math.floor((Math.random() * 10) + 1);
          var title=articles[x][0];
          var desc='Most popular blogs from AddWeb Solution.';
          var url=articles[x][1];
          notifyBrowser(title,desc,url);
          e.preventDefault();
        });

      });

      function notifyBrowser(title,desc,url) {
        if (!Notification) {
          console.log('Desktop notifications not available in your browser..'); 
          return;
        }
          
        if (Notification.permission !== "granted") {
            Notification.requestPermission();
        }
        else {
          var notification = new Notification(title, {
            icon:'https://takeajob.s3.amazonaws.com/company-assets/90/logos/takeajob_AddWeb_Solution_Pvt._Ltd._logo.medium.png',
            body: desc,
          });

          // Remove the notification from Notification Center when clicked.
          notification.onclick = function () {
            window.open(url);      
          };

          // Callback function when the notification is closed.
          notification.onclose = function () {
            console.log('Notification closed');
          };
        }
      }
    </script>

This would creates a browser notification for your website which would look something like shown in below screenshot.

Web Push Notification

Hope you enjoyed learning browser notification demo. For more information about Notification object please find detailed documentation from here.

Feel free to share your feedback.