CODEWITHSUNDEEP
web-applicationsprogressive-web-apps
Peter Hawthorne
Peter Hawthorne

Reputation: 37

No manifest detected at

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

Answers (3)

Mir-Ismaili
Mir-Ismaili

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

Nash Worth
Nash Worth

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

Oleg
Oleg

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:

enter image description here

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":

enter image description here

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:

enter image description here

Hope that helps!

Upvotes: 2

Related Questions