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
460
HoloLens 2なしでも MRを楽しむ!
takahiro901
0
1k
Dependency Injection はじめの一歩 / 20191024 C#Tokyo
takahiro901
0
830
C#勉強法: コンソールでアプリを作ろう / 20190910 C# Tokyo
takahiro901
0
770
Xamarin.Formsで自分用の家計簿アプリを作ってみた / 20190831 JXUG
takahiro901
0
930
プログラミング初心者が Xamarin.Formsやってみた / 20180523 JXUG
takahiro901
0
440
Other Decks in Programming
See All in Programming
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
950
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
300
Understanding Ruby Grammar Through Conflicts
yui_knk
1
110
AIエージェント開発、DevOps and LLMOps
ymd65536
1
120
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.6k
DataformでPythonする / dataform-de-python
snhryt
0
180
JetBrainsのAI機能の紹介 #jjug
yusuke
0
200
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
180
ワープロって実は計算機で
pepepper
2
1.4k
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
940
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
12
2.7k
ゲームの物理
fadis
5
1.2k
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
470
Scaling GitHub
holman
462
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
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