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);
});
}
Last Updated :
30 Apr, 2019
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...