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
320
意外に知らない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
750
Other Decks in Technology
See All in Technology
多様なニーズに応える Movable Type ラインナップ 全紹介
masakah
0
130
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
130
Rubyの国のPerlMonger
anatofuz
3
720
LTに影響を受けてテンプレリポジトリを作った話
hol1kgmg
0
250
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
320
dipにおけるSRE変革の軌跡
dip_tech
PRO
1
220
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
0
220
帳票構造化タスクにおけるLLMファインチューニングの性能評価
yosukeyoshida
1
230
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
yokawasa
5
1.6k
【2025 Japan AWS Jr. Champions Ignition】点から線、線から面へ〜僕たちが起こすコラボレーション・ムーブメント〜
amixedcolor
1
120
恐怖!テストコードなき夜
tsukuboshi
2
110
AIエージェントを現場で使う / 2025.08.07 著者陣に聞く!現場で活用するためのAIエージェント実践入門(Findyランチセッション)
smiyawaki0820
5
360
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
We Have a Design System, Now What?
morganepeng
53
7.7k
Designing Experiences People Love
moore
142
24k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Code Review Best Practice
trishagee
69
19k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Navigating Team Friction
lara
188
15k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
BBQ
matthewcrist
89
9.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
4 Signs Your Business is Dying
shpigford
184
22k
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