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-...
Search
Toshihisa Tomatsu
September 26, 2020
Technology
3
1.9k
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
3.2k
Service Workerとブラウザでの通知について
10shi10ma
3
310
意外に知らないnpmと便利なCLI
10shi10ma
8
2.3k
歴史から学ぶ現代のフロントエンド
10shi10ma
17
11k
サイボウズ フロントエンドエキスパートチームとOSSの管理について
10shi10ma
0
1.1k
大規模フロントエンドの技術的負債と向き合う。
10shi10ma
5
5.8k
Google I/O ’19から見る新しいJavaScript
10shi10ma
5
3k
React+Storybook ことはじめ
10shi10ma
8
2.5k
TypeScript入門 〜型のあるモダンなJavaScript〜
10shi10ma
2
740
Other Decks in Technology
See All in Technology
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
Claude Code に プロジェクト管理やらせたみた
unson
6
3.9k
怖くない!はじめてのClaude Code
shinya337
0
390
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
680
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
130
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
160
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
ゼロからはじめる採用広報
yutadayo
3
910
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
440
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Thoughts on Productivity
jonyablonski
69
4.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Side Projects
sachag
455
42k
How to Ace a Technical Interview
jacobian
278
23k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
A better future with KSS
kneath
238
17k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Facilitating Awesome Meetings
lara
54
6.4k
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