Reputation: 37
I found several templates covering how to trigger the Firefox and Chrome Add To Homescreen popup.
It all seems fairly simple, an empty service-worker.js file a manifest file and javascript something like:
<link rel="manifest" href="manifest.json">
<script>
if ('serviceWorker' in navigator) {
console.log("Will the service worker register?");
navigator.serviceWorker.register('service-worker.js')
.then(function(reg){
console.log("Yes, it did.");
}).catch(function(err) {
console.log("No it didn't. This happened:", err)
});
}
</script>
But, no Add To Homescreen popup appears after revisiting the page in various time intervals.
One things I noticed is that when validating the manifest on https://manifest-validator.appspot.com/ the validation is succesful when uploading the file. However when pasting the link location on our server it fails "No manifest detected at ..."
Could this be related? For sure the file exists and the entered path starting with https: is correct
Or what else could be wrong with the setup?
Thanks, Peter
Upvotes: 3
Views: 10717
Reputation: 17184
In my case, there was a need for closing and reopening DevTools.
Also, to avoid any conflicts, close any duplicate tabs. See @JackStone's answer.
Upvotes: 1
Reputation: 2574
Confirmed "no manifest detected" when multiple tabs were open at the same time.
Closing all app tabs and reloading was the ONLY way to get manifest to be detected (again).
Worth mentioning that the two tabs were dev and prod.
I suppose another solution might have been to clear cache in prod.
All in all, closing any duplicate tabs is a good rule of thumb to be sure manifest re-initializes.
Upvotes: 1
Reputation: 23317
There are some requirements for Add to Homescreen popup to show.
Besides,
Chrome then uses [...] visit-frequency heuristics to determine when to show the banner.
So most probably some of those requirements are not met in your case, or you have to visit your webapp some time later.
To test if your webapp meets these requirements, you can open Chrome DevTools, Audit tab:
and perform a Progressive Web App audit.
When it's done, you will be able to see if "User can be prompted to install the Web App":
You can also trigger install banner manually, if you need this for testing purposes. On Application tab, Manifest section you'll see "Add to homescreen" button:
Hope that helps!
Upvotes: 2