2020/7/29 C# Tokyo オンライン LT 大会 2020/07 登壇資料
BlazorのPWAを使ってみた2020/7/29C# Tokyo オンライン LT 大会 2020/07
View Slide
自己紹介● ふるかわ @futa_ttjh● 某日系IT企業のエンジニア● C#、Xamarin.Formsが好き最近はPowerPlatform、RPAも利用● Blog https://takataka430.hatenablog.com/2
PWAとは?● Progressive Web Applications(Apps)の略称● Webアプリでありながら、ネイティブアプリのような体験ができる● 色々な技術を利用している(単一の技術を指しているわけではない)● 端末へのインストール、プッシュ通知、オフラインサポート、など可能3参考https://docs.microsoft.com/en-us/aspnet/core/blazor/progressive-web-app?view=aspnetcore-3.1&tabs=visual-studio
主な技術的特徴● HTTPS必須● Service Workersブラウザとアプリケーションの間にあるプロキシのように振る舞うこれがあると高速なアクセスやプッシュ通知などを実現できる● Manifest fileアプリの名前やアイコンなどを定義するJSONファイル4参考https://docs.microsoft.com/en-us/aspnet/core/blazor/progressive-web-app?view=aspnetcore-3.1&tabs=visual-studio
Web browserでService Wokers、Manifest fileの確認下の画像はGoogle Chrome の開発者ツールから見ています。5
C#と何の関係があるの?Blazor WebAssembly でPWAを作成できます!6
プロジェクトの作り方(Visual Studio for Macの場合)7
8
9
マニフェストファイル10
スマートフォンでインストールしてみよう11
12先ほど作成したプロジェクトのサイトに対してモバイルアプリのブラウザでアクセスします画面下のアイコンをタップするとインストールすることができます
13「Add」をタップします
14「ADD AUTOMATICALLY」をタップします
15ホーム画面にアイコンが追加されましたこれを起動すると・・・
16このように、ブラウザでページが開くのではなく、ネイティブアプリのように独立して表示されます
まとめ● PWAとはWEBアプリとネイティブアプリの中間の存在● Blazor WebAssemblyで作成可能● インストールするとWEBブラウザとは独立したアプリのように利用できる17
ご清聴ありがとうございました18