Progressive web app works on local setup, but on staging, Chrome console reads "Manifest: Line: 1, column: 1, Syntax error"

Question

I have two separate, but related, progressive web apps that each have a manifest.json file. One app is available at /foo/app and the other app at /bar/app on the same domain. The manifest.json file is available at /foo/app/manifest.json and /bar/app/manifest.json respectively.

On my local machine they work just fine (provided I start Chrome with a few special command-line flags to ignore self-signed certs). I can install both apps, and I can access from my Android phone via ngrok and install them there as well. However, after I uploaded everything to staging, I started seeing this console error in Chrome:

Manifest: Line: 1, column: 1, Syntax error.

I went over the file with a fine-toothed comb and couldn't find any issues. I read other Stack Overflow questions but came up dry. I found this W3 article about manifest.json and decided to change the name of the file from manifest.json to manifest.webmanifest and serve it with a MIME-type of application/manifest+json (as per w3 recommendations). None of this made any difference.

Why would there be a syntax error on staging when it works fine on local? The only difference is that my local setup uses a self-signed SSL/TLS certificate, so if anything, I'm surprised it works on local via ngrok!

Here is my manifest.webmanifest file:

{
  "short_name": "Foo",
  "name": "Foo",
  "icons": [
    {
      "src": "/img/foo-logo-no-text-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/img/foo-logo-no-text-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/foo/app/?source=pwa",
  "background_color": "#54799C",
  "display": "standalone",
  "scope": "/foo/app/",
  "theme_color": "#54799C"
}

I could guess that the path is wrong and an HTML file is being returned instead of the JSON file. — abraham, Jan 14 '20 at 03:37
@abraham The path is correct and is served with a 200 response, as well as the header "content-type: application/webmanifest+json" as per W3 recommendations. — fronzee, Jan 14 '20 at 17:33
@2pha Thanks but there is no whitespace after the opening brace (on the first line at least). Also, is that bad syntax for json? It works on my local setup, just not on staging. — fronzee, Jan 14 '20 at 17:34
@2pha Strangely, it is being served with an extra space after the brace, but that space is not in the source file. — fronzee, Jan 14 '20 at 17:41
It was just a quick guess, I am not actually sure if it would be a problem or not. — 2pha, Jan 14 '20 at 22:50

score 2 · Accepted Answer · answered Jan 14 '20 at 18:40

2

Found the problem. This answer worked for me.

In short, I added crossorigin="use-credentials" to the <link rel="manifest"> element in my <head> section.

answered Jan 14 '20 at 18:40

fronzee

1,668
2
21
32

Progressive web app works on local setup, but on staging, Chrome console reads "Manifest: Line: 1, column: 1, Syntax error"

1 Answers1