Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
BlazorのPWAを使ってみた / Tried using PWA
Taka
July 29, 2020
Programming
0
820
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
240
HoloLens 2なしでも MRを楽しむ!
takahiro901
0
530
Dependency Injection はじめの一歩 / 20191024 C#Tokyo
takahiro901
0
570
C#勉強法: コンソールでアプリを作ろう / 20190910 C# Tokyo
takahiro901
0
500
Xamarin.Formsで自分用の家計簿アプリを作ってみた / 20190831 JXUG
takahiro901
0
650
プログラミング初心者が Xamarin.Formsやってみた / 20180523 JXUG
takahiro901
0
250
Other Decks in Programming
See All in Programming
夕食断食にTRY!/for-lt-12th
pachikuriii
0
250
Untangling Coroutine Testing (Droidcon Berlin 2022)
zsmb
2
500
Lookerとdbtの共存
ttccddtoki
0
670
OSS貢献を気軽にしたい Let's Go Talk #1
yuyaabo
2
240
「困りごと」から始める個人開発
ikumatadokoro
4
270
実践 SpiceDB - クライドネイティブ時代をサバイブできるパーミッション管理の実装を目指して / Practical SpiceDB
lmt_swallow
0
140
Edge Side Frontend という新領域
mizchi
24
10k
Cloudflare WorkersでGoのHTTPサーバーを動かすライブラリを作った話
syumai
0
150
ストア評価「2.4」だったCOCOARアプリを1年で「4.4」になんとかした方法@Cloud CIRCUS Meetup #2
1901drama
0
190
Google I/O 2022 Android関連概要 / Google I/O 2022 Android summary
phicdy
1
420
ZOZOTOWNにおけるDatadogの活用と、それを支える全社管理者の取り組み / 2022-07-27
tippy
1
3.5k
LetsTry
maimux2x
0
100
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
324
55k
WebSockets: Embracing the real-time Web
robhawkes
57
5.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
Faster Mobile Websites
deanohume
294
29k
A better future with KSS
kneath
226
16k
Visualization
eitanlees
125
12k
The Mythical Team-Month
searls
210
39k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Art, The Web, and Tiny UX
lynnandtonic
280
18k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
940
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
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