Building Progressive Web Apps (PWAs) With .NET: Everything You Need To Know

Progressive Web Apps (PWAs) combines the best of two worlds—native and web applications—to provide an unmatched user experience. It delivers an app-like user experience at a fraction of the cost of native apps by utilizing modern web capabilities.

There are several reasons to build PWAs, including:

• Creating an app faster and more reliable than regular websites;
• Ability to install the app on desktop or mobile;
• Ability to work offline and
• Support for all major browsers

When you’re working with .NET, you can easily add the required functionalities to any web application or website that will turn it into a Progressive Web Application (PWA). Let’s learn how a dot net development company can add the necessary functionalities into new or existing .NET applications to convert them into a PWA.

The Qualities of Progressive Web Apps (PWAs)

Before we proceed to the steps you need to follow to build PWAs with .NET, you must learn about the qualities of these apps that make them different from a regular website or web application. Here are the qualities of PWAs that dot net development services or those who hire .net developers need to know about:

Reliable

One of the biggest qualities of PWAs that sets them apart from a regular website or web application is that they load reliably. You do not have to wait an eternity for the page to load, even when the network conditions are uncertain or not so good.

Fast

Another big reason to build PWAs with .NET instead of a regular website or native application is that it takes very little time for these apps to respond to interactions with users. These responses can be in the form of page scrolling or seamless animations.

Engaging

The third and final biggest quality of PWAs is that they have an immersive user-experience and engage users naturally on the device they’re using. It is one of the main reasons many user’s home screen today feature these apps.

Overview of Building Progressive Web Apps (PWAs) With .NET

Before we get to the steps you need to follow to implement the behavior of PWAs into your new or existing.NET applications, let’s quickly overview the process involved.

The first thing a dot net development company needs to do to build a progressive web application (PWA) is generate a manifest of the website they are working on. This manifest can be generated using a Service Worker and it will be shown as a JSON file that includes the website’s information to allow users to easily add it on a mobile device or desktop’s home screen.

The main work here is done by the Service Worker that makes caching simple for dot net development services and also provides them with the steps to manage situations where content is not available. You can use JavaScript to register a Service Worker but it will take you some time to master the various rule for handling cache.

The good news is that you can bypass these steps to make it easier for yourself to set up Service Worker and manage your Manifest. You can do this by using the NuGet Package designed specifically for this purpose. You can use the WebEssentials.AspNetCore.PWA package for this purpose.

However, before you begin, make sure the Service Worker works exclusively when you have a site encrypted using SSL. Also, make sure it navigates to HTTPs. It is a very important prerequisite. You can use the use the ConfigureServices methodology to incorporate many different services provided by the package into the container. You may need to use this methodology in your Startup class.

The Steps To Build Progressive Web Applications (PWAs) With .NET

With an overview of building PWAs with .NET done, we can move on to the steps involved in implementing the behaviors or functions associated with PWAs into your new or existing .NET applications. Here are the simple steps you need to follow to create a full-fledged PWA that is fast and reliable, works offline, and supports many browsers:

Install a NuGet Package

As mentioned in the overview above, you need to use the NuGet Package designed to help you set up Service Worker and manage your Manifest to begin implementing PWA behaviors in your new or existing .NET applications. The specific package that you need to incorporate into your .NET project is WebEssentials.AspNetCore.PWA.

Incorporate a Manifest and Icons

After you install the NuGet Package or WebEssentials.AspNetCore.PWA package specifically, you need add a manifest and two image icons. You need to save the manifest file as manifest.json and add the icons in a folder named wwwroot.

While having two image icons is the standard, you can add more if you want. Just make sure you have two image icons in the folder with the following resolutions: 512×512 and 192×192 pixels.

Register A Service

The third and final step you need to follow to build PWAs with .NET is to register a service. You can do this by adding a call to services.AddProgressiveWebApp() within the Startup.Cs’ ConfigureServices methodology. Here is how you can do that:

public void ConfigureServices(IServiceCollection services)

{

    // Add MVC services

    services.AddMvc(options =>

    {

        options.EnableEndpointRouting = false; // For legacy routing, set to true for ASP.NET Core 3.x and above

    });

    // Add support for Progressive Web Apps

    services.AddProgressiveWebApp(options =>

    {

This is the final step to building a PWA with .NET, and after you complete it, you will have a full-fledged Progressive Web Application. You can check the project readme’s verification steps to see how the PWA works and what its impact is on your web application.

Conclusion

Building Progressive Web Apps (PWAs) with .NET is simple once you know the steps involved. You can use the steps outlined above to start implementing PWA behaviors into your new or existing .NET applications today.