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
   

   View Slide

2. 自己紹介
   ● ふるかわ @futa_ttjh
   ● 某日系IT企業のエンジニア
   ● C#、Xamarin.Formsが好き
   最近はPowerPlatform、RPAも利用
   ● Blog https://takataka430.hatenablog.com/
   2
   

   View Slide

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
   

   View Slide

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
   

   View Slide

5. Web browserでService Wokers、Manifest fileの確認
   下の画像はGoogle Chrome の開発者ツールから見ています。
   5
   

   View Slide

6. C#と何の関係があるの？
   Blazor WebAssembly でPWAを作成できます！
   6
   

   View Slide

7. プロジェクトの作り方
   （Visual Studio for Macの場合）
   7
   

   View Slide

8. View Slide

9. View Slide

10. マニフェストファイル
    10
    

    View Slide

11. スマートフォンでインストールしてみよう
    11
    

    View Slide

12. 12
    先ほど作成したプロジェクトのサイトに対し
    てモバイルアプリのブラウザでアクセスし
    ます
    画面下のアイコンをタップするとインストー
    ルすることができます
    

    View Slide

13. 13
    「Add」をタップします
    

    View Slide

14. 14
    「ADD AUTOMATICALLY」をタップします
    

    View Slide

15. 15
    ホーム画面にアイコンが追加されました
    これを起動すると・・・
    

    View Slide

16. 16
    このように、ブラウザでページが開くので
    はなく、ネイティブアプリのように独立して
    表示されます
    

    View Slide

17. まとめ
    ● PWAとはWEBアプリとネイティブアプリの中間の存在
    ● Blazor WebAssemblyで作成可能
    ● インストールするとWEBブラウザとは独立したアプリのように利用できる
    17
    

    View Slide

18. ご清聴ありがとうございました
    18
    

    View Slide