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.4k
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
450
HoloLens 2なしでも MRを楽しむ!
takahiro901
0
1k
Dependency Injection はじめの一歩 / 20191024 C#Tokyo
takahiro901
0
820
C#勉強法: コンソールでアプリを作ろう / 20190910 C# Tokyo
takahiro901
0
760
Xamarin.Formsで自分用の家計簿アプリを作ってみた / 20190831 JXUG
takahiro901
0
920
プログラミング初心者が Xamarin.Formsやってみた / 20180523 JXUG
takahiro901
0
430
Other Decks in Programming
See All in Programming
PicoRuby on Rails
makicamel
2
120
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
140
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
440
Is Xcode slowly dying out in 2025?
uetyo
1
260
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
500
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
910
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
750
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
690
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
ニーリーにおけるプロダクトエンジニア
nealle
0
780
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Optimizing for Happiness
mojombo
379
70k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
The Cult of Friendly URLs
andyhume
79
6.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
We Have a Design System, Now What?
morganepeng
53
7.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Unsuck your backbone
ammeep
671
58k
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