javascriptprogressive-web-apps

PWA: How to have dynamic "start_url" in manifest.json


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?


Solution

  • You can create a dynamic manifest just like this: https://stackoverflow.com/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)