Menu
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"
}
578
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.
195
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
