Build Progressive Web Applications with Blazor WebAssembly

Introduction

How many of us know, Blazor WebAssembly applications has offline support?. They can convert our Web Application into a Desktop or Mobile Applications, and that is called Progressive Web Application (PWA). In this article, we will discuss how to convert our WebAssembly Application into a Progressive Web Application (PWA), How do a PWA application works, PWA limitations, when to use PWA.

What are Progressive Web Apps (PWA)

In simple, PWA are enhanced version of Web Applications. PWA gives extra capabilities like Offline Usage, Push Notifications and most important is, we can install as normal app on the mobile and desktop. PWA is trying to bridge the gap between native and web apps. PWA is a Web Technology

Creating PWA with Blazor WebAssembly

Start Visual Studio 2019 and select Create a new project
Choose Blazor App as project template.

Fig.1 Choose Blazor App as project template

Save the project in the location by giving proper names

In the next step choose Blazor WebAssembly App, from the option. In order to create PWA, we need to choose Blazor WebAssembly App, since PWA always does not have a server. We also need to enable the Progressive Web Application as shown in the below. By enabling, it will turn our Blazor WebAssembly Application into Progressive Web Application.

Fig. 3 Choose Blazor WebAssembly and Enable the Progressive Web Application Option

Click Create button and now we have successfully created our project

Project Structure

If you are already familiar with Blazor WebAssembly project structure, nothing has changed under Pages and Shared folders and also nothing much changed in _Imports.razor, App.razor and Program.cs files as well.

The place we do have changes in files for PWA is under wwwroot folder

We can see four new files as icon-512.png, manifest.json, service-worker.js and service-worker.published.js

icon-512.png

The Desktop Icon for our application, which is the default blazor icon

manifest.json

This JSON file is the root heart of the PWA. This is an industrial standard life. In this file we will declare and setup the PWA.

{
  "name": "PWABlazor",
  "short_name": "PWABlazor",
  "start_url": "./",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#03173d",
  "icons": [
    {
      "src": "icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

The above code is a few piece of code in the manifest.json file. We can modify and add more data into this file. Now lets run this code and see What’s happening, after that we will go through each nodes in this file.

Run the application and make sure IIS Express is selected, because we need unique ports to run PWA.

After running, the application still looks like a normal Blazor application. The difference is tiny. If we look into the URL, you can see an Icon as plus for the first time (If the current PWA is not installed before). Once we click that plus icon, it prompts us to Install this application, and once installed, it looks like the Desktop application. See Fig.6 and Fig.7

Once we clicked install, as said before, the browser application will be closed and a desktop application will be opened.

Demo

This is our same Blazor application, but it is running as PWA. It does not have any browser URL, navigational bars and it just looks like a desktop application. And if we move to our Desktop, we can see an icon of blazor (icon-512.png), an shortcut icon of our application. By clicking this icon, we can go to our PWA application and it treats as Desktop application.

Now lets discuss about the JSON nodes in the manifest.json

name – Display name of the Application
short_name – The short name of our application
start_url – Denotes the Root Directory
background_color – We can set the background color of the application
theme_color – Sets theme color of the application
icons – The desktop icon of our application

index.html

How the browser denotes the current application is a PWA or not?. Those details are from this file. If we look into the file, there are few entries in this file.

<link href="manifest.json" rel="manifest" />

When this code is included, the browser populate the web as PWA

<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />

When this code is included, an icon will be created in the desktop, if we install the application

<script>navigator.serviceWorker.register('service-worker.js');</script>

The service-worker.js, is a special kind of JavaScript file, that we are going to use to aid in our PWA’s functioning i.e., how our Progress Web Application works, its been the one that is going to cache our application. So during offline access, it will shows the cache data

When to create PWA

First thing first, Progressive Web Application does not go into an app store or something like that its not the same thing as an app. Its kind of an intermediate steps i.e., Its not an Website or not an Mobile App or not a Desktop app. It sits in the middle. But there are more benefits to a PWA.

When we can provide data even in the offline
When your application to be used frequently without typing URL, when you are developing the application as Startup or in a small organization.

Conclusion

In this article, we had a discussion how to create a PWA in Blazor and its purpose. I assume you all found useful. Please share your feedbacks in the comment section