Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
今更聞けないPWA
kanayannet
August 01, 2020
Programming
0
190
今更聞けないPWA
PWAの基本となる部分をLTしました。(Gunma.web #38)
kanayannet
August 01, 2020
Tweet
Share
More Decks by kanayannet
See All by kanayannet
kanayannet
0
43
kanayannet
0
86
kanayannet
0
95
kanayannet
0
120
kanayannet
1
400
kanayannet
0
240
kanayannet
0
410
kanayannet
0
220
kanayannet
0
890
Other Decks in Programming
See All in Programming
kulkarniankita09
0
270
chatii
2
290
minodriven
37
29k
bkuhlmann
4
300
ickx
3
640
hyodol2513
2
1.1k
samjulien
0
430
77web
2
2.5k
sh_akira
3
130
dnskimo
7
1.4k
kidokidofire
1
110
fr0gger
2
2.9k
Featured
See All Featured
michaelherold
226
8.7k
jcasabona
8
590
cherdarchuk
73
270k
jakevdp
776
200k
morganepeng
21
1.3k
swwweet
206
6.9k
orderedlist
PRO
330
36k
searls
204
37k
yeseniaperezcruz
302
31k
maggiecrowley
10
550
roundedbygravity
84
7.9k
kastner
54
2k
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 の事を解りやすく解説する練習のために やりました。 技術的なところもそうですが... ここ解りづらい的な ツッコミも歓迎です。