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

environment

Visual Studio

• Visual Studio 2019

.NET

• .NET 5.0

What is a Progressive Web App (PWA)?

Simply put, it's an application that allows you to install and use Web applications on each device such as a Windows PC, iPhone, or Android.

The reality of 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 installation procedure for the user is also very simple, as it is only necessary to visit the target page and press the install button.

Creating a Blazor WebAssembly PWA Project

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

Simply create the project as you normally would, and when you come to the "Additional Information" screen below, simply check "Progressive Web Application".

Aside from PWA-specific features, Blazor WebAssembly development is essentially the same as the PWA-free pattern.

Differences from non-PWA projects

When you create a project in PWA, you get a few more files.

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

Try a PWA

Run the project for debugging.

The execution sample is exactly the same as the pattern without PWA, but when run with PWA, you can see that an install button has been added to the web browser.

When you click it, a confirmation to install is displayed, so I will try to install.

This will open a separate window in which you can run the Blazor app. It acts as a client app, not a web browser, so you can also configure OS-related settings as shown in the figure.

Since it is installed, it will be registered in the start menu like this and you will be able to start it.

However, since the content is a web app, it cannot be used unless there is a server that can download the content. For example, if you install it during a debug run, you cannot use the installed app unless you have started IIS Express for debugging. Also note that PWAs cannot be installed without an https connection.

uninstall

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

Changelog

2022/7/13

• Added explanation that https is required to install PWA.

2022/3/30

• first edition