I am creating a PWA and stumbled upon a problem with the "start_url" in the manifest.json file. The website which I am trying to turn into a PWA depends on query params and "start_url":"/" doesn't pick up the query params.

I tried deleting the start_url from manifest.json and that seems to allow the app to be added to home screen (on iOS) but I guess on android the install prompt won't appear without the start_url?

Anyone has experienced a similar issue?

I am creating a PWA and stumbled upon a problem with the "start_url" in the manifest.json file. The website which I am trying to turn into a PWA depends on query params and "start_url":"/" doesn't pick up the query params.

I tried deleting the start_url from manifest.json and that seems to allow the app to be added to home screen (on iOS) but I guess on android the install prompt won't appear without the start_url?

Anyone has experienced a similar issue?

• javascript
• progressive-web-apps

2 Answers 2

You can create a dynamic manifest just like this: https://stackoverflow./a/57856162/8716572

And then you can do something like "start_url": "your-url?query=" + queryValue.

<link rel="manifest" id="my-manifest-placeholder">

var myDynamicManifest = {
  "name": "App name",
  "short_name": "short",
  "start_url": "your-url?query=" + queryValue
  "background_color": "#000000",
  "theme_color": "#0f4a73",
  "icons": [{
    "src": "icon.png",
    "sizes": "512x5126",
    "type": "image/png"
  }]
}

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

var link = document.createElement('Link');
link.rel = "manifest";
link.setAttribute('href', 'data:application/json;charset=8' + stringManifest)

I tried the accepted solution without success, even with other variants of the solution. Perhaps Chrome changed something in the last three years and now it's not working any more.

My current working solution is having a real manifest.json file with default values and changing the values after building my app using NodeJS.

Furthermore I found out that you also can provide relative URLs instead of absolute URLs to the manifest.json properties "start_url", "id" and "scope". That means you can just provide the baseHref value from your progressive app (important e.g. for Angular or React).