Well I am working on a pwa (react) project, and came across with a weird bug. I've created a manifest.json initial manifest file and a script where i change the start url and the src of the icons according to the specific user.
Problem is that on the android devices I have the full pwa functionallity, the pwa saves perfectly while on the IOS it doesnt, it opens the start url from the initial manifest.json.
<link crossorigin="use-credentials" id="my-manifest-placeholder" rel="manifest" />
<script>
async function setDynamicManifest() {
const basePath = location.pathname.split('/')[1];
const manifestTemplateUrl = '/manifest.json';
const response = await fetch(manifestTemplateUrl);
let manifest = await response.json();
manifest.start_url = `${origin}/${basePath}/login`;
manifest.icons = manifest.icons.map((icon) => ({
...icon,
src: `${origin}/${icon.src}`,
}));
manifest.screenshots = manifest.screenshots.map((icon) => ({
...icon,
src: `${origin}/${icon.src}`,
}));
console.log(window.location.origin);
console.log(manifest);
const manifestBlob = new Blob([JSON.stringify(manifest)], { type: 'application/json' });
document.querySelector('#my-manifest-placeholder').setAttribute('href', URL.createObjectURL(manifestBlob));
}
setDynamicManifest();
</script>
There are no errors, the IOS allows me to save to home page the app its just doesnt run the logic from the script. anyone had a similar situation? NOTE: using lighthouse pwa test the code is instalable and truely does, I just need to dynamically change the start_url and src.
Thanks!