🐥note.

小鳥とMicrosoft <3 なエンジニアの技術Blog📚

Client side BlazorとAzure Blob Storageで作る簡単PWA

Client side BlazorをPWA対応させてみました。

PWAのServiceWorkerの機能にはHTTPSが必要なので手っ取り早くAzure Blob Storageを使用します。

ちなみに環境は以下の通り

  • .NET Core 3.1 Preview2
  • Microsoft.AspNetCore.Blazor.Templates 0.7.0

Blazor TemplateのUpdate

自身の環境ではBlazorのTemplateが古いせいかClient side Blazor(blazorwasm)がdotnet newで表示されなかったので、Templateを更新しました。
※NugetのMicrosoft.AspNetCore.Blazor.Templatesを参照

dotnet new --install Microsoft.AspNetCore.Blazor.Templates::0.7.0

これで無事表示されるようになりました。

Client side Blazorの作成

Client side Blaozrを作成します。

dotnet new blazorwasm -o SampleBlazor

ここからPWAの設定を行っていきます。

PWAの設定

PWAに対応するにはicon画像manifest.jsonServiceWorkerを用意したりと色々メンドクサイようです。

ちょっと調べたところ、BlaozrPWA.MSBuildなるいい感じのライブラリがありました。

github.com

これはビルド時にPWA対応に必要なファイルを自動生成してくれたり、ServiceWorkerのを読込み処理を自動的にindex.htmlへ追加してくれるようです。

まずはBlazorPWA.MSBuildをインストールします。

dotnet add package BlazorPWA.MSBuild

ビルド時に自動的にServiceWorkerの更新を行うよう.csprojに以下の設定を追加します。

    <PropertyGroup>
        <ServiceWorkerForce>true</ServiceWorkerForce>
    </PropertyGroup>

他にも色々と設定できるようですが、ひとまずこれで設定は終了です。
※その他の設定の詳細はBlazorPWA.MSBuildリポジトリをご参照下さい

Buildしてみる

ビルドしてみます。

dotnet build

自動的にicon画像やらServiceWorkerなどを生成してくれました。

f:id:piyo_esq:20191114065607p:plain
dotnet build後のwwwrootフォルダ

index.htmlでは生成したServiceWorkerRegister.jsmanifest.jsonを読み込む文が追加されます。

f:id:piyo_esq:20191114065643p:plain
index.html

実行してみましょう。

dotnet run

f:id:piyo_esq:20191114065702p:plain
dotnet run

PWAのインストールが可能な場合、画面下部にその旨を知らせるメッセージが表示されるはずですが、特に変化はありませんね。
これはServiceWorker.jsに記載されたファイル構成とdotnet runで起動したファイル構成が一致してしないだと思われます(たぶん?)

とりあえず次へ進みます。
Azure Blob Storageにデプロイするためにpublishします。

dotnet publish -c Release

これでbin/Release/netstandard2.0/publish/SampleBlazor/dist以下にDeployするファイル一式が作成されました。

Azure Blob Storageに置いてみる

Azure Blob Explorerを起動しpublishしたファイルをBlob Serviceの静的Webサイトへアップロードします。
Azure Blob Storageの設定ができていない方はこちらの記事をご参照ください。

blog.piyosi.com

ここで注意したいのはServiceWorker.jsServiceWorkerRegister.jsのコンテンツの種類です。
コンテンツの種類がtext/plain; charset=utf-8になっていた場合text/javascript; charset=utf-8に変更する必要があります。
※実際にハマりました...。

f:id:piyo_esq:20191114065910p:plain
Azure Blob Explorer - コンテンツの種類が`text/plain;`になっている

右クリックしてプロパティからコンテンツの種類を変更しましょう。

f:id:piyo_esq:20191114065952p:plain
プロパティ画面

両方とも変更しました。

f:id:piyo_esq:20191114070013p:plain
Azure Blob Explorer - コンテンツの種類変更後

Chromeの設定

最後にGoogle ChromeでPWAをインストールできるようflag設定を変更します。

chrome://flagsにアクセスしてPWAの設定をEnableにします

f:id:piyo_esq:20191114070209p:plain
chrome://flags

以上で完了です。
サイトにアクセスしてみましょう。

画面下部にPWAをインストールするかどうか確認するメッセージが表示されました。

f:id:piyo_esq:20191114070230p:plain
PWAインストール確認メッセージが表示された図

アドレスバーには⊕マーク、設定メニューにはSampleBlazorをインストールというメニューが追加されています。

f:id:piyo_esq:20191114070310p:plain
PWAインストールのボタンとメニュー

⊕マークを押下すると、こんな画面になります。

f:id:piyo_esq:20191114070341p:plain
PWAインストール確認ダイアログ

PWAになりました

f:id:piyo_esq:20191114070404p:plain
PWAの画面

超簡単ですね。

余談:Chromium Edgeなら...

Chromium版EdgeならPWA対応したページじゃなくてもアプリとしてインストールというメニューが表示されます。

f:id:piyo_esq:20191114070427p:plain
Chromium版Edge

Offlineでも使えるというわけではありませんが、tweetdeckとかよく使いそうなサイトをこれで登録しておくのは全然ありな気がします。

おわり

  • Azure Blob Storageを使わない場合はgithub.ioが手っ取り早くて良いかと思います。

  • Server side Blazorも同じ方法でPWA化できます。
    ※勿論DeployするのはAzure Blob Storageの静的サイトではダメですが。

  • 来年の.NET 5に併せて正式にBlazorのElectron対応とPWA対応がくるはずなので、それまでの間はこんな感じの方法でなんとかなりそうですね。

  • Chromium版EdgeがWindowsのデフォルトブラウザになれば、業務アプリなんかをPWAで作る選択肢が増え...ないですね弊社は(残念

追記

公開してからiPhoneだとPWAとしてインストールできないのに気が付いてしまいました。 なんでや...😣

以上です。