2021/04/17(土)ASP.NET Core Blazor WebAssemblyでPWA

ちょっと遠回りしましたが、思ったより簡単にできました。
ブラウザ(下記はEdge)でURLを開くとインストール用のアイコンが表示。
20210417001.png


アイコンをクリックすると「インストール」ボタンが表示される。
20210417002.png


インストール完了
20210417004.png


起動
20210417003.png


ちゃんとステータスバーにもアイコンが表示される。
20210417005.png


スマホで試すとネイティブの電卓と比べまだまだ動きがWebアプリ、って感じですがデスクトップアプリとしては、WPF勉強しかけてましたがもういいかな?

やったこと

ホスト先を探す

httpsでアクセスできるホスト先が必要になりますが、GitHub Pages を使うことに。
こちらを使わせてもらってできたのが3.2.0の通常のBlazor WebAssemblyプログラム。
ソースを更新すると自動でGitHub Pagesの方も更新され初めてのワークフローに感動。

ASP.NET Core5.0に移行

ここを見てPWA化しようとしたら最新版にアップデートしていない場合は使っているフレームワークのバージョン指定して取得しろとあって最新は5.0っぽいことが判明。

出来立てほやほやアプリでバージョンが余りにも古すぎる気がして最新版にあげることに。しばらく使っていなかったVisual Studio最新版にしていたのですが、プロジェクトのターゲットフレームワーク選択画面に5.0が出てこないのでここに従いSDK 5.0を入れて無事アップグレード完了。

PWA化

再度ここを見てPWA化。ファイルの追加と追加したファイルの参照追加。

ワークフローの修正

なんか変わった気がしないな、と思っていたらActionsのworkflow実行時にエラーになってました。エラーメールも届いてました。
20210417006.png

gh-pages.ymlを二度ほど適当に修正してエラーが3回分。
しかも競合発生してgitで初めての競合解決しました。TFSと似たようなマージツールが出てきてくれて助かりました。

dotnet-versionを505ではなく5.0.202にしないとダメなのでした。
20210417007.png

OK キャンセル 確認 その他