Is it possible to change manifest.json file dynamically

user_13288420 0
Viewed 2843

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

manifest.json reactjs html javascript
1 Answers

Have 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:

  1. 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');

  2. 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

user_42159530
Related