Progressive Web App (PWA) In ASP.NET Core

In this article we are going to implement Progressive Web App in Asp.Net Core.

Introduction

 
Progressive Web App
 
A web app that has the following characteristics can be said to be a PWA:
  • Progressive - It works for every user and it's not dependent on any browser.
  • Responsive - It works on any screen of any size, such as a mobile, tablet, desktop.
  • Connectivity-independent - A PWA uses features of service workers which allows loading the app in offline mode and on a slow network as well.
  • Native App Like - Look and feel of PWA is just like a native application, but it is opened in a web browser.
  • Safe - Web app is served on a secure channel using HTTPS.
  • Discoverable - It can be found using search engines or can be indexed in search engine.
  • Re-engageable - It allows the app features, such as push notifications.
  • Installable - It can be added to the home screen without needing to be installed from app stores.
We can also say that a PWA is like a native app but it can be opened in the browser. All modern browsers such as Chrome, Firefox, etc. support PWAs except Safari.
 
Prerequisites
  • Visual Studio 2017 or VS Code.
  • ASP.NET Core 2.0 (.NET Core Runtime 2.0.0 and .NET Core SDK 2.0.0 ).
Now, we are ready to create our first web app with PWA features.
 
Step 1
 
If you are using Visual Studio create a new .NET Core Web Application project and select MVC template. 
  1. dotnet new mvc  
If you are using VS Code run the following command in command prompt.
  1. code .  
Step 2
 
To add the features of Progressive Web App, we have to install the following NuGet Package.
 
In Visual Studio, go to "Manage NuGet Packages", browse for WebEssentials.AspNetCore.PWA, and install the package. 
 
Progressive Web App (PWA) In ASP.NET Core 
  1. dotnet add package WebEssentials.AspNetCore.PWA  
Step 3
 
Now, we have to create the manifest.json file. The web app manifest is a simple JSON file that tells the browser about our web application and how it should behave when 'installed' on the user's mobile device or desktop.
 
You can learn more about Web app manifest file in detail.
 
We have to add icons of different sizes to this manifest.json file. Currently, the icons of the following sizes are mandatory. If you don't provide these icons, you will get an error.
  • 512x512 pixels
  • 192x192 pixels
You can also add the icons of different sizes but the above sizes are compulsory.
 
Create a JSON file with name manifest.json in wwwroot folder of your current project, and paste the following JSON code. Here, we have added the icons of 512x512 and 192x192 sizes.
  1. {    
  2.   "name""PWADemo",    
  3.   "short_name""PWA",    
  4.   "description""Demo PWA application in ASP.NET Core.",    
  5.   "icons": [    
  6.     {  
  7.         "src""images/icons/logo144.png",  
  8.         "sizes""144x144",  
  9.         "type""image/png"  
  10.     },  
  11.     {    
  12.         "src""/images/icons/logo192.png",    
  13.         "type""image/png",    
  14.         "sizes""192x192"    
  15.     },  
  16.     {  
  17.         "src""images/icons/logo168.png",  
  18.         "sizes""168x168",  
  19.         "type""image/png"  
  20.     },  
  21.     {    
  22.         "src""images/icons/logo512.png",    
  23.         "type""image/png",    
  24.         "sizes""512x512"    
  25.     }   
  26.   ],    
  27.   "display""standalone",    
  28.   "start_url""/"    
  29. }     
Step 4
 
This is the last step and the most important one too. We have to register the PWA service in our web app. To do so, add a call to services.AddProgressiveWebApp() in ConfigureServices method of Startup.cs.
  1. public void ConfigureServices(IServiceCollection services)  
  2. {  
  3.       services.AddMvc();  
  4.       services.AddProgressiveWebApp();  
  5. }  
Now, run the project.
 
To verify whether the PWA Service worker is working or not, go to Chrome Developer Tools and under Application tab, you will be able to see that the service worker is activated and running with the application, as shown in the image below.
 
Progressive Web App (PWA) In ASP.NET Core