ASP.NET Core 2.2 - WebEssentials .AspNetCore .PWA


Ken Haggerty
Created 05/11/2019 - Updated 08/29/2019 15:25

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.

WebEssentials.AspNetCore.PWA 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:
Disable JavaScript Debugging

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

Service Worker Running

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

Manifest Loaded

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

Offline Cached

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

Page Cached

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

CORS Cached

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

Install Application Desktop

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.

Install Application Mobile
Install Application Mobile Menu

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.

Update 08/29/2019

Moved update notices towards the bottom of the article.

Update 07/28/2019

Added spaces to the article title and link text in the article references. Fixes a responsive width issue on small screens.

Update 05/13/2019

I found and corrected a misspelling for scope. Added instructions to disable JavaScript debugging.


Article Tags:

Json PWA

2 Following


Comment Count = 0

Please log in to comment or follow.

Login Register