Easily Create A Progressive Web App (PWA) with Blazor Web Assembly

Introduction

Blazor is a framework built by Microsoft for creating interactive client-side web UI with .NET codebase. We can write both client-side and server-side code in C#.NET itself. There are two hosting models available for Blazor. Blazor Server and Blazor WebAssembly. Blazor Server for production was already available. Recently Microsoft released the production version of Blazor Web Assembly also.

A Progressive Web Application (PWA) is a Single Page Application (SPA) that uses modern browser APIs and capabilities to behave like a desktop app. Blazor WebAssembly is a standards-based client-side web app platform, so it can use any browser API, including PWA APIs required for the following capabilities:

Working offline and loading instantly, independent of network speed.
Running in its own app window, not just a browser window.
Being launched from the host's operating system start menu, dock, or home screen.
Receiving push notifications from a backend server, even while the user isn't using the app.
Automatically updating in the background.

You can learn more details about Progressive Web Apps basics from below official document from Microsoft.

https://docs.microsoft.com/en-us/aspnet/core/blazor/progressive-web-app?view=aspnetcore-3.1&tabs=visual-studio

Prerequisites

Install the latest .NET Core SDK (3.1.300 or later)

To maximize your Blazor productivity, be sure to install a supported version of Visual Studio for your platform of choice:

Windows: Visual Studio 2019 16.6

macOS: Visual Studio for Mac 8.6

Windows/macOS/Linux: Visual Studio Code with the C# extension

In this post, we will see how to create a PW App with Blazor very easily. We will see some main features of this PW App as well.

Install the .NET Core SDK as per the prerequisite mentioned in this post. Open Visual Studio and choose Blazor template. You can choose Blazor Web Assembly option. When you choose the Web Assembly, you will see two more options under advanced tab. Select “Progressive Web Application” option also.

After created the new project, if you look at the project structure, you can see three additional files under “wwwroot” directory

“manifest.json”, “service-worker.js”, and “service-worker.published.js” files are used for PW App.

manifest.json file contains below details.

service-worker.js file contains below details.

service-worker.published.js file contains below details as well.

When you run the application, you can see a new install button in the browser. You can click this button to install our application locally.

If you click this button, app will be installed in our local machine immediately.

You can see that our application is working as a Progressive Web App now.

If you look at the “Application” tab of developer tools, you can see the below service workers details.

Unfortunately, in development mode service worker does not behave properly in many occasions. To check the offline mode feature correctly, we can deploy our application to IIS server or Azure App Service.

Deploy application to Azure App Service

We are going to publish our app to Azure portal and check the offline mode.

Give a unique name for our Web app and choose a hosting plan. Click “Create” button to create hosting plan and app service.

Click “Publish” button to deploy our application to Azure portal.

After deployed the application, you can browse the Azure app and install it again as I mentioned earlier. (You can check the offline feature without installing also) Click the fetch data menu item and allow PWA to cache the result. We can disconnect the internet connection and check the application again. Application works fine as before! This is a very cool feature, right? Our Azure app is working without internet also.

We can remove the app from local machine by clicking uninstall option.

Uninstallation is also very simple like installation of the app.

Conclusion

In this post, we have seen that how to create a Progressive Web App with Blazor Web Assembly template and we have also seen that, this app works without any internet connection as offline mode. This is the basic feature of PW Apps and we will explore more features in upcoming articles. You can convey your valuable feedback as comments.

Reference

https://docs.microsoft.com/en-us/aspnet/core/blazor/progressive-web-app?view=aspnetcore-3.1&tabs=visual-studio

1 Comment

Join the conversation! Your thoughts help the community grow.

Ameen Mughal6y ago
http://topresourcing.co.uk/cv-formatting-uk/ CV formatting is no doubt a ‘time drain’ on a recruiter and a loss of time means a loss of revenue. In today’s ultra-competitive market, recruitment firms are seeking new ways of becoming more effective and improving output, while simultaneously reducing business overheads. This is a significant challenge.