Manifest not loaded correctly from .NET Core Web Application

Question

Just to try and see what's possible from a technical point of view, I am trying to make a .NET Core Web Application with Razor Pages (NO MVC!) into a Progressive Web App (PWA) but I am running into a problem here.

My browser does not want to load the manifest that I created correctly. In Chrome DevTools I get this message that there is a syntax error on line 1 column 1 but when I click the link to the webmanifest, it says that "No resource with given URL found". That brings me to the conclusion that it is just refusing to load my manifest.

I followed a tutorial (where they were using an MVC web app, I'm not) and installed the NuGet package 'WebEssentials.AspNetCore.PWA' and added the following line to my Program.cs file:

builder.Services.AddProgressiveWebApp();

which makes it look like this in full:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Then I created a manifest.json file in the wwwroot folder with the following content:

{
    "name": "Razor PWA",
    "short_name": "Razor PWA",
    "icons": [
        {
            "sizes": "192x192",
            "type": "image/png",
            "src": "/img/icon-192.png"
        },
        {
            "sizes": "512x512",
            "type": "image/png",
            "src": "/img/icon-512.png"
        }
    ],

    "display": "minimal-ui",
    "theme_color": "#2dab66",
    "orientation": "portrait",
    "background_color": "#2dab66",
    "start_url": "/"
}

and I also added icons to an img folder at the same location as the manifest.json.

I also tried the exact same process with a MVC project and it worked like a charm. So I am convinced that there is a difference between MVC and non-MVC that stops this same process from working and I'm wondering if there is any configuration I need to change, or maybe it isn't even possible to make a non-MVC application into a PWA with this package?

I would be happy with any answers!

Answer 1

WebEssentials.AspNetCore.PWA

It looks like the package is quite ancient. If you install it, it pulls in all of ASP.NET Core 2. Consider using another approach.

Anyhow, the library you intend to use will expose a /manifest.webmanifest endpoint, through which it will return the transformed manifest.json, but as you noticed, this URL returns a 404.

This route isn't matched, because the library implements it in a controller, but you only route to Razor pages.

So change your startup to also route to the default controller convention:

app.MapRazorPages();
app.MapDefaultControllerRoute();