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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    To Interact with them, there is different API :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    View :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • 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 :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    How to show Notification :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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} 
    );

    chevron_right

    
    

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

  • Action Related Properties –
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    var n = new Notification('Title', // body, images, tag, etc.
    {
        // True, when notifications remain open until
        // the user explicitly clicks on it to         
        requiredInteraction : false, close
        actions : [ {              
            // Takes objects which has three properties
            action : 'Id',
            title : 'Action title',
            icon : 'Path' 
        }],
    });

    chevron_right

    
    

  • Sound Properties –
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // body, images, tag, data, action
    // True, vibrate or make sound
    silent : false
      
    // path to sound (Till date no browser
    // supports this)
    sound : 'path',     
      
    // This indicates to vibrate for 200ms
    // then 100ms then 200ms, so on      
    vibrate : [200 100 200], 

    chevron_right

    
    

  • Miscellaneous Properties –
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Direction (left to right or right to left(rtl))
    dir : 'ltr',    
     
    // Language
    lang :'en-US',   
    timestamp : Date.now()   // Time

    chevron_right

    
    

  • 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();


    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :

    1


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.