Manifest JSON 404 not found for PWA?

Question

I have a web application built in Visual Studio (C#) and I'm trying to turn it into/make it a PWA (progressive web app). I have created a manifest json file :

{
  {
    "dir": "ltr",
    "lang": "en",
    "name": "OSU Project Manager",
    "short_name": "Project Manager",
    "scope": "/TSList.aspx",
    "display": "standalone",
    "start_url": "https://gammaprojectmanager.azurewebsites.net/TSList.aspx",
    "theme_color": "#FFE1C4",
    "description": "Time sheet and Clock In/Out",
    "orientation": "portrait-primary",
    "background_color": "#FFE9D2",
    "icons": [
      {
        "sizes": "128x128",
        "src": "/image/icon-128x128.png",
        "type": "image"
      }
    ],
    "screenshots": [],
    "generated": "true"
  }
}

However, when I run the web app and inspect the page, I get these errors: error display

Here is the link that I created to link manifest to master page: <link href="manifest.webmanifest2" rel="manifest" />

The service worker files work, I'm just having trouble with the manifest file.

On VS, select the file, click with the right button of the mice and select properties. You should see an option to copy the file. Set it to always. It should make the file always present on the output dir. — tvdias, Nov 30 '19 at 22:51
Can you provide a sample project for anyone to reproduce it? — tvdias, Dec 01 '19 at 09:48

score 5 · Answer 1 · answered Nov 21 '20 at 17:08

If you are using ASP.NET Core, in Startup.cs in Configure add:

var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".webmanifest"] = "application/manifest+json";
    
app.UseStaticFiles(new StaticFileOptions()
{
    ContentTypeProvider = provider
});

score 3 · Answer 2 · answered Feb 24 '21 at 21:48

In web.config, add the .manifest extension as a valid mime type.

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

If json has not been mapped as a valid mime type (mostly likely already is on the server), then add that as well:

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

This Approach worked for me to get rid of the 404 in my React App. I know, the topic is about c#, but maybe there's somebody out there with the same issue. For these React-Guys the solution works great. — Thomas Poth, Dec 08 '21 at 17:56

Manifest JSON 404 not found for PWA?

2 Answers2