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.2k
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
410
HoloLens 2なしでも MRを楽しむ!
takahiro901
0
850
Dependency Injection はじめの一歩 / 20191024 C#Tokyo
takahiro901
0
720
C#勉強法: コンソールでアプリを作ろう / 20190910 C# Tokyo
takahiro901
0
670
Xamarin.Formsで自分用の家計簿アプリを作ってみた / 20190831 JXUG
takahiro901
0
840
プログラミング初心者が Xamarin.Formsやってみた / 20180523 JXUG
takahiro901
0
380
Other Decks in Programming
See All in Programming
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
生成AIをkintoneに連携してみた
hideg
0
230
Introduction to GitOps
hwchiu
0
110
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
最近追加した型の紹介とその振り返り
aki19035vc
0
170
Mastering Developer Experience: A Roadmap for Success 【開発生産性Conference 2024】
findyinc
1
380
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Become a Pro
speakerdeck
PRO
15
4.8k
GraphQLとの向き合い方2022年版
quramy
36
13k
In The Pink: A Labor of Love
frogandcode
139
22k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
We Have a Design System, Now What?
morganepeng
46
7k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Web Components: a chance to create the future
zenorocha
307
41k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Faster Mobile Websites
deanohume
303
30k
Web development in the modern age
philhawksworth
203
10k
Statistics for Hackers
jakevdp
792
220k
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