Recently I saw an interesting stack overflow question that asks about changing the PWA icon dynamically based on the page url. Some of the comments are pointing in the right direction (serve the manifest dynamically) which increased my curiosity. Here  is a sample APP I created just to try it out.

Our App is a white list App which changes the name and app icon based on the start url. For example,http://mywebsite.com/ORGA will show ORGA as the app name and  http://mywebsite.com/ORGB will show ORGB as app name. We will also change the app icon based on the organization name.

First step is a way to generate dynamic manifest file. Since it is standard json, there are many ways to do this. We will use a mustache template to do the trick. (Another option will be to store it in the database). Here is how our manifest.hbs looks like:

{
    "name": "{{orgName}} App",
    "short_name": "{{orgName}}",
    "icons": [{
        "src": "/images/icons/{{orgName}}/app-icon-192x192.png",
        "type": "image/png",
        "sizes": "192x192"
    }],
    "start_url": "/{{orgName}}",
    "display": "standalone"
}

Please pay special attention to how we get the icons. Now we need a way to serve this manifest file. We will use a simple express route for this.

app.get ('/manifest.json', (req, res) => {
  // You can dynamically generate your manifest here
  // You can pull the data from database and send it back
  // I will use a template for simplicity

  //Use some logic to extract organization name from referer
  var matches = /\/([a-z]+)\/?$/i.exec (req.headers.referer);
  if (matches && matches.length > 1) {
    var orgName = matches[1];
  } else {
    var orgName = 'ORGA'; //Default
  }

  // Need to set content type, default is text/html
  res.set ('Content-Type', 'application/json');
  res.render ('manifest.hbs', {orgName});
});

We need a home page that refer to the above manifest file. here is the code for that:

app.get ('/:orgName', (req, res) => {
  res.render ('index.hbs', {orgName: req.params.orgName});
});
<!doctype html>
<html lang="en">

<head>
  <title>Whitelist</title>
  <link rel="manifest" href="/manifest.json">
</head>
You are on {{orgName}} App
<script src="/app.js"></script>

<body>
</body>

</html>

If we hook this code in an express application, we will have a PWA  that can be installed on to your device with Dynamic icon and Name.  You can access fully working source code for this app from my GitHub repository.

 

Source Code: PWA Dynamic Manifest

8 thoughts on “Dynamic PWA Manifest”
  1. Thanks for useful information.

    I want to make it served on AWS S3 or Now without Dynamic server module (like Express)
    How can I catch /manifest.json url and generate the file without Express route ?

    1. While the code shown does not cover this, you only need minor adjustments. Rather than storing the entire manifest.json, you can store the attributes in database and render it via your manifest.json route. In the sample code, we are only replacing the value of orgName, but you can modify the template to replace whatever attributes retrieved from database.

  2. We have implemented this NodeJS code in Angular 12.1.3. Your demo works on it’s own. On our code it runs line by line but it will not execute the install popup on our program. It does not give any errors either. Any insight would be very helpful. Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *