Sending Push Notifications : Progressive Web Apps

We need permissions to send push notifications.

Key Points :

• Notifications must be timely.
• Should be precise (contains all the information a user needs).
• Should be relevant to the user.

Basic Example : An airline app must send push notifications such as “Your flight will be boarding from…”

Browser that supports push notifications are :

• Chrome 44
• Firefox 44
• Opera 42

Types of Notifications :

• Persistent Notifications: It is associated with the Service Worker.

  
  

  
  
  

  self.registration.showNotification('Title', {           actions : [ {                        action : 'View',          title : 'Action title',          icon : 'Path' }],  // other options});

  To Interact with them, there is different API :

  
  

  
  
  

  self.addEventListener('notificationclick', evt=>{    if(!evt.action)     {        Console.log('Notification Clicked');        return ;     }       // Handles action clicks   });

  View :

  
  

  
  
  

  self.addEventListener('notificationclick', evt=>{      switch(evt.action) {       case 'view' : Console.log('View action clicked');       break;       default : Console.warn('${evt.action}action clicked');       break; }});

• Non-Persistent Notifications: It is not associated with the Service Worker. As a developer, we interact with this through the notification API.

  Notification Static Member :

  
  

  
  
  

  if(Notification.permission === 'granted')   {        showNotification();        return;   } if(Notification.permission !== 'denied')   {         Notification.request Permission().then (p=> {            if(p === 'granted')            showNotification();         });  }

  How to show Notification :

  
  

  
  
  

  var n = new Notification('Title', // object {     body : 'body text',              // Little tiny badge at top left     // corner of screen     badge :'path',                    // Setting picture related to the     // notification, For Ex: Soda image     // in case of Sodapopped website     icon : 'path',               // Combining different Notifications     // by providing them with the same     // tag name     tag : 'tag name',                 // To notify buzz, set it true      renotify : false,         data : { //object}  );

Different other Properties can also be written in the following format :

Notification Instance Member :

var n = new Notification(‘Title’, {//options });

• n.addEventListener(‘error’, evt=>{ Console.error(‘There was a problem’, evt);});
• n.addEventListener(‘click’, evt=>{ Console.log(‘Notification clicked’);});
  n.close();