Error using Mads Kristensen's WebEssentials.AspNetCore.PWA with Razor

Question

I am trying to convert a website to a PWA (Progressive Web App) using Mads Kristensen's WebEssentials.AspNetCore.PWA. When looking at the generated code with Chrome F12 Dev tools, the service worker and the web manifest are not found because the paths in the _Layout have an extra ~/ in them (an extra tilde & and extra slash). I am developing using localhost and .NETCore 2.1. Is this particular package not compatible with localhost or .NET Core 2.1 or Razor? I'm really stuck and would appreciate some help. If I type the generated paths into the URL box manually I get 404s. If I type them in without the extra ~/ if they are found.

I have determined 2 issues. The WebEssentials.AspNetCore.PWA package injects 2 lines into _Layout.cshtml. The first line, in the head, should be <link rel="manifest" href="/manifest.webmanifest">. Instead, in my configuration (localhost, Windows 10, Visual Studio 2017, ASP.NET Core 2.1, Razor Pages) it generates <link rel="manifest" href="~/manifest.webmanifest">. See the extra ~ . This causes chrome to fail to locate the manifest.webmanifest.

The second line it injects, in html region, should be script nws-csp-add-nonce='true'>'serviceWorker' in navigator and navigator.serviceWorker.register('/serviceworker'). Instead it is injecting script nws-csp-add-nonce='true' 'serviceWorker' in navigator and navigator.serviceWorker.register('~/serviceworker'). Again, see the tilde. My question is what do I need to do to make it generate the code correctly? Is it because I am using .NET Core 2.1 instead of .NET Core 2.0 or is there something else I need to change? Thanks.

Answer 1

https://github.com/madskristensen/WebEssentials.AspNetCore.ServiceWorker/issues/36

appareantly ther is a bug, reverting back to 1.0.33, solved the problem.

Answer 2

Looks like you might be able to fix it yourself if you're so inclined. I'm not sure what the intention of the change was, the commit said "added support when hosted in a virtual directory" but it just added those tilde's to the constants.

File: src/Constants.cs

internal class Constants
{
    public const string ServiceworkerRoute = "~/serviceworker";
    public const string Offlineroute = "~/offline.html";
    public const string DefaultCacheId = "v1.0";
    public const string WebManifestRoute = "/manifest.webmanifest";
    public const string WebManifestFileName = "manifest.json";
}

Change To:

internal class Constants
{
    public const string ServiceworkerRoute = "/serviceworker";
    public const string Offlineroute = "/offline.html";
    public const string DefaultCacheId = "v1.0";
    public const string WebManifestRoute = "/manifest.webmanifest";
    public const string WebManifestFileName = "manifest.json";
}