Introduction to PWA in ASP.NET Core Application

Ashwini Gupta
May 3, 2018 · 3 min read

Yeah, you heard it correct PWA using ASP.NET Core!! It is possible to create PWA in ASP.NET Core.

In this article we are going to talk about how we can implement Progressive Web behaviour in an ASP.NET Core Application and if you are wondering what Progressive Web Apps are? then Google Developer Web Network has something for you to read.

Progressive Web Apps are user experiences that have the reach of the web, and are:

Reliable — Load instantly and never show the downasaur, even in uncertain network conditions.

Fast — Respond quickly to user interactions with silky smooth animations and no janky scrolling.

Engaging — Feel like a natural app on the device, with an immersive user experience.

This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.

and if you are wondering Why should I care? read here.


  • ASP.NET Core 2.0 which has a hard requirement on .NET Core Runtime 2.0.0 and .NET Core SDK 2.0.0. Please install these items from here or visit

Let’s Start

So, first create the new ASP.NET Core project from Visual Studio projects templates.

Image for post
Image for post
Visual Studio ASP.NET Core templets.

If you are using the terminal then use the following command

$ dotnet new mvc
$ code .

code .command is used to open project with VS Code.

Image for post
Image for post
Project Directory

To adds the Progressive Web behaviour to your ASP.NET Core 2.0 application, add NuGet package through Visual Studio’s NuGet Package Manager WebEssentials.AspNetCore.PWA

If you are using terminal use following command in project directory

dotnet add package WebEssentials.AspNetCore.PWA

Now, Add the following files to your project.

Image for post
Image for post
  • Adding Icons

Currently, WebEssentials.AspNetCore.PWA compulsory required icons of size 192x192 and one 512x512 pixels along with these two you can add other sizes as well.

  • Adding a manifest.json file in the root of the wwwroot folder

Add above code to your manifest.json file.

  • Last but not least, Register service in Startup.cs Inside the ConfigureServices method add a call to services.AddProgressiveWebApp() like below.

Now you can verify by opening the application using Chrome browser open Chrome Developer Tools (Ctrl + Shift + I) under Application Tab, service worker is activated and running with the application.

Image for post
Image for post

Congrats! Your ASP.NET Core application is now PWA.


Mini Blog is a good example of PWA using ASP.NET Core 2.0 and it is open source.

Code for demo application is available at GitHub.

Beginner's Guide to Mobile Web Development

Tutorials to guide beginners to perform various tasks in…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store