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.
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 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.
- 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 thewwwroot
folder
Add above code to your manifest.json
file.
- Last but not least, Register service in
Startup.cs
Inside theConfigureServices
method add a call toservices.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.