今回は以前作成した「Blazorで、電卓アプリをつくってみる」を最新のBlazor PWAテンプレートで、再作成してみたいと思います
PWA概要
PWAとは「Progressive Web Apps」のことで、Webアプリケーションをあたかも独立したアプリケーションとして実行(表示)できるプログラムのことです。以前「Blazorで、電卓アプリをつくってみる」というタイトルで、実際に様々なデバイスにインストールして使用することができる電卓を作成しました。この当時は、BlazorのデフォルトテンプレートではPWAを作成することはできず、独自に仕組みを組み込むものでした。しかし、最近のプロジェクトテンプレートであれば、PWAを作成することができるので、最近のテンプレートに沿って電卓アプリをPWA化してみたいと思います。
実装
新規プロジェクトの作成
PWAに対応したBlazorアプリケーションを作成するには、Blazorプロジェクトの新規作成時に、「プログレッシブ Web アプリケーション(P)」にチェックを入れて作成します。
プロジェクトファイルの構成
PWA対応を行うには下記を満たす必要があります。
- サイトのHTTPS化
- アイコン(favicon)の設置
- manifest.jsonの作成
- ServiceWorkerの作成
そのためPWAテンプレートで作成されたプロジェクト構成では、manifest.jsonやservice-worker.jsなど上記を満たすファイルが作成されます。
電卓アプリの移植
電卓アプリを実現するコンポート(Index.razor)は、以前作成したコードがそのまま動きます。PWA対応にとって重要なのはindex.htmlやmanifest.json、service-worker.jsなどのファイルです。以前はservice-worker.jsに、オフライン実行の為のフェッチファイルを全て列挙したり、manifest.jsonにfaviconの定義を行いました。何か間違ってるとブラウザがPWAとして認識せず苦労した覚えたがあります。PWAテンプレートでは最初からこれらのファイルが用意されている為、導入しやすくなっています。
実行
この状態で実行してみましょう。
ちゃんと「インストールしますか？」も表示されますね。これで、標準のテンプレートだけでPWA化へ対応できることがわかりました。
インストールされたアプリケーションを実行すると、あたかも独立したアプリケーションを実行している様に振る舞う事が可能になっています
オフライン実行
PWAの特徴として、サービスワーカー（Service Worker）という仕組みを使って、Webサーバーとの通信が切断されてもキャッシュされたファイルによりプログラムを実行することができます。キャッシュの機能は、初回のローディング時間を大幅に削減することができる為、実用的な機能です。キャッシュを有効にさせるには、servfice-worker.js内に記述されたフェッチするファイルパスを書き込むことで有効になります。
しかし、BlaozrのPWAテンプレートで作成されるservice-worker.jsを見てみると、開発中はキャッシュさせるなよ！コード変更してもキャッシュされてるから反映しないぜ！とコメントされています。キャッシュされてしまうと、ブラウザのキャッシュクリアを実行しないと反映されない為の注意ですね。その為、実際にオフライン実行で使用されるservice-worker.jsは別に定義されています。
// In development, always fetch from the network and do not enable offline support.
// This is because caching would make development more difficult (changes would not
// be reflected on the first load after each change).
self.addEventListener('fetch', () => { });
デプロイ用のService Worker
PWAテンプレートでは 発行した時のみ使用されるデプロイ用のservice-worker.published.jsが用意されています。発行を使ってデプロイした環境では、このServiceWorkerによって、初回のローディング時にすべてのファイルがフェッチされます。尚、この動作は規定で行われます。多数のイメージファイルなどのコンテンツを含める場合、すべてのファイルを取り込もうとする為、注意が必要です。
このあたりの動作については、公式のドキュメントに詳細が記述されています。
うーん、このドキュメントを見ると、オフライン実行は必ずしも必要ないし、複雑だよ！と、書かれてますね
今の時代、ネットに接続されないデバイスは少ないしオフライン実行環境は用途が限定されるのかもしれません
Webサーバーにデプロイしてみる
実際に、Webサーバーにデプロイしてみましょう。Webサーバーにデプロイされたアプリケーションをインストールすると、ネットワークを切断してもアプリを実行することができます
おわりに
Blazor PWAテンプレートを使用したPWAアプリケーションの作成方法についてご紹介しました。PWAテンプレートを使うことでBlazorアプリケーションを簡単にPWAへ対応させることが可能となっています。一方で、Blazorを取り巻く環境については.Net MAUIの登場によって、ネイティブ寄りなアプリの開発が可能になってきており、Webブラウザの範疇以上のことができないPWAの存在は薄まった印象があります。しかし、年々各ブラウザのHTML5/CSS実装状況は進んでおり、Webブラウザができることが広がっています。 12/20の @jsakamoto さんのアドベントカレンダー Blazor WebAssembly で作った Web アプリ "snow catch" ゲームを、🎮 ゲームパッド (ジョイスティック) で操作できるようにするにも書かれていますが、Webブラウザが各種デバイスにアクセスできるようになってきていますし、クライアント側でランタイムなどのインストールが必要のないPWAは大きな可能性を含んでいるのではないでしょうか
