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
今更聞けないPWA
Search
kanayannet
August 01, 2020
Programming
0
730
今更聞けないPWA
PWAの基本となる部分をLTしました。(Gunma.web #38)
kanayannet
August 01, 2020
Tweet
Share
More Decks by kanayannet
See All by kanayannet
TDDと今まで
kanayannet
0
200
個人開発 稼げなくてもいいアプリ
kanayannet
0
320
システムの堅牢性
kanayannet
0
160
Agile的学習方法
kanayannet
0
180
GUIをエンジニアが考える
kanayannet
0
150
http2http3
kanayannet
0
130
old typeからのクラウドインフラ
kanayannet
0
280
疎結合と認知
kanayannet
0
300
クリーンアーキテクチャを活かす考察
kanayannet
1
180
Other Decks in Programming
See All in Programming
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
930
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
700
slow types ってなんだろう?
karad
0
180
2024 コーディング研修
ckazu
0
440
Fast JSX: Don't clone props object #28768
yossydev
1
220
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
170
Try creating your own orderedmap
kazamori
1
270
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
1k
PostmanでAPIの動作確認が楽になった話
h455h1
0
190
AppRouter Panel Talk
yosuke_furukawa
PRO
1
500
Ruby Function Composition
bkuhlmann
1
340
Snowflakeで眠ったデータを起こそう!
estie
0
160
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
91
13k
A designer walks into a library…
pauljervisheath
201
23k
Become a Pro
speakerdeck
PRO
13
4.6k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Ruby is Unlike a Banana
tanoku
96
10k
What's in a price? How to price your products and services
michaelherold
238
11k
Side Projects
sachag
451
41k
Design by the Numbers
sachag
274
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.1k
A Tale of Four Properties
chriscoyier
153
22k
Transcript
今さら聞けない PWA Gunma.web #38 Gunma.web #38 @kanayannet @kanayannet
PWA とは
PWA とは プログレッシブウェブアプリの略 ネイティブアプリに近い動きをもたらすウェブアプ リのこと
PWA を構成するもの
PWA を構成するもの 安全なコンテキスト manifest le service worker
安全なコンテキスト localhost か https
理由 service worker ( 後述) を install 出来ないため
localhost? ⾃分の端末でテストする
グローバルに公開するに はhttps
manifest file { "name": "pwa gunmaweb", "short_name": "pwa-gunmaweb", "icons": [
{ "src": "/icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }, { "src": "/icons/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
service worker 記述する⾔語: JS JS だけど制約が⾊々ある 例: dom にアクセスできない o
ine で表⽰可能などnative アプリっぽい挙動を可 能にする web のJS とは全く異なる制御をする
None
service worker 読込⽅法 if ('serviceWorker' in navigator) { console.log('service worker
is active'); navigator.serviceWorker.register('/sw.js').then(function (regis // 登録成功 console.log('ServiceWorker registration successful with scop }).catch(function (err) { // 登録失敗 :( console.log('ServiceWorker registration failed: ', err); }); }
service worker 記述例 // self.addEventListener('install', function (e) { console.info('install', e);
}); // self.addEventListener('activate', function (e) { console.info('activate', e); }); // self.addEventListener('fetch', function (e) { console.info('fetch', e); });
少しだけデモを⾒せま す。 https://pwa-gunmaweb-e6457.web.app/
参考 Try PWA MDN google https://www.amazon.co.jp/dp/B07ZV4CPXQ/ https://developer.mozilla.org/ja/docs/Web/API/Ser https://developers.google.com/web/fundamentals
まとめ 今回は最低限の実装 最低限の実装でここまで出来る o ine 対応などもあるが、今回は時間over どっか でハンズオンやりたい。 push noti
cation もあるが、時間over のためここま で
ご清聴ありが とうございま した。
質疑応答 実は PWA の事を解りやすく解説する練習のために やりました。 技術的なところもそうですが... ここ解りづらい的な ツッコミも歓迎です。