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
Service Workerとは、それを使ってできること / what-is-service-worker
Search
Toshihisa Tomatsu
September 26, 2020
Technology
3
1.7k
Service Workerとは、それを使ってできること / what-is-service-worker
Kanazawa.js Remote Meetup #06の資料です。
https://kanazawajs.connpass.com/event/188109/
Toshihisa Tomatsu
September 26, 2020
Tweet
Share
More Decks by Toshihisa Tomatsu
See All by Toshihisa Tomatsu
フロントエンドのエコシステム / Frontend Ecosystem
10shi10ma
8
2.9k
Service Workerとブラウザでの通知について
10shi10ma
3
230
意外に知らないnpmと便利なCLI
10shi10ma
8
2.1k
歴史から学ぶ現代のフロントエンド
10shi10ma
17
10k
サイボウズ フロントエンドエキスパートチームとOSSの管理について
10shi10ma
0
930
大規模フロントエンドの技術的負債と向き合う。
10shi10ma
5
5.4k
Google I/O ’19から見る新しいJavaScript
10shi10ma
5
2.8k
React+Storybook ことはじめ
10shi10ma
8
2.3k
TypeScript入門 〜型のあるモダンなJavaScript〜
10shi10ma
2
540
Other Decks in Technology
See All in Technology
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
400
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
310
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
210
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
300
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
620
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
660
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
230
Microsoft Intune 勉強会 第 2 回目
tamaiyutaro
2
250
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.4k
一生覚えておきたい「システム開発=コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
2
190
Featured
See All Featured
Building Adaptive Systems
keathley
31
1.9k
Navigating Team Friction
lara
178
13k
Gamification - CAS2011
davidbonilla
76
4.6k
Design by the Numbers
sachag
274
18k
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Unsuck your backbone
ammeep
663
57k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Atom: Resistance is Futile
akmur
259
25k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Code Review Best Practice
trishagee
55
15k
For a Future-Friendly Web
brad_frost
172
9k
Transcript
4FSWJDF8PSLFSͱ ͦΕΛͬͯͰ͖Δ͜ͱ ,BOB[BXBKT3FNPUF.FFUVQ 5PTIJIJTB5PNBUTV 1
֎দढ़ঘ 5PTIJIJTB5PNBUTV αΠϘζגࣜձࣾ ϑϩϯτΤϯυ ۚ େֶଔۀ·Ͱ ˠ౦ژˠѪඤ !UPTIJUPNB !UPTIJ@@UPNB
4FSWJDF8PSLFSͱ 3
4FSWJDF8PSLFS 48 8FCϖʔδͱผʹϒϥβͷόοΫάϥϯυͰ ಈ࡞͢Δ+4ͷ࣮ߦڥͰ ϖʔδ͔ΒͷωοτϫʔΫϦΫΤετʹհೖͰ͖Δ 4
Α͘Θ͔Βͳ͍ 5
4FSWJDF8PSLFS 48 ᶃ8FCϖʔδͱผʹϒϥβͷόοΫάϥϯυͰ ᶄಈ࡞͢Δ+4ͷ࣮ߦڥͰ ᶅϖʔδ͔ΒͷωοτϫʔΫϦΫΤετʹհೖͰ͖Δ 6
4FSWJDF8PSLFS 48 ᶃ8FCϖʔδͱผʹϒϥβͷόοΫάϥϯυͰ ᶄಈ࡞͢Δ+4ͷ࣮ߦڥͰ ᶅϖʔδ͔ΒͷωοτϫʔΫϦΫΤετʹհೖͰ͖Δ 7
Ұൠతͳ8FCϖʔδ ҰൠతʹϒϥβͰಈ͘+4ɺ8FCϖʔδͷ ϥΠϑλΠϜͷதͰ࣮ߦ ˠλϒΛดͨ͡Βɺऴྃ͢Δ 8FCϖʔδ +4 )5.- $44 8FCϖʔδ +BWB4DSJQUͷ࣮ߦ
8
8FCϖʔδͱผʹϒϥβͷ όοΫάϥϯυ 48ɺϒϥβͷཪͰಈ͘ͷͰ ϖʔδΛดͯ͡ੜଘ͢Δ 8FCϖʔδ 48 +4 +4 )5.- $44
8FCϖʔδ 4FSWJDF8PSLFS 9
4FSWJDF8PSLFS 48 ᶃ8FCϖʔδͱผʹϒϥβͷόοΫάϥϯυͰ ᶄಈ࡞͢Δ+4ͷ࣮ߦڥͰ ᶅϖʔδ͔ΒͷωοτϫʔΫϦΫΤετʹհೖͰ͖Δ 10
+4ͷ࣮ߦڥ 8FC8PSLFS ผεϨουͰ+BWB4DSJQUΛ࣮ߦ͢Δ 11
4FSWJDF8PSLFS 48 ᶃ8FCϖʔδͱผʹϒϥβͷόοΫάϥϯυͰ ᶄಈ࡞͢Δ+4ͷ࣮ߦڥͰ ᶅϖʔδ͔ΒͷωοτϫʔΫϦΫΤετʹհೖͰ͖Δ 12
ϦΫΤετʹհೖͰ͖Δ 8FCϖʔδ αʔόʔ BQJBSUJDMFT ʹΞΫηε 4FSWJDF8PSLFS APIϦΫΤετ ϦιʔεͷϦΫΤετ͕͋Εɺҙͷ ॲཧΛ࣮ߦͰ͖ΔΑɻ ϦΫΤετΛൃߦ͢Δ͜ͱͰ͖Δ
13
4FSWJDF8PSLFS 48 ͱ 8FCϖʔδͱผʹϒϥβͷόοΫάϥϯυͰ ಈ࡞͢Δ+4ͷ࣮ߦڥͰ ϖʔδ͔ΒͷωοτϫʔΫϦΫΤετʹհೖͰ͖Δ 14
ͪΐͬͱ͔Δؾ͕͢Δ 15
·ͩྑ͘Θ͔Βͳ͍ͷͰ 48Λ׆༻ͯ͠ΔαʔϏεΛݟͯ ΠϝʔδΛ͚Δ 16
48ΛऔΓೖΕ͍ͯΔ αʔϏε 17
4DSBQCPY ΦϑϥΠϯͰίϯ ςϯπΛӾཡՄೳ 18 IUUQTQSUJNFTKQNBJOIUNMSEQIUNM
5XJUUFS 8FCΞϓϦΛ 18"ͱͯ͠Πϯε τʔϧ πΠʔτ͕ˢ 19 IUUQTEFWFMPQFSTHPPHMFDPNXFCTIPXDBTFUXJUUFS
:PV5VCF ϖʔδΛ։͍ͯ ແͯ͘σεΫτοϓ ௨͕͘Δ 20
͜ΕΒ48Λϕʔεʹ ࣮ݱ͍ͯ͠Δ 21
48ͱ ͦΕΛͬͯͰ͖Δ͜ͱ 22
4FSWJDF8PSLFSͱ 8FCϖʔδͷϥΠϑλΠϜΛ͑ͯ αʔϏε FH1VTI௨ɺΦϑϥΠϯମݧ ΛఏڙͰ͖Δͷ 8FCϖʔδ 48 +4 )5.-
$44 8FCϖʔδͱผʹϒϥβͷόοΫάϥϯυͰಈ࡞͢Δ+4ͷ࣮ߦڥ Ͱϖʔδ͔ΒͷωοτϫʔΫϦΫΤετʹհೖͰ͖Δ 23
4FSWJDF8PSLFS ʓʓ w 4FSWJDF8PSLFS͚ͩͰϓογϡ௨ΦϑϥΠϯମݧͳͲ ͕ఏڙͰ͖ΔΘ͚Ͱͳ͍ w ΦϑϥΠϯମݧ w $BDIF"1* 48
w ϓογϡ௨ w 1VTI"1* 48 ϙΠϯτɺ48ϖʔδ ͱผͰϒϥβͷόοΫάϥϯ υͰಈ࡞ͯ͠ɺϖʔδͷϦΫΤετ ΛϑοΫͰ͖Δ 24
2020/09/26 ֤ϒϥβͷαϙʔτঢ়گ 25
Ͱ͖Δ͜ͱ ᶃ8FCϖʔδ͔ΒαʔόʔͷϦΫΤετΛϑοΫͰ͖Δ ˠΩϟογϡͷ׆༻ ΦϑϥΠϯମݧɺදࣔͷߴԽ ᶄ8FCϖʔδΛ։͍ͯແͯ͘ɺಛఆͷॲཧΛߦ͑Δ ˠϓογϡ௨ ᶅ48ΛΠϯετʔϧͯ͠ɺ8FCΞϓϦΛ18"ͱͯ͠Πϯετʔϧ ˠ"EEUP)PNF4DSFFO ")4
ChromeɾEdge Firefox Safari Firefox Safari Firefox ChromeɾEdge ChromeɾEdge 26
ᶃ8FCϖʔδ͔ΒαʔόʔͷϦΫΤ ετΛϑοΫͰ͖ΔˠΦϑϥΠϯମݧ 8FCϖʔδ αʔόʔ JOEFYIUNM͍ͩ͘͞ ʹΞΫηε 4FSWJDF8PSLFS ࣄલʹϦιʔεΛ Ωϟογϡ͓͍͔ͯͨ͠Βɺ ΦϑϥΠϯͰϦιʔεΛ
ฦͤΔͶ $BDIF 27
ᶃ8FCϖʔδ͔ΒαʔόʔͷϦΫΤ ετΛϑοΫͰ͖ΔˠදࣔͷߴԽ ᶃΩϟογϡϑΝʔετ ᶃωοτϫʔΫϑΝʔετ ଞʹ͍͔ͭ͘ Ωϟογϡઓུ͕͋Δ 28
͋·Γසൟʹ༰͕ߋ৽͞Εͳ͍ Ϧιʔεσʔλ Ωϟογϡ͔Βฦͤྑ͍Ͷʂ 29
ᶃΩϟογϡϑΝʔετ 8FCϖʔδ αʔόʔ JOEFYIUNM͍ͩ͘͞ ʹΞΫηε 4FSWJDF8PSLFS Cache͋Δ͔ΒɺCache͔Βฦ͢Ͷ $BDIF 30
ɹᶃΩϟογϡϑΝʔετ 8FCϖʔδ αʔόʔ JOEFYIUNM͍ͩ͘͞ ʹΞΫηε 4FSWJDF8PSLFS Cacheແ͍ͳΒαʔόʔʹϦΫΤε τ͢ΔΑ $BDIF 'FUDI"1*
JOEFYIUNM 31
සൟʹ༰͕ߋ৽͞Εͦ͏ͳใʁ 32
ᶃωοτϫʔΫϑΝʔετ 8FCϖʔδ αʔόʔ GPPIUNM͍ͩ͘͞ GPPʹΞΫηε 4FSWJDF8PSLFS ·ͣαʔόʔʹ ϦΫΤετ͢ΔΑ 'FUDI"1* GPPIUNM
$BDIF 33
ɹᶃωοτϫʔΫϑΝʔετ 8FCϖʔδ αʔόʔ GPPIUNM͍ͩ͘͞ GPPʹΞΫηε 4FSWJDF8PSLFS OfflineͳΒCache͔Βฦ͢Α $BDIF 34
ᶄ8FCϖʔδΛ։͍ͯແͯ͘ɺ ಛఆͷॲཧΛߦ͑Δˠϓογϡ௨ 8FCϖʔδ αʔόʔ 4FSWJDF8PSLFS 1VTI4FSWJDF 35
ᶄ8FCϖʔδΛ։͍ͯແͯ͘ɺ ಛఆͷॲཧΛߦ͑Δˠϓογϡ௨ 8FCϖʔδ αʔόʔ 4FSWJDF8PSLFS 1VTI4FSWJDF 36 ϖʔδΛ։͍ͯແͯ͘ ɺ1VTI4FSWJDF͔Β ͷ௨Λड͚औΕΔΑ
ᶄ8FCϖʔδΛ։͍ͯແͯ͘ɺ ಛఆͷॲཧΛߦ͑Δˠϓογϡ௨ 8FCϖʔδ αʔόʔ 4FSWJDF8PSLFS 1VTI4FSWJDF 37 '$. 'JSFCBTF$MPVE.FTTBHJOH '$.Λ͏ͷ͕Ұൠత
ϖΠϩʔυͷ҉߸ԽͳͲ໘ͳ ॲཧΛͤΕΔ
ᶅ48ΛΠϯετʔϧͯ͠ 8FCΞϓϦΛ18"ͱͯ͠Πϯετʔϧ ˠ"EEUP)PNF4DSFO ")4 38
39 ᶅ48ΛΠϯετʔϧͯ͠ 8FCΞϓϦΛ18"ͱͯ͠Πϯετʔϧ ˠ"EEUP)PNF4DSFO ")4
40 ᶅ48ΛΠϯετʔϧͯ͠ 8FCΞϓϦΛ18"ͱͯ͠Πϯετʔϧ ˠ"EEUP)PNF4DSFO ")4
18" 41
18"ͱʁ w 1SPHSFTTJWF8FC"QQT w ৽͍͠"1*ͱϓϩάϨογϒͳ֦ுઓུΛ༻ͯ͠ɺΫϩεϓϥοτ ϑΥʔϜͳΣϒΞϓϦ w 8FCΞϓϦͰωΠςΟϒΞϓϦͷΑ͏ͳϢʔβʔମݧΛఏڙ͢Δ 3FMJBCMF *OUFHSBUFE
'BTU &OHBHJOH w ϞόΠϧˠϞόΠϧΞϓϦ w 1$ˠσεΫτοϓΞϓϦ 42
18"ͱʁ w ϞόΠϧΣϒʹ͓͚ΔϢʔβʔମݧͷ্ w 'BTU ߴ ΣϒΞϓϦͷίϯςϯπΛߴʹఏڙ͢Δ w *OUFHSBUFE ౷߹
σόΠε04ʹ߹Θͤͨମݧ w 3FMJBCMF ৴པ ͳωοτϫʔΫΦϑϥΠϯͰར༻Մೳ w &OHBHJOH Τϯήʔδ ʹΠϯετʔϧՄೳɺϓογϡ௨ 43
18"ͷಋೖࣄྫ w 466.0 w ಡΈࠐΈ࣌ؒΛॖɺϓογϡ௨ͷ։෧ IUUQTEFWFMPQFSTHPPHMFDPNXFCTIPXDBTFTVVNP w 5XJUUFS w
πΠʔτ૿Ճɺؼݮগ IUUQTEFWFMPQFSTHPPHMFDPNXFCTIPXDBTFUXJUUFS w ܦ w ίϯόʔδϣϯ ձһొ ૿ՃɺͷΞΫςΟϒϢʔβʔ૿Ճ IUUQTEFWFMPQFSTHPPHMFDPNXFCTIPXDBTFOJLLFJ 44
18"ͷ࡞Γํ 8FCΞϓϦΛ࡞Δ 4FSWJDF8PSLFSΛΠϯετʔϧ͢Δ NBOJGFTUKTPOΛ࡞ͯ͠MJOLλάͰಡΈࠐ· ͤΔ 45
18"Ͱͷମݧ w 48Λج൫ʹͨ͠8FCͷٕज़ͱΈ߹ΘͤΔ͜ͱͰɺωΠςΟ ϒΞϓϦͷΑ͏ͳମݧΛఏڙՄೳ w ϓογϡ௨ w ϗʔϜը໘ͷΠϯετʔϧ w ΦϑϥΠϯͰͷӾཡ
w ωΠςΟϒΞϓϦͷΑ͏ͳߴͳදࣔ 46
18"ͷϝϦοτɾσϝϦοτ w ϝϦοτ w 8FCʹՃͰ͔͔ΔωΠςΟϒΞϓϦ։ൃίετ͕͍ w ωΠςΟϒετΞ͔ΒͷΠϯετʔϧ͕ෆཁ w ετΞͷ৹͕ࠪෆཁϢʔβʔ͕Ξοϓσʔτ͢ΔλΠϛϯάΛؾʹ͠ͳͯ͘ྑ͍
w σϝϦοτ w ΞϓϦετΞܦ༝Ͱͷू٬͕Ͱ͖ͳ͍ 58" w J04ͰҰ෦ػೳ੍͕ݶ͞ΕΔ w ωΠςΟϒͷମݧʹྼΔ෦ͪΖΜ͋Γͦ͏ ैདྷͷ8FCͷ Ԇઢ্Ͱগͣͭ͠Ճ͍͚ͯ͠Δ 47
18" 8FCͰྑ͍ମݧΛఏڙ͍ͯ͜͠͏ɻ 48
ͦͷଞ࠷ۙͷಈ 49
ݱঢ়ͱࠓޙͷมԽ 8FCΞϓϦ 4FSWJDF8PSFLS ৽͍͠ "1* ৽͍͠ "1* ৽͍͠ "1* 48্Ͱ࣮ݱͰ͖Δ
"1*͕૿͍͑ͯ͘ ؆୯ʹ͔͚Δ Α͏ʹ ϕʔεʹͳΔ ߟٕ͑ज़ ग़དྷ্͕ͬͯͦ͏ 50
؆୯ʹ͔͚ΔΑ͏ʹ w 8PSLCPY w IUUQTEFWFMPQFSTHPPHMFDPNXFCUPPMTXPSLCPY w 4FSWJDF8PSLFSʹؔ࿈͢Δɺ༷ʑͳॲཧΛ ؆୯ʹ࣮Ͱ͖ΔϥΠϒϥϦ w ๛ͳ1MVHJO͕༻ҙ͞Ε͍ͯΔ
51
48Ͱ#BDLHSPVOEॲཧ w #BDLHSPVOE'FUDI w όοΫάϥϯυͰσʔλΛऔಘͰ͖Δ w #BDLHSPVOE4ZOD w ΦϑϥΠϯ࣌ʹࣦഊͨ͠ϦΫΤετΛ෮ؼ࣌ʹ࠶࣮ߦͰ͖Δ w
1FSJPEJD#BDLHSPVOE4ZOD w όοΫάϥϯυͰλεΫΛఆظ࣮ߦͰ͖Δ 52
༷ʑͳϓϥοτϑΥʔϜͰ18" w σεΫτοϓ18" $ISPNF04 8JOEPXT -JOVY NBD04 w 8JOEPXTͰͷ18"
w IUUQTXXXTMJEFTIBSFOFUPTBNVNQXBPOXJOEPXT w 5SVTUFE8FC"DUJWJUZ 58" w ಛఆͷ݅1MBZετΞͷϙϦγʔʹै͏͜ͱͰ18"͔Β"1,Λ࡞ ͯ͠(PPHMF1MBZʹొՄೳ w CVCCMFXSBQͱ͍͏$-*πʔϧ༻ҙ͞Ε͍ͯΔ 53
8FCͷ৽͍͠"1*ͱΈ߹Θͤͯ ΑΓωΠςΟϒΞϓϦͷΑ͏ͳମݧ w 8FC4IBSF8FC4IBSF5BSHFU w 4.4 $POUBDU1JDLFS /BUJWF'JMF4ZTUFN w 4IPSUDVUT
#BEHJOH w &UDʜ 54
J04Ͱͷ18" w J04 w ")4͕ར༻Մೳʹ w 4FSWJDF8PSLFS͕ΠϯετʔϧͰ͖ΔΑ͏ʹ w 0BVUIͰͷϩάΠϯ࣌ʹ4BGSJ͕ىಈ18"͔Β ೝূใʹΞΫηεͰ͖ͳ͍
w J04 w 0BVUIϩάΠϯ࣌ʹ18"Οϯυ͕ ্ཱ͕ͪΔೝূใ͕͑Δ J04Ͱ18" ˞ 48ͷ1VTI"1* ͑ͳ͍ 55
·ͱΊ w 4FSWJDF8PSLFSͱ w 8FCϖʔδͷϥΠϑλΠϜΛ͑ͯαʔϏεΛఏڙͯ͘͠ΕΔ 8PSLFS w 48Λ͑ w ΦϑϥΠϯମݧϓογϡ௨ɺ18"ͱͯ͠ͷΠϯετʔϧͳ
ͲωΠςΠϒΞϓϦʹ͍ۙ͜ͱΛ8FCΞϓϦͰఏڙͰ͖Δ 56