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