ASP.NET Core 3 - Angular SPA PWA

Question

I'm trying to create an Angular SPA in ASP.NET Core 3. So I started a new project, used the Angular template and updated all packages to version 8.2.9 of Angular. So far so good, got a nice CI/CD pipeline to Azure, the website runs like a charm.

However, now I'm trying to add PWA capabilities to the app. So I added PWA according to the docs of angular (ng add @angular/pwa) and everything seems fine. Got a nice manifest.webmanifest file, and all expected changes are applied as expected. However, when I run the thing and start an audit, the requirements to make the PWA installable fail.

Errors I got: - This page is controlled by a service worker, however no start_url was found because no manifest was fetched. - Failures: No manifest was fetched.

It looks like the manifest file is fetched indeed, but with a faulty mime type (text/html). Any suggestions welcome here...

user_1211879 · Answer

Found it! The fact that ASP.NET Core serves the manifest.webmanifest file with the wrong content type is in fact the problem. To solve this, move the the configure method of your startup class and create a new FileExtensionContentTypeProvider. Then also add a mapping for files with the webmanifest extension and tell it to serve those files as application/manifest+json files.

var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".webmanifest"] = "application/manifest+json";

Then scroll down, and if you (like me) have chosen the Angular project template, you will find this piece of code :

app.UseStaticFiles();
if (!env.IsDevelopment())
{
    app.UseSpaStaticFiles();
}

Now for both the UseStaticFiles and the UseSpaStaticFiles, you need to add the file extension content type provider, in order to have the files served with the correct content type like so:

app.UseStaticFiles(new StaticFileOptions
{
    ContentTypeProvider = provider
});
if (!env.IsDevelopment())
{
    app.UseSpaStaticFiles(new StaticFileOptions
    {
        ContentTypeProvider = provider
    });
}

That's pretty much it... you're now good to go!

ASP.NET Core 3 - Angular SPA PWA

1 Answers