- From: Braj65 <notifications@github.com>
- Date: Tue, 22 May 2018 00:34:40 -0700
- To: w3c/manifest <manifest@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <w3c/manifest/issues/680@github.com>
I want to add to my app "Add To home screen banner", I went through the manual
https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/#testing-the-app-install-banner
Have fulfilled the conditions
1) Manifest file
{
"name": "Project clean as pwa",
"short_name": "Pro Clean",
"icons":[
{
"src": "/icons/icons8-washing-machine-48.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "/icons/icons8-washing-machine-96.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/icons/app-icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/icons/icons8-washing-machine-480.png",
"type": "image/png",
"sizes": "480x480"
},
{
"src": "/icons/icons8-washing-machine-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url":"/initial",
"scope": "../",
"display":"standalone",
"orientation":"any",
"background_color":"#fff",
"theme_color":"#3f51b5",
"description":"Simple dry clean description",
"dir":"ltr",
"lang":"en-US"
}
2) Registered service worker
if("serviceWorker" in navigator){
navigator.serviceWorker.register('/sw.js')
.then(function(){
console.log("Service worker registered");
});
};
3) Added fetch event handler in serviceworker file
self.addEventListener("fetch",function(event){
event.respondWith(fetch(event.request));
});
4) Saving beforeinstallprompt event for later use
window.addEventListener("beforeinstallprompt",function(event){
console.log("beforeinstallprompt fired");//this never appears after waiting for long
event.preventDefault();
event.prompt();
deferredPrompt = event;
return false;
});
5) Using the event later
function collectOrder(){
console.log("Using the event ", deferredPrompt);//on call of the funtion the event comes undefined
if(deferredPrompt){
deferredPrompt.prompt();
deferredPrompt.userChoice.then(function(choiceResult){
console.log(choiceResult.outcome);
if(choiceResult.outcome==="dismissed")
console.log("User cancelled installation");
else
console.log("User added to homescreen");
});
deferredPrompt = null;
};
}
6) The lighthouse test says the app is pass for "install banner"
Help me with if anything is missing.
--
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/manifest/issues/680
Received on Tuesday, 22 May 2018 07:35:03 UTC