How to Add App to Home Screen : Progressive Web Apps

Web App Manifest is a simple JSON file that tells the browser about your web application and how it should behave when ‘installed’ on the user’s mobile device or desktop.

We Need to add a link of Manifest in order to add the Web App to Home Screen.
Write in the HTML Head of your Code.

How Manifest File is created :
For creating this file, we need to have certain Properties such as :
1. Identify your App (Identification) – This must contains the Name and the Short_Name



     "name" : "EbullientMind",
     "short_name" : "EbullientMind"

2. Present your App (Presentation) – This must contains the Start_URL, Theme_color, Background_color, Orientation and Display

     "start_url" : "[provide_path]",
     "background_color" : "[provide_color]",
     "theme-color" : "[provide_color]",
     "orientation" : "any",
     "display" : "standalone"  

3. Icons – This must contains certain functions such as : src, type, sizes

 
     "icons" :
      [{
     "src" : "[provide_path]",
     "type" : "[provide_type_of_image]",
     "sizes" : "[provide_size_of_image]" 
      }]
  

4. Miscellaneous – This must contains dir, lang, description, scope, service worker

        "dir" : "ltr",
        "lang" : "en-US",
        "description" : "Describe your app",
        "scope" : "/",
        "serviceworker" : 
           {
            "src" : "[provide_path]",
            "scope" : "/"
           }
    

5. Applications – This must contains Related_Applications, Prefer_related_applications, Screenshots

  "screenshots" :
   [{
  "src" : "[provide_path]" 
   }],

  "related_applications" : 
   [{
  "platform" : "play",
  "url" : "[provide_path]",
  "id" : "[provide_id]" 
   }],

  "prefer_related_applications" : true 

Programmatical events is Manifest :
1. onappinstalled :

 
   window.addEventListener('appinstalled',evt => {
   console.log('App Installed');  })

2. beforeinstallprompt :

   window.addEventListener('beforeinstallprompt',evt => {
   evt.userchoice.then(choice => {
   var message = choice.outcome === 'dismissed' ? 'User Cancelled' : 'User Installed' ;
   console.log(message);
   });
});
   window.addEventListener('beforeinstallprompt',evt => {
   evt.preventDefault();
   prompt Evt = evt;
   return false;
});
  if(promptEvt ! = undefined){
  promptEvt.prompt()
  promptEvt.userchoice.then(choice => {
  console.log('User choice:', choice.outcome);
});
}


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 :

2


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