Dynamic manifest.json

If you want the users of your web application to "install" it on their devices, it is enough to fill in the manifest.json file. It is already widely supported by the browsers and the operating systems and it is very easy to do it, so you should not skip it.

I maintain a Vue application that communicates with a SaaS system. The application is generated almost statically, without having a back-end behind it and has one entry point, but depending on the site that loads it, I save a variable in LocaleStorage that contains the identifier of this site. The application has a built-in manifest.json, but over time I had to personalize it for each site.

The dynamic loading of the manifest.json file should be done at the client (in the browser). We excluded Vue & Vue Router from the calculations, because the manifest must be available, even if their 'engines' do not work. So, we transferred everything to the index.html file of the application.

I wrote a small Node console that goes through the active databases and generates a static manifest.siteId.json files for each site in a specific folder. Then I added a small script to the index.html file that loads this file and adds it to document.head.

<!-- index.html -->

<script>
  const siteId = localStorage.getItem("siteId");
  const manifestPath = `/manifests/manifest.${siteId || ""}.json`;

  fetch(manifestPath)
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      return response.json();
    })
    .then(() => {
      const link = document.createElement('link');

      link.rel = "manifest";
      link.href = manifestPath;

      document.head.appendChild(link);
    })
    .catch(() => {
      const link = document.createElement('link');

      link.rel = "manifest";
      link.href = '/manifests/manifest.json';

      document.head.appendChild(link);
    });
</script>

Why fetch?

This is a very good question. When generating the manifest.siteId.json files, there may be a situation where such a file does not exist. Since JavaScript cannot check for a file on the server - I make a fetch request for it. If the request does not work, then I load the manifest.json file with the basic descriptions.