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

Save