Posted by Anuraj on Monday, January 8, 2018 Reading time :3 minutes
This post is about building Progressive Web Apps or PWA with ASP.NET Core. Progressive Web App (PWA) are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications. The application type attempts to combine features offered by most modern browsers with the benefits of mobile experience.
In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term “Progressive Web Apps” to describe apps taking advantage of new features supported by modern browsers, including service workers and web app manifests, that let users upgrade web apps to progressive web applications in their native operating system (OS). These are the characteristics of a PWA.
You can make any web application as Progressive Web App, for that you need meet following criteria.
For building a PWA or converting an existing application as PWA, you need to first implement a service worker, which handles the requests and caching. A manifest file which helps browsers to get details about the application. And you need to register the service worker in the page.
For ASP.NET Core, Mads Kristensen created a middleware which help you to implement PWA with minimal effort.
First you need to add following package to your project.
Once the package installed, you need too add application icons to the project. You need at least two icons, one with size 192x192 and other with 512x512. Use PNG or JPEG image formats. You can put it anywhere under
wwwroot folder. Next you need to create a manifest file. Similar to images, you need to create the file under
wwwroot folder. Here is an example.
Next you can enable PWA by adding ProgressiveWebApp middleware. So in the
ConfigureServices method, you can need to add ProgressiveWebApp like this.
You’re done. You have converted an ASP.NET MVC Core app to PWA App. To verify it, open the
http://localhost:5000 in chrome and check the page source, you will be able to see a reference to manifest.webmanifest and service worker registration like this.
You can find more details about service worker and manifest from developer tools.
You can customize the service worker caching options, network strategy using PwaOptions class.
If you’re getting an error like this - InvalidOperationException: Unable to resolve service for type ‘Microsoft.AspNetCore.Http.IHttpContextAccessor’ while attempting to activate ‘WebEssentials.AspNetCore.Pwa.ServiceWorkerTagHelperComponent’.
Then you need to inject
IHttpContextAccessor manually to the services, like this.
More resources on Progressive Web Apps and PWA in ASP.NET Core.
Happy Programming :)
What do you think? I would like to hear your thoughts, suggestions, and questions in the comments section below.