how to add Urls and web_Urls in manifest.json file using meta Tag

Question

I am creating a progressive web app, and I need to add the current URL in manifest.json file using meta tag.

I created this manifest.json:

{
 "name": "app",

  "icons": [{
    "src": "images/avatar.jpg",
    "sizes": "64x64"

  }, {
    "src": "images/avatar.jpg",
    "sizes": "64x64"
    }, {
    "src": "images/avatar.jpg",
    "sizes": "128x128",
    "density": 2
   }],
   "app": {
    "urls": [
           "https://www.example.com"
           ],
    "launch": {
          "web_url": "https://www.example.com"
  }
 }
  "theme_color":"#06ADD5",
  "display": "standalone",
 "orientation": "portrait"
}

The above JSON is working fine in static URL and web URL, but I want to get it working for as a dynamic URL (EX:www.example.com/<PRODUCT_ID>)

Answer 1

That JSON does not adhere to the Web App Manifest specification, which is what's currently used by Chrome and Firefox for metdata when adding a web app to a device's homescreen. Specifically, you'd want to use the start_url property to specify the initial URL to open.

In any case, the question of customizing the contents of /path/to/manifest.json based on some criteria just boils down to how you'd normally do server-side customization of any resource before returning it to the client. You could pass in a URL parameter, like /path/to/manifest.json?start_url=*something*, and then have your web server return a different start_url value in the JSON response based on what something is.

If you can't implement server-side logic, perhaps because you're only deploying static files and using client-side rendering for everything, then your best bet is to generate multiple manifest-*something*.json files ahead of time, each with a different start_url value, and then set the <link rel="manifest"> tag on each page to point to the appropriate manifest-*something*.json URL, based on whatever criteria makes sense for you.