Manifest.dynamic json? It is possible
Oi,
I have a manifest.json that is working perfectly. The problem is that I wanted his start_url to be dynamic and I could populate.
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 you 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 also that did not work, I created a php file and inserted .. It even works, but the pwa file is generated as a link and not as an installable app
What I've 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>
1 answers
I managed to solve using the site Examplehttps://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);
But A2hs (add home page ) changed the behavior. He started to add as a website shortcut and not installable app
To solve, I directed the start_url to a php file and did the treatment through this file.