Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Taka
July 29, 2020

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

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

Taka

July 29, 2020
Tweet

More Decks by Taka

Other Decks in Programming

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. 8

    View Slide

  9. 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