BlazorのPWAを使ってみた / Tried using PWA

2020/7/29
C# Tokyo オンライン LT 大会 2020/07
登壇資料

Transcript

1. BlazorのPWAを使ってみた 2020/7/29 C# Tokyo オンライン LT 大会 2020/07
2. 自己紹介 • ふるかわ @futa_ttjh • 某日系IT企業のエンジニア • C#、Xamarin.Formsが好き 最近はPowerPlatform、RPAも利用 • Blog https://takataka430.hatenablog.com/ 2
3. 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
4. 主な技術的特徴 • 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
5. Web browserでService Wokers、Manifest fileの確認 下の画像はGoogle Chrome の開発者ツールから見ています。 5
6. C#と何の関係があるの？ Blazor WebAssembly でPWAを作成できます！ 6
7. プロジェクトの作り方 （Visual Studio for Macの場合） 7
8. 8
9. 9
10. マニフェストファイル 10
11. スマートフォンでインストールしてみよう 11
12. 12 先ほど作成したプロジェクトのサイトに対し てモバイルアプリのブラウザでアクセスし ます 画面下のアイコンをタップするとインストー ルすることができます
13. 13 「Add」をタップします
14. 14 「ADD AUTOMATICALLY」をタップします
15. 15 ホーム画面にアイコンが追加されました これを起動すると・・・
16. 16 このように、ブラウザでページが開くので はなく、ネイティブアプリのように独立して 表示されます
17. まとめ • PWAとはWEBアプリとネイティブアプリの中間の存在 • Blazor WebAssemblyで作成可能 • インストールするとWEBブラウザとは独立したアプリのように利用できる 17
18. ご清聴ありがとうございました 18