Dynamic manifest.json ? Possible

Question

Hi,

I have a manifest.json that is working perfectly. The problem is I wanted his start_url to be dynamic and I could fill in.

I have seen answers from 2 years ago saying that it is not possible and some solutions that did not work ( I will put below ).

Can help me with a current message ?

{
  "name": "Teste",
  "short_name": "teste",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone",
  "Scope": "/m/",
  "start_url": "",
  "icons": [ {
    "src": "../m/public/img/logo_192.png",
    "sizes": "192x192",
    "type": "image/png"
  },{
    "src": "../m/public/img/logo512.png",
    "sizes": "512x512",
    "type": "image/png"
  }]

}

I tried to make a solution too that did not work, I created a php file and inserted .. It even works, but the pwa file is generated as link and not as installable app

What I’ve already tried

<script type="text/javascript">
    var myDynamicManifest = {

        "name": "Teste",
        "short_name": "teste",
        "theme_color": "#2196f3",
        "background_color": "#2196f3",
        "display": "standalone",
        "Scope": "<?=DIRECTORY_ROOT?><?=$_SESSION['PagName']?>",
        "start_url": "<?=DIRECTORY_ROOT?><?=$_SESSION['PagName']?>",
        "icons": [ {
        "src": "<?=PATH_IMAGE?>logo_192.png",
        "sizes": "192x192",
        "type": "image/png"
    },{
        "src": "<?=PATH_IMAGE?>logo512.png",
        "sizes": "512x512",
        "type": "image/png"
    }]

    };



    const stringManifest = JSON.stringify(myDynamicManifest);
    const blob = new Blob([stringManifest], {type: 'application/json'});
    const manifestURL = URL.createObjectURL(blob);
    document.querySelector('#manifesto').setAttribute('href', manifestURL);
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
            navigator.serviceWorker.register('/sw_gdscartao.js').then(function(registration) {
                console.log("Serviceworker Registrado");


            }).catch(function(err) {
                alert('erro' + err);
                // registration failed :(
                console.log('ServiceWorker registration failed: ', err);
            });
        });
    };




</script>

Answer 1

I managed to solve using the example of the site https://medium.com/@alshakero/how-to-setup-your-web-app-manifest-dynamically-using-javascript-f7fbee899a61

var myDynamicManifest = {
  "name": "Your Great Site",
  "short_name": "Site",
  "description": "Something dynamic",
  "start_url": "<your-url>",
  "background_color": "#000000",
  "theme_color": "#0f4a73",
  "icons": [{
    "src": "whatever.png",
    "sizes": "256x256",
    "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);

However A2HS( Add home page ) changed the behavior. It started to add as site shortcut and not installed app

To resolve, I directed start_url to a php file and made the tracing through this file.