Introduction to PWA in ASP.NET Core Application

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.

Prerequisite's

• Visual Studio 2017 or any Text Editor of your choice (if you don’t have preference my recommendation VS Code).
• 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 dot.net.

Let’s Start

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

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.

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.

Files

• 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.

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

Next?

There are many ways to configure the behaviour of the manifest as well as the service worker. Read the WebEssentials.AspNetCore.PWA documentation for more info. If you want to Contribute to WebEssentials.AspNetCore.PWA, it is an open source project by Mads Kristensen.

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.

ASHWINI-GUPTA/ASP.NET-Core-PWA