Build Progressive Web Applications With Blazor WebAssembly

Introduction

 

How many of us know that Blazor WebAssembly applications have offline support?. They can convert our Web Application into a Desktop or Mobile Application, and that is called a 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 words, PWA is an enhanced version of Web Applications. PWA gives extra capabilities like Offline Usage, Push Notifications and most importantly, we can install it as a normal app on 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 a project template.
  
  
  
  Fig.1 Choose Blazor App as a project template
  
  
• Save the project in the location by giving proper names
  
  
  
  Fig. 2 Save the project in a location
  
  
• 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 below. By enabling, it will turn our Blazor WebAssembly Application into a 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.

Fig.4 Project Structure

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

Fig.4 Files under the 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 pieces of code in the manifest.json file. We can modify and add more data to this file. Now, let's run this code and see What’s happening, after that we will go through each node in this file.

 

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

Fig.5 Run the current 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

Fig.6 Install from URL

Fig.7 Install

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

Fig.8 Our First PWA

Demo

 

Fig.9 Demo of PWA

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), a shortcut icon of our application. By clicking this icon, we can go to our PWA application and it treats as a Desktop application.

Fig.11 Desktop Shortcut of our PWA

Now let's discuss 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.

<linkhref="manifest.json"rel="manifest"/>

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

<linkrel="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, it being the one that is going to cache our application. So during offline access, it will show the cache data

 

When to create PWA

  

First thing first, Progressive Web Application does not go into an app store or something like that it's not the same thing as an app. It's kind of intermediate steps i.e., It's not a Website or not a 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 a Startup or in a small organization.

Conclusion

 

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