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

This is the hosted url: https://serviceworkerspike.azurewebsites.net/ - Doesn't work anymore

I'm using Vuejs to create a PWA as a school project, and whenever I host the website with Azure this happens, I don't have the problem on localhost... Chrome devtools responds with this:

/manifest.json:1 Failed to load resource: the server responded with a status of 404 ()
/manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
manifest.json:1 GET https://serviceworkerspike.azurewebsites.net/manifest.json 404
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

I have this added in my index.html:

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

This is my manifest.json file:

{
  "name": "MessageBoardUCN",
  "short_name": "MessageBoardUCN",
  "theme_color": "#ff095a",
  "background_color": "#feaaee",
  "display": "standalone",
  "start_url": "/index.html",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

I have tried to do the name and shortname properties like this: "messageboarducn"
I have also tried editing the starturl to the hosted url: "https://serviceworkerspike.azurewebsites.net/" and "/"
I have also tried moving the manifest.json file in the root directory and /src directory, but other guides told me it should be in the same folder as index.html and the /public is default for that

This is my file structure

Normally you don't have a web.config file with Vuejs, but I even tried adding one which looks like this:

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".json" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
    </staticContent>
  </system.webServer>
</configuration>

How can I correct the mistake?

Solution 1:^[1]

I had the exact same problem (on an Azure Windows Web Service). I just created a new web.config in the root folder with the following content (or edit the existing, if there is one):

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
    <modules runAllManagedModulesForAllRequests="true"/>
  </system.webServer>
</configuration>

This adds the mime configuration for json-files.

Solution 2:^[2]

If your manifest file is at root level (where your index.html is) you can reference to it like the following in the <head> tag of your index.html file:

<link rel="manifest" crossorigin="use-credentials" href="manifest.json"/>

Plus the startUrl in the manifest file should be:

"start_url": "/"

as you target the root as starting point.

Otherwise if you would serve your app with a specific base url, you should reflect it in the startUrl property:

Example: 

-->  www.myapp.com/my-other-url-part/

Use:
    "start_url": "/my-other-url-part/"

Or simply:
    "start_url": "./"   <-- This would match any base-href != "/"

You should then set your web server to automatically serve the index.html file (this is often enabled per default)

Solution 3:^[3]

For me it was so simple to fix , just a matter of code orgnizing in the index.html , the following link tag has to be on top of the few copied from the favicon generator , just bellow the meta tags

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

Solution 4:^[4]

I had to have two things configured:

%PUBLIC_URL% in the href of the manifest in index.html:

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
Configure homepage in package.json to the directory where your app will live:

"homepage": "https://example.com/myapp",

Solution 5:^[5]

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />remove this line from the index.html header file or create the manifest.json file inside the public directory

Solution 6:^[6]

Check the manifest file format. When I had UNIX / Unicode UTF-8 no BOM I got this error. After change to DOS / Unicode UTF-8 no BOM the error was gone. The file format can be checked and changed in any advanced code editor. I don't know exactly what was the problem, probably depends on your hosting company. I compared the files in hexa editor and they visually seemed to be the same.

Solution 7:^[7]

I understand you are using Azure cloud but I used to have the same issue using AWS Amplify and here are my steps to solve it.

Go to your Amplify console
Select the application that shows the issue.
In the left panel select the option titled Rewrites and redirects.
You will find there the redirection rules of your application. Please select the option Edit.
Find the row with this structure

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>.

Add the extension webmanifest after json. The code would look like

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|webmanifest)$)([^.]+$)/>.

Press Save and inspect the site again.

If your project use Apache, then edit the file .htacces and include the webmanifest extension in the section:

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js|webmanifest)$">
    Header set Access-Control-Allow-Origin "https://your-url"
  </FilesMatch>
</IfModule>

I guess this configuration helps to avoid unwanted and malicious extensions.

Solution 8:^[8]

I fixed my error by adding json mimetype to the webconfig. The asp.net code was not allowing mimeType json by default to be served.

<system.webServer>
     <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
 </system.webServer>

Solution 9:^[9]

Check your base should be like this <base href=""/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	Djafer Abdelhadi
Solution 4	rotarydial
Solution 5	Mubarik Neja
Solution 6	wiliak
Solution 7	Pizaranha
Solution 8	Golden Lion
Solution 9	Î².ÎµÎ·Î¿Î¹Ï„.Î²Îµ

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]