Dynamic Manifest for PWA in React

We had developed a web app for users which can be used on both mobile and desktop devices. For users on mobile devices, we wanted to give them a native-like user experience. So for that, we decided to make the web app as a PWA (Progressive Web Application).

Image source undraw.co

Progressive Web Apps are web apps that use emerging web browser APIs and features along with traditional progressive enhancement strategy to bring a native app-like user experience to cross-platform web applications.

The most crucial part of building a PWA is the manifest.json file. The official documentation explains it in depth. A manifest file is basically a configuration file for your PWA.

A sample manifest.json file looks like this

{
  "short_name": "MFine",
  "name": "MFine",
  "icons": [
    {
      "src": "/images/appIcons/icons-64.png",
      "type": "image/png",
      "sizes": "64x64"
    },
    {
      "src": "/images/appIcons/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },    
    {
      "src": "/images/appIcons/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }  
  ],
  "start_url": "/",
  "background_color": "#273e75",
  "display": "standalone",
  "theme_color": "#ffffff",
  "orientation": "portrait"
}

So, converting an existing react application to PWA is pretty straightforward and can be done easily. But we wanted to go one step ahead and give each user/client some customisations in our PWA. These were the requirements which we had -

1. Different PWAs available at different URLs i.e. they have different App icons and different App Name
2. Native-like user experience
3. Available offline

Suppose we have two urls i.e.

1. www.acme.on-mfine.co
2. www.youheal.on-mfine.co

So we wanted different app icons and names for each one of them. Something like this

-

Here the challenge was to achieve dynamic App icons and App Names based on url/client/users accessing the application.

Problem -

Since we need to show different PWAs (app icons and app name different) based on different urls/clients/users, we need to populate the manifest with the required app icon and app names. But since this information was dynamic, hence we needed to dynamically build the manifest.json file in the public folder of our react application. Hence, Dynamic PWA manifest.json file.

Solution -

The way we solved this was dynamically creating the manifest.json file using our Proxy server.

A proxy or proxy server serves as a gateway between your app and the internet. It’s an intermediate server between client and servers by forwarding client requests to resources.

React — How To Proxy To Backend Server

We created a new express middleware in our proxy server which is responsible for following actions —

1. Check if the manifest.json file is already present in the public folder of our application.
2. If not present, then make the API call and fetch the data corresponding to the user/client. This includes the manifest info.
3. Dynamically write a manifest.json file with the API response in the public folder.

So overall flow would be like this —

1. On app load, based on the url/user/client, the proxy server makes an API call and fetch the manifest info which has the new app icons, name and description.
2. A new manifest.json file is dynamically created in the public folder.
3. Then in the index.html, we import a new script index.js
4. This script is responsible for dynamically importing the newly created manifest.json file in the index.html
5. When the start_url route configured in the manifest.json is accessed, the PWA popup is shown with the dynamic app name and app icon.

Dynamic manifest file helps to define the same app in different ways, with different icon and name.

This is the middleware which we wrote to handle the action of checking/creating manifest.json file.

Making the following changes in index.js in public folder -

Include this index.js file in the index.html

Run the app again, and see the new app icons and name coming based on the url/user/client.

So, using this approach of dynamic Manifest, we can customise one same app as multiple different apps.

I hope this article helped you to find a solution for solving the problem of Dynamic Manifests for PWAs. Thanks for reading!

References —

Dynamic PWA manifest using Javascript and REST API