CODEWITHSUNDEEP
javascripthtmlreactjsmanifest.json
Oleksandr Fomin
Oleksandr Fomin

Reputation: 2376

Is it possible to change manifest.json file dynamically

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

Upvotes: 9

Views: 9470

Answers (1)

Honey
Honey

Reputation: 2408

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

Upvotes: 12

Related Questions