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
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
250
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
怖くない!はじめてのClaude Code
shinya337
0
400
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.6k
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
130
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
340
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
470
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
For a Future-Friendly Web
brad_frost
179
9.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Optimizing for Happiness
mojombo
379
70k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Why Our Code Smells
bkeepers
PRO
336
57k
The Invisible Side of Design
smashingmag
301
51k
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