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
420
HoloLens 2なしでも MRを楽しむ!
takahiro901
0
900
Dependency Injection はじめの一歩 / 20191024 C#Tokyo
takahiro901
0
740
C#勉強法: コンソールでアプリを作ろう / 20190910 C# Tokyo
takahiro901
0
690
Xamarin.Formsで自分用の家計簿アプリを作ってみた / 20190831 JXUG
takahiro901
0
870
プログラミング初心者が Xamarin.Formsやってみた / 20180523 JXUG
takahiro901
0
390
Other Decks in Programming
See All in Programming
Интеграционное тестирование: как приручить хаос
mariyasaygina
0
530
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
320
Re:PandasAI:生成AIがデータ分析業務にもたらすパラダイムシフト【増補改訂版】
negi111111
1
890
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
6
1.6k
Beyond Laravel Octane - Hyperf for Laravel Artisans
albertcht
1
120
XP2024 っていう国際会議に行ってきたよの記 / XP2024 Conference Report
bonotake
4
200
Rails 8 Frontend: 10 commandments & 7 deadly sins in 2025
yshmarov
1
620
Subclassing, Composition, Python, and You
hynek
3
120
全方位強化 Python 服務可觀測性:以 FastAPI 和 Grafana Stack 為例
blueswen
1
380
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
200
[PHPカンファレンス沖縄2024]「無理なくできるだけ安全に」テストもないレガシーコードをリファクタリングするテクニック
ikezoemakoto
3
120
Pydantic x Database API:turu-pyの開発
yassun7010
1
550
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
How to train your dragon (web standard)
notwaldorf
87
5.6k
No one is an island. Learnings from fostering a developers community.
thoeni
19
2.9k
We Have a Design System, Now What?
morganepeng
49
7.1k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
25
660
Robots, Beer and Maslow
schacon
PRO
157
8.2k
How to Think Like a Performance Engineer
csswizardry
16
1k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Thoughts on Productivity
jonyablonski
67
4.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
48k
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