Create a progressive web app that can be installed and run on each client

Page creation date :

environment

Visual Studio
  • Visual Studio 2019
.NET
  • .NET 5.0

What is Progressive Web Apps (PWA)?

In a nutshell, it's an application that allows you to install and use web applications on your Windows PC, iPhone, Android, and other devices.

Blazor WebAssembly is a standardized WebAssembly itself, so the above implementation is possible. It's basically web application-based, but you can also use native features such as push notifications in plus alpha.

The steps for the user to install are also very simple because they only have to go to the target page and press the install button.

Create a Blazor WebAssembly PWA project

It's basically the same as creating a Blazor WebAssembly project.

Simply create a project as usual and check progressive web applications when you see the "Additional Information" screen below.

With the exception of PWA-specific features, blazor WebAssembly development is basically the same as the pattern without PWA.

Differences from projects that are not PWA

When you create a project in PWA, you have several more files.

Also,index.html when you open , some code has been added that references these files.

Try PWA

Debug the project.

The run sample is exactly the same as the pattern without PWA, but if you run it with PWA, you can see that the install button has been added to the Web browser.

Click to confirm whether to install it, so try to install it.

This will open a separate window in which you can run the Blazor app. Because it acts as a client app instead of a web browser, you can also make OS-related settings as shown.

Because it is installed, it is registered in the start menu like this and can be started.

However, since the contents are web apps, it can only be used unless there is a server where you can download content. For example, if you install it in a debug run, you must start IIS Express for debugging before you can use the installed app.

uninstall

The uninstall procedure is the same as for a regular installed app. The operation depends on the target platform you installed.