ASP.NET Core 2.2 - WebEssentials .AspNetCore .PWA

This article will demonstrate the installation of the WebEssentials.AspNetCore.PWA nuget package and the configuration of a manifest.json file. I will assume you have created a new ASP.NET Core 2.2 Razor Pages project. You should polyfill for fetch and promise (see Fetch And Promise). I won't use Identity or Individual User Accounts.

I am researching Progressive Web Applications which can be very complex. The WebEssentials.AspNetCore.PWA nuget package implements a lot of PWA features with a minimum configuration. The GitHub page does a great job of describing the package. I want to use this as a starting point. I will cover some of the more advanced features in future articles.

Open the NuGet Package Manager by right clicking the project then click Manage NuGet Packages. On the Browse tab, search for pwa. Select WebEssentials.AspNetCore.PWA and install.

Edit Startup.cs > ConfigureServices, add the extension after AddMvc():

services.AddProgressiveWebApp();

You should take care when creating the manifest.json and image files because they will get cached. Create at least two image files, one 192x192 and the other 512x512. I found a 256x256 image can be used on larger phones' home screen and a 72x72 image can be used as a badge in push notifications. Save them to the wwwroot > images folder. Create a manifest.json file in wwwroot folder.

Edit manifest.json:

{
  "name": "Progressive Web Application",
  "short_name": "PWA",
  "description": "A demonstration of WebEssentials.AspNetCore.PWA",
  "icons": [
    {
      "src": "/images/icon192x192.png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icon256x256.png",
      "sizes": "256x256"
    },
    {
      "src": "/images/icon512x512.png",
      "sizes": "512x512"
    }
  ],
  "display": "standalone",
  "start_url": "/"
}

A build, run and test will probably result with an InvalidOperationException for IHttpContextAccessor. Add the IHttpContextAccessor to services.

Edit Startup.cs > ConfigureServices, add the extension after AddProgressiveWebApp():

services.AddSingleton(typeof(IHttpContextAccessor), typeof(HttpContextAccessor));

If you are using Visual Studio, you want to disable JavaScript debugging. Visual Studio > Debug > Options. Debugging > General > Enable JavaScript debugging for ASP.NET (Chrome, Edge and IE)

Section reference:

To verify function, open the Chrome DevTools Application tab. Select Service Workers. This should display the serviceworker activated and is running.

Select Manifest to display the manifest.json transformed to manifest.webmanifest.

The first page load will register the service worker and cache an offline.html page. Expand Cache Storage and select v1.0:CacheFirstSafe.

After the service worker is registered it will cache all page resources when the page is loaded.

If CDNs are used and properly configured, the service worker will cache the resource as type cors.

The caching and offline.html allow the application to be installed on the desktop or home screen.

Browsing a development environment with a mobile phone is beyond the scope of this article. Here are screenshots of the Add To Home Screen feature for KenHaggerty.Com from a mobile phone.

I stated at the beginning; a Progressive Web Application can be very complex. The WebEssentials.AspNetCore.PWA nuget package implements a lot of PWA features with a minimum configuration. I will cover some of the more advanced features in future articles.

Article references: