Tutorial on making web notifications using HTML5’s notification API

Time:2022-1-2

When using the web version of Gmail, whenever you receive a new email, the corresponding prompt box will pop up at the bottom right of the screen. With the notification API provided by HTML5, we can also easily implement such functions.
Ensure browser support

If you are developing on a specific version of the browser, I suggest you check the browser’s support for the notification API in caniuse first to avoid wasting your precious time on an unusable API.
How to start
 

JavaScript CodeCopy contents to clipboard
  1. var notification=new Notification(‘Notification Title‘,{  
  2.     body:’Your Message’   
  3. });   
  4.   

The above code constructs a simple notification bar. The first parameter of the constructor sets the title of the notification bar, while the second parameter is an option object, which can set the following properties:

  • Body: sets the body content of the notification bar.
    Dir: defines the display direction of the notification bar text, which can be set to auto, LTR (from left to right) and RTL (from right to left).
    Lang: the language in which the text in the notice column is declared. (Note: the value of this attribute must belong to BCP 47 language tag.)
    Tag: assign an ID value to the notification bar to facilitate retrieval, replacement or removal of the notification bar.
    Icon: set the URL of the picture as the icon of the notification bar

Get permission

Before displaying the notification bar, you need to apply for permission from the user. The notification bar can appear in the screen only with the permission of the user. The processing of permission application will have the following return values:

  • Default: the user’s processing result is unknown, so the browser will be regarded as the user’s refusal to pop up the notification bar. (Browser: I won’t notify you if you don’t ask for notification)
    Denied: the user refuses to pop up the notification bar. (“user: get out of my screen”)
    Granted: the user is allowed to pop up the notification bar. (“user: Welcome! I’m glad to use this notification function”)
       
       
JavaScript CodeCopy contents to clipboard
  1. Notification.requestPermission(function(permission){   
  2.     //display notification here making use of constructor   
  3.     });   
  4.   

Create a button with HTML
 

XML/HTML CodeCopy contents to clipboard
  1. <button id=“button”>Read your notification</button>  
  2.   

Don’t forget CSS
 

CSS CodeCopy contents to clipboard
  1. #button{   
  2.   font-size:1.1rem;   
  3.   width:200px;   
  4.   height:60px;   
  5.   border:2px solid #df7813;   
  6.   border-radius:20px/50px;   
  7.   background:#fff;   
  8.   color:#df7813;   
  9. }   
  10. #button:hover{   
  11.   background:#df7813;   
  12.   color:#fff;   
  13.   transition:0.4s ease;   
  14. }   
  15.   

All JavaScript codes are as follows:
 

JavaScript CodeCopy contents to clipboard
  1. document.addEventListener(‘DOMContentLoaded’,function(){   
  2.         document.getElementById(‘button’).addEventListener(‘click’,function(){   
  3.             if(! (‘Notification’ in window) ){   
  4.                 alert(‘Sorry bro, your browser is not good enough to display notification’);   
  5.                 return;   
  6.             }       
  7.             Notification.requestPermission(function(permission){   
  8.                 var config = {   
  9.                               body:‘Thanks for clicking that button. Hope you liked.’,   
  10.                               icon:‘https://imgs.developpaper.com/imgs/MetroUI_HTML5.png’,   
  11.                               dir:‘auto’  
  12.                               };   
  13.                 var notification = new Notification(“Here I am!”,config);   
  14.             });   
  15.         });   
  16.     });   
  17.   

It can be seen from this code that if the browser does not support notification API, a warning “sorry bro, your browser is not good enough to display notification” will appear when you click the button. Otherwise, with the user’s permission, our self-made notification bar can appear on the screen.

Why do you want users to manually close the notification bar?

For this problem, we can use the setTimeout function to set a time interval so that the notification bar can be closed regularly.
 

JavaScript CodeCopy contents to clipboard
  1. var config = {   
  2.                body:‘Today too many guys got eyes on me, you did the same thing. Thanks’,   
  3.                icon:‘icon.png’,   
  4.                dir:‘auto’  
  5.              }   
  6. var notification = new Notification(“Here I am!”,config);   
  7. setTimeout(function(){   
  8.     notification.close(); //closes the notification   
  9. },5000);   
  10.   

That’s all I have to say. If you want to know more about the notification API, you can read the following page:

    MDN
    Paul lund’s tutorial on notification API

View the demo on codepen

You can see the code written by Prakash (@ imprakash) on codependemo