PWA install prompt when setting manifest dynamically

Question

We have a web app which fulfills the PWA criteria. So far, when opening the app on an Android device, we received the PWA installation prompt.

Now, if possible, we would like to generate the manifest.json dynamically on the client-side. I’m following the steps outlined in the following article, which look quite promising:

How to Setup Your Web App Manifest Dynamically Using Javascript

We generate the JSON and set it as blob URL through client-side JS:

const stringManifest = JSON.stringify(manifest);
const blob = new Blob([stringManifest], { type: 'application/json' });
const manifestUrl = URL.createObjectURL(blob);
document.querySelector('#manifest-placeholder').setAttribute('href', manifestUrl);

But now, when I open the app on an Android device I no longer see the PWA prompt. Yet, the manifest file obviously get interpreted, as e.g. the icon and start_url are correctly set when I try to add the app to the home screen.

Any experience here whether setting the manifest.json is possible at all for a PWA? Anything I might be missing?

Answer 1

I faced a similar issue. I came to the conclusion this issue could be due to the browser checking for a valid manifest before your dynamically-created manifest has been inserted into the DOM.

If the browser thinks there is no valid manifest available for PWA installation, then the install prompt will not show, which is stated clearly enough in the documentations. However, debugging this issue is rather confusing, as tools, such as Lighthouse in the Google Chrome Audit DevTool tab will say that the app is installable and everything is fine and dandy...

It could be the case that the browser only checks for a valid manifest once during page load - unfortunately I can't find any firm details anywhere about this.

I was able to solve this issue by ensuring the html document's initial render has a valid manifest for PWA-installation, containing some default values (in my case, the values were based off of window.location.pathname). Then later on, when I have all the appropriate data available, I can create my desired manifest and replace it in the DOM. Then, when is ready to install the PWA, the browser uses the data from the desired manifest.