PWA "routes" Is Undefined

Question

Trying to create a very simple ASP.NET core PWA, there doesnt seem to be many examples using .NET 8.0.

Steps as follows:

• Created a brand new ASP.NET core app. Using .NET 8.0.
• Installed dotnet package WebEssentials.AspNetCore.PWA
• Added a manifest file.
• Added the two icons required to the images folder.
• Added builder.Services.AddProgressiveWebApp();

The app runs and I get the option to install from Chrome which is great. However the service-worker is unhappy, giving the following error:

Uncaught (in promise) ReferenceError: routes is not defined at serviceworker:11:42

Clicking on the error highlights the following service worker code:

 // Store core files in a cache (including a page to display when offline)
  function updateStaticCache() {
    return caches.open(version).then(function (cache) {
      return cache.addAll([offlineUrl, { routes }]);  // This line is highlighted.
    });
  }

Essentially I used this guide, but with .net 8.0: https://www.c-sharpcorner.com/article/progressive-web-app-pwa-in-asp-net-core/

Is someone able to offer me some clues as to what is wrong with the service worker and why routes is undefined?

Answer 1

The answer for me was to manually load the manifest file:

program.cs:

// Register as a PWA application
builder.Services.AddProgressiveWebApp(new PwaOptions
{
    RegisterServiceWorker = true,
    RegisterWebmanifest = false,  // (Manually register in Layout file)
    Strategy = ServiceWorkerStrategy.NetworkFirst,
    OfflineRoute = "Offline.html"
});

layout:

@*Manually register the PWA Manifest*@
<link rel="manifest" href="~/manifest.json" />