Slide 1

Slide 1 text

BlazorのPWAを使ってみた 2020/7/29 C# Tokyo オンライン LT 大会 2020/07

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

主な技術的特徴 ● 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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

8

Slide 9

Slide 9 text

9

Slide 10

Slide 10 text

マニフェストファイル 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

13 「Add」をタップします

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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