Dynamic icon PWA manifest

Question

I am making a white label PWA using angular5. I am wondering if it is possible to dynamically change the png icon in the manifest file on info from the URL. I want a different icon for each unique organization.

like:

1. www.mywebsite.com/organisation1
2. www.mywebsite.com/organisation2

URL 1 should get a different icon when installed on the browser then URL2. I do not have a clue on how to make this work and if it is even possible.

Answer 1

Jeff's link will guide you in the right direction. Your question made me curious and I wrote a blog post on the specific implementation using Express.js.

Basically, you can serve the manifest.json dynamically.Here is the essence of it. You can grab the organization name from the referrer header.

manifest.hbs

{
    "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"
}

express route

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});
});