manifest.json of web app in sub directory not detected

Question

I have my localhost server running at root folder and my webapp folder lies inside this root folder.

http://127.0.0.1:8887/ -> root

http://127.0.0.1:8887/webapp -> root/webapp

The webapp contains it's index.html which links to manifest.json file in same folder like this.

<link rel="manifest" href="./manifest.json">

The manifest file of webapp is not being detected by Chrome in this setup.

manifest.json is detected only if localhost server is started at webapp folder.

http://127.0.0.1:8887/ -> webapp

I want it work other way, how to do that?

mainfest.json

{
    "name": "Web app",
    "short_name": "Web app",
    "icons": [{
      "src": "icons/icon-128x128.png",
        "sizes": "128x128",
        "type": "image/png"
      }, {
        "src": "icons/icon-144x144.png",
        "sizes": "144x144",
        "type": "image/png"
      }, {
        "src": "icons/icon-152x152.png",
        "sizes": "152x152",
        "type": "image/png"
      }, {
        "src": "icons/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      }, {
        "src": "icons/icon-256x256.png",
        "sizes": "256x256",
        "type": "image/png"
      }],
    "start_url": "/webapp/",
    "scope":"/webapp/",
    "display": "standalone",
    "background_color": "#3E4EB8",
    "theme_color": "#2F3BA2"
  }

Answer 1

1) HTTPS is required for PWA to work. Also having a valid certificate will avoid certificate validation issues. You can generate one for local using the below command.

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

2) When both index.html and manifest.json are in same file, you can link to it without the "." like below. It can sometime due to difference in web server on how it solves the path. Yes, Ideally "." should refer to current folder though. Buts its worth a try to have your local server working.

3) Not sure what web server you are using. You would eventually need one with supports service worker (Some like ng serve in Angular don't support service worker yet). http-server is a good option.

Install -> npm install http-server -g

Run this command in your build folder ->

http-server -o -i 172.22.49.205 -p 8080 -S

3) If you go to Chrome Developer tools -> Application -> Manifest and if it says "No Manifest Detected", then you can be sure manifest if not coming up and one of the above might help fix it.