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.

    Build Progressive Web Applications With Blazor WebAssembly
    Fig.1 Choose Blazor App as a project template

  • Save the project in the location by giving proper names

    Build Progressive Web Applications With Blazor WebAssembly
    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.

    Build Progressive Web Applications With Blazor WebAssembly
    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.
Build Progressive Web Applications With Blazor WebAssembly
Fig.4 Project Structure
The place we do have changes in files for PWA is under the wwwroot folder
Build Progressive Web Applications With Blazor WebAssembly
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.
  1. {  
  2.     "name""PWABlazor",  
  3.     "short_name""PWABlazor",  
  4.     "start_url""./",  
  5.     "display""standalone",  
  6.     "background_color""#ffffff",  
  7.     "theme_color""#03173d",  
  8.     "icons": [{  
  9.         "src""icon-512.png",  
  10.         "type""image/png",  
  11.         "sizes""512x512"  
  12.     }]  
  13. }  
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.
Build Progressive Web Applications With Blazor WebAssembly
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
Build Progressive Web Applications With Blazor WebAssembly
Fig.6 Install from URL
Build Progressive Web Applications With Blazor WebAssembly
Fig.7 Install
Once we clicked install, as said before, the browser application will be closed and a desktop application will be opened.
Build Progressive Web Applications With Blazor WebAssembly
Fig.8 Our First PWA
Demo
 
Build Progressive Web Applications With Blazor WebAssembly
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.
Build Progressive Web Applications With Blazor WebAssembly
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.
  1. <linkhref="manifest.json"rel="manifest"/>  
When this code is included, the browser populate the web as PWA
  1. <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
  1. <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.