Dynamic PWA Manifest

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:

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.

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

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

5 Responses

  1. MIke says:

    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 ?

  2. Can you please add information on how to server the dynamic manifest.json from the database

  3. Can you please add information on how to serve the dynamic manifest.json from the database

    • Jose Cherian says:

      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.

  4. Hanuma Chandu says:

    How should i achieve same by using angular6 with .Net core application ?

Leave a Reply

Your email address will not be published.