Is it possible to change manifest.json file dynamically

Question

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

score 12 · Answer 1 · answered Jan 20 '21 at 12:07

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:

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

Although the OP only asked about changing the icons, but it's good to remember that if you expose multiple manifests, those with overlapping/nested paths will be in conflict. https://web.dev/building-multiple-pwas-on-the-same-domain/ — viam0Zah, Oct 13 '22 at 13:49
Cosidering the second solution, where exactly should I add the Javascript code? — Geraldo Neto, Feb 22 '23 at 21:50

score 1 · Answer 2 · answered Jan 26 '23 at 17:14

React-Manifest is a simple library that allows you to easily update your manifest.json file in your React application. It allows you to specify the details of your application such as the name, icons, and related applications.

Installation

with npm

  npm install react-manifest

with yarn

  yarn add react-manifest

Step 2

Import the package in your React component

  import reactManifest from "react-manifest"

or

  const reactManifest = require("react-manifest")

Step 3

Add a <link> tag in your index.html file with the id attribute set to "manifest-placeholder" and href attribute set to "./manifest.json"

  <link rel="manifest" id="manifest-placeholder" href="./manifest.json"  />

Step 4

In your React component, create an object with the details you want to update in your manifest.json file. For example:

  const manifestDetails = {

    "name": "My Web App",
    "short_name": "My App",
    "start_url": "index.html",
    "display": "standalone",
    "orientation": "portrait",
    "theme_color": "#000000",
    "background_color": "#ffffff",
    "icons": [
        {
            "src": "icon-192x192.png",
            "sizes": "192x192"
        },
        {
            "src": "icon-512x512.png",
            "sizes": "512x512"
        }
    ],
    
    
    // And More...

}

Step 5

Use the update method to update your manifest.json file by passing in the manifest details and the id of the <link> tag in your index.html file.

  reactManifest.update(manifestDetails, "#manifest-placeholder")

Final ReactJs Code

import React, { useEffect } from 'react';
import reactManifest from 'react-manifest';

const MyComponent = () => {

  useEffect(() => {
      
    const manifestDetails = {
      "name": "My Web App",
      "short_name": "My App",
      "start_url": "index.html",
      "display": "standalone",
      "orientation": "portrait",
      "theme_color": "#000000",
      "background_color": "#ffffff",
      "icons": [
        {
            "src": "icon-192x192.png",
            "sizes": "192x192"
        },
        {
            "src": "icon-512x512.png",
            "sizes": "512x512"
        }
      ],
      
      And More...

    };
  
    reactManifest.update(manifestDetails, "#manifest-placeholder");

  }, []); 


  return (

    <div>
        ...
    </div>

  );
};

export default MyComponent;

Final HTML Code

  <!DOCTYPE html>
<html>
  <head>
    <title>My Web App</title>
    <link rel="manifest" id="manifest-placeholder" href="./manifest.json"  />
  </head>
  <body>
    <div id="root"></div>
    <script src="./index.js"></script>
  </body>
</html>

✨

And that's it! You have successfully updated your manifest.json file with the details provided. You can use this package to easily update your manifest.json file and customize your PWA experience.