I'm working on React PWA and I wanted to know if that's possible to dynamically add icons URL to the manifest.json file. So my goal is to show the generic app icon until the user has signed in. After that, I request a new icon from a remote API and set it to the manifest file, so that the favicon and a mobile icon on the dashboard are changed.
Ideally, I'd like to make that happen without any backend changes
I'm working on React PWA and I wanted to know if that's possible to dynamically add icons URL to the manifest.json file. So my goal is to show the generic app icon until the user has signed in. After that, I request a new icon from a remote API and set it to the manifest file, so that the favicon and a mobile icon on the dashboard are changed.
Ideally, I'd like to make that happen without any backend changes
1 Answer
Reset to default 12Have a link tag in the HTML with rel="manifest" but without href attribute. And use this tag later to populate your manifest. As in:
Your document:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="manifest" id="my-manifest-placeholder">
</head>
<body>
<!-- page content -->
</body>
</html>
Now in Javascript you have two options:
Now in Javascript you have two options: Set href attribute using a URL:
document.querySelector('#my-manifest-placeholder').setAttribute('href', '/my-dynamic-manifest-url.json');Use a JSON object to set your manifest
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);
SOURCE