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

问题

This is the hosted url: https://serviceworkerspike.azurewebsites.net/

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?

回答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.

回答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).

回答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" />

回答4:

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

来源：https://stackoverflow.com/questions/59068699/manifest-line-1-column-1-syntax-error

标签

json

azure

Vue.js

azure-web-app-service

manifest