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
470
HoloLens 2なしでも MRを楽しむ!
takahiro901
0
1k
Dependency Injection はじめの一歩 / 20191024 C#Tokyo
takahiro901
0
840
C#勉強法: コンソールでアプリを作ろう / 20190910 C# Tokyo
takahiro901
0
780
Xamarin.Formsで自分用の家計簿アプリを作ってみた / 20190831 JXUG
takahiro901
0
940
プログラミング初心者が Xamarin.Formsやってみた / 20180523 JXUG
takahiro901
0
440
Other Decks in Programming
See All in Programming
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
2
670
SODA - FACT BOOK(JP)
sodainc
1
8.6k
CSC509 Lecture 06
javiergs
PRO
0
260
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
860
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
240
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
630
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
320
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
190
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
950
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
340
Featured
See All Featured
BBQ
matthewcrist
89
9.8k
Typedesign – Prime Four
hannesfritz
42
2.8k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
How to Ace a Technical Interview
jacobian
280
24k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
4 Signs Your Business is Dying
shpigford
185
22k
Visualization
eitanlees
149
16k
Unsuck your backbone
ammeep
671
58k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Balancing Empowerment & Direction
lara
5
700
Done Done
chrislema
185
16k
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