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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide