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

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