Manifest.json for progressive web app not working

Question

I am trying to get the manifest.json file working for my web app. Unfortunately it is not working right. I am receiving the following error in the chrome devtools:

Line: 1, column: 1, Unexpected token.

I am pretty sure that the JSON is valid but it probably has something to do with the path in the html-head. What am I doing wrong here?

I am linkin it in my html like this:

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

The manifest looks as following:

{
  "short_name": "Tabbs Web App",
  "name": "Tabbs Web App",
  "description": "Tabbs is an digital booking service for the night life scenery",
  "icons": [
    {
      "src": "favicon.png",
      "sizes": "1024x1024",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "fullscreen",
  "theme_color": "#F5C33E",
  "background_color": "#ffffff"
}

This is my map structure:

Hopefully someone can find the issue! Cheers!

Answer 1

First issue, your start_url is not valid. You should learn to use how to generate Lighthouse report to help yourself find such issue cause.

Instead of having start URL as this

"start_url": "./index.html",

Try this or simply remove "." from the above URL and try, it all depends on your build and hosting, manifest and index.html locations, etc. So you have to try multiple and see what works.

"start_url": "http://tabbs-web-app.herokuapp.com/discover/home",

I'm not getting the error that you have mentioned. I'm getting the below one though, which is because your site loads content from non HTTPS requests. If you are targeting to make your site a PWA one, convert all HTTP request over HTTPS and add a service worker.

Site cannot be installed: the page is not served from a secure origin

Here is the Lighthouse audit report, which says Manifest is not