Progressive Web App (PWA) In ASP.NET Core

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, or desktop.
• Connectivity-Independent: A PWA uses features of service workers that allow loading the app in offline mode and on a slow network as well.
• Native App Like: The look and feel of PWA is just like a native application, but it is opened in a web browser.
• Safe: The web app is served on a secure channel using HTTPS.
• Discoverable: It can be found using search engines or can be indexed in search engines.
• 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 an anative 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.

dotnet new mvc

If you are using VS Code run the following command in the command prompt.

code .  

Step 2. To add the features of the Progressive Web App, we have to install the following NuGet Package.

In Visual Studio, go to "Manage NuGet Packages", and browse for WebEssentials.AspNetCore.PWA, and install the package.

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 the 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 icons of different sizes but the above sizes are compulsory.

Create a JSON file with the name manifest.json in the wwwroot folder of your current project, and paste the following JSON code. Here, we have added the icons of 512x512 and 192x192 sizes.

{
    "name": "PWADemo",
    "short_name": "PWA",
    "description": "Demo PWA application in ASP.NET Core.",
    "icons": [
        {
            "src": "images/icons/logo144.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "/images/icons/logo192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "images/icons/logo168.png",
            "sizes": "168x168",
            "type": "image/png"
        },
        {
            "src": "images/icons/logo512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],
    "display": "standalone",
    "start_url": "/"
}

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.

public void ConfigureServices(IServiceCollection services)
{   
    services.AddMvc();
    services.AddProgressiveWebApp();
}

Now, run the project.

To verify whether the PWA Service worker is working or not, go to Chrome Developer Tools, and under the 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.