各クライアントにインストールして実行できるプログレッシブウェブアプリを作成する

環境

Visual Studio

• Visual Studio 2019

.NET

• .NET 5.0

プログレッシブウェブアプリ (PWA) とは

簡単に説明すると Web アプリケーションを Windows PC や iPhone, Android などの各端末にインストールして使用することができるアプリケーションの事です。

Blazor WebAssembly の実態は標準化されている WebAssembly そのものなので上記の実装が可能となっています。 基本的には Web アプリケーションベースなのですが、プラスアルファでプッシュ通知などのネイティブ機能も使用することもできます。

ユーザーがインストールする手順も対象ページにアクセスしてインストールボタンを押すだけなので非常に簡単です。

Blazor WebAssembly PWA プロジェクトの作成

基本的には Blazor WebAssembly のプロジェクトを作成する方法と同じです。

通常の手順通りプロジェクトを作成し、以下の「追加情報」の画面にきたら「プログレッシブ Web アプリケーション」にチェックを入れるだけです。

PWA 固有の機能を除けば Blazor WebAssembly の開発は基本的に PWA の無いパターンと同じです。

PWA ではないプロジェクトとの差異

PWA でプロジェクトを作成するといくつかファイルが増えています。

また、index.html を開くとこれらのファイルを参照しているコードがいくつか追加されています。

PWA を試す

プロジェクトをデバッグ実行します。

実行サンプルは PWA がないパターンと全く同じですが、PWA ありで実行すると Web ブラウザにインストールボタンが追加されていることが分かります。

クリックするとインストールをするか確認が表示されるのでインストールしてみます。

するとこのように別ウィンドウが開き、その中で Blazor アプリが動かせるようになります。 これは Web ブラウザではなくクライアントのアプリとして動作するため、図のように OS に関連した設定を行うこともできます。

インストールしているのでこのようにスタートメニューに登録され起動できるようになります。

ただしあくまでも中身は Web アプリなので、コンテンツをダウンロードできるサーバーが存在していないと使用できません。 例えばデバッグ実行でインストールした場合はデバッグで IIS Express を起動していないとインストールしているアプリは使用できません。 また、PWA は https で接続しないとインストールできない点に注意してください。

アンインストール

アンインストールの手順は通常のインストールアプリと同じです。操作方法についてはインストールした対象のプラットフォームに依存します。

更新履歴

2022/7/13

• PWA のインストールには https が必要な点についての説明追記。

2022/3/30

• 初版