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.
- 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.
So, first create the new ASP.NET Core project from Visual Studio projects templates.
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.
To adds the Progressive Web behaviour to your ASP.NET Core 2.0 application, add NuGet package through Visual Studio’s NuGet Package Manager
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.
- Adding Icons
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.jsonfile in the root of the
Add above code to your
- Last but not least, Register service in
ConfigureServicesmethod add a call to
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.
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.