Menu
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?
659
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)
166
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.
32
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
