Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
BlazorのPWAを使ってみた / Tried using PWA
Search
Taka
July 29, 2020
Programming
0
1.1k
BlazorのPWAを使ってみた / Tried using PWA
2020/7/29
C# Tokyo オンライン LT 大会 2020/07
登壇資料
Taka
July 29, 2020
Tweet
Share
More Decks by Taka
See All by Taka
フロントエンド初心者が Blazorを使ってみた / 20220428 C#Tokyo
takahiro901
0
390
HoloLens 2なしでも MRを楽しむ!
takahiro901
0
800
Dependency Injection はじめの一歩 / 20191024 C#Tokyo
takahiro901
0
680
C#勉強法: コンソールでアプリを作ろう / 20190910 C# Tokyo
takahiro901
0
650
Xamarin.Formsで自分用の家計簿アプリを作ってみた / 20190831 JXUG
takahiro901
0
810
プログラミング初心者が Xamarin.Formsやってみた / 20180523 JXUG
takahiro901
0
360
Other Decks in Programming
See All in Programming
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
390
Goのエラースタックトレースの歴史と今後
sonatard
9
1.7k
AmperとFleetを使ったAndroidアプリ
yoppie
0
240
Git Lint
bkuhlmann
4
750
Anthropic Cookbook のおすすめレシピ
schroneko
7
1.1k
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
400
SIMD Parallel Programming with the Vector API
josepaumard
0
210
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
960
見た目から始める生産性向上
ikumatadokoro
8
1k
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
210
Ruby Pattern Matching
bkuhlmann
0
930
Featured
See All Featured
From Idea to $5000 a Month in 5 Months
shpigford
378
45k
Web Components: a chance to create the future
zenorocha
306
41k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Adopting Sorbet at Scale
ufuk
69
8.6k
Why Our Code Smells
bkeepers
PRO
331
56k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
A Philosophy of Restraint
colly
197
16k
4 Signs Your Business is Dying
shpigford
176
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
Transcript
BlazorのPWAを使ってみた 2020/7/29 C# Tokyo オンライン LT 大会 2020/07
自己紹介 • ふるかわ @futa_ttjh • 某日系IT企業のエンジニア • C#、Xamarin.Formsが好き 最近はPowerPlatform、RPAも利用 •
Blog https://takataka430.hatenablog.com/ 2
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
主な技術的特徴 • 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
Web browserでService Wokers、Manifest fileの確認 下の画像はGoogle Chrome の開発者ツールから見ています。 5
C#と何の関係があるの? Blazor WebAssembly でPWAを作成できます! 6
プロジェクトの作り方 (Visual Studio for Macの場合) 7
8
9
マニフェストファイル 10
スマートフォンでインストールしてみよう 11
12 先ほど作成したプロジェクトのサイトに対し てモバイルアプリのブラウザでアクセスし ます 画面下のアイコンをタップするとインストー ルすることができます
13 「Add」をタップします
14 「ADD AUTOMATICALLY」をタップします
15 ホーム画面にアイコンが追加されました これを起動すると・・・
16 このように、ブラウザでページが開くので はなく、ネイティブアプリのように独立して 表示されます
まとめ • PWAとはWEBアプリとネイティブアプリの中間の存在 • Blazor WebAssemblyで作成可能 • インストールするとWEBブラウザとは独立したアプリのように利用できる 17
ご清聴ありがとうございました 18