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

B67d76d100e6dbb2ec11087c44d02fbf?s=47 Taka
July 29, 2020

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

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

B67d76d100e6dbb2ec11087c44d02fbf?s=128

Taka

July 29, 2020
Tweet

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