Why and How to implement Web Notification API.

Web Notification API in action on desktop browsers and Android devices.

Most of the websites nowadays use Web Notification API be it Facebook, Twitter, Flowdock, Slack …. you name it. Ever wondered how does that happen? Wanted to implement it but difficulty and fear of learning curve were driving you away? Let me tell you its just a few lines of code even a beginner can understand and start writing. So do not hesitate start implementing it right away with me.

First and foremost, we need to check if our browser supports Notification or not. You might be wondering everyone does, why should I check it? This is web, you have n number of browsers in the market for each platform. We cannot know who supports it who doesn’t for such a huge number of browsers. So prevention is better than cure and hence, I suggest we check it before your users go bananas on different browsers. Also, the best way to test these codes is to keep typing everything on browser console right away.

if (‘Notification’ in window) {
 alert(“Congrats you are using a modern browser and it supports Notification”);
}

Note: Currently for mobile devices, this is supported by Android only which too is not a core Web Notification API but a hybrid version of WebKit. Click on Can I Use Web Notifications to know about supported platforms and browsers.

Next, we need to request for permission to allow Notification on the browser for our website. Remember following pop ups on mobile and desktops for Facebook?

Facebook Web Notification for Chrome for Desktop and Chrome for Android

Yes, that is exactly what this part of the code is going to do. Just remember if the user blocks the Notification from your domain there is no way you can ask him again to allow Notification access unless he/she is desperate for your Notifications and he/she decides to go to settings and manually allow Notification from the browser. Here are the links for Chrome and Firefox to do that if in case you wanna do it manually for some of the domains that you blocked earlier. Let’s look at the code now

requestDesktopNotificationPermission(){
 if(Notification && Notification.permission === 'default') {
   Notification.requestPermission(function (permission) {
      if(!('permission' in Notification)) {
        Notification.permission = permission;
      }
   });
 }
}

Now that’s fine but how do I show my Notification pop up and its contents? That’s exactly what we will look now. Let’s see some of the Notification samples and try to understand how do they look and what are their components.

Components of Notification API

I’ll start with the code now and explain each of the parts later

//1.check permission 
//we can request permission here again if its value is 'default' //using the previously discussed code
desktopNotification: function() {
    if (Notification.permission === “granted”) {
      var text = "your Notification Body goes here";
      this.sendDesktopNotification(text);
    }
  },
//2. send Notification
sendDesktopNotification: function(text) {
    let notification = new Notification(‘Your Page Title’, {
      icon: ‘https://your_domain.com/your_web_page_image_icon.png’,
      body: text,
      tag: ‘soManyNotification’
    });
    //’tag’ handles muti tab scenario i.e when multiple tabs are 
    // open then only one notification is sent
//3. handle notification events and set timeout 
notification.onclick = function() {
      parent.focus();
      window.focus(); //just in case, older browsers
      this.close();
    };
    setTimeout(notification.close.bind(notification), 5000);
  }

1. Check Permissions
   We need to check if we have the Notification access from user before proceeding with Notification creation. If the `Notification.permission ===”default”` then we can request the permission using the previously discussed code. If the permission is blocked we would not like to proceed as it won’t be displayed even we try to display it.
2. Create and Send Notification
   Now we need to create a Notification instance by using Notification constructor which takes icon, title, body, and tag as parameters. This is pretty self explanatory with the above code and Notification screenshot attached above the code.
3. Handle Notification Events and Set Timeout
   This part defines what happens when the user clicks on the Notification. In most of the cases we would like to redirect user to our webpage or to some specific page of our app. We can define that here by giving dynamic webpage urls or simply using parent.focus(;)or window.focus(); (we are using both because of some browser incompatibilities with parent.focus()). Once the user clicks on the Notification and we have finished redirecting to appropriate page then we would like to close the Notification so we use this.close(); Also we can control for how much time this Notification appears to the user. This can be done using setTimeout() . It also calls close() inside a setTimeout()function to close the notification after 5 seconds (some browsers close spawned notifications automatically, and some such as Chrome and Opera do not.) Also note the use of bind() to make sure the close() call is associated with the notification.

Thanks for reading. Hope it helped you in creating web Notification for your web app.