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
ServiceWorkerの開発 / ServiceWorker Development
Search
Sho Miyamoto
June 01, 2019
Technology
2
720
ServiceWorkerの開発 / ServiceWorker Development
2019年にお話させていただいたServiceWorkerの開発に関する発表の資料です。部分的に(あるいは全体的に)情報が古くなっている可能性がありますのでご了承ください。
Sho Miyamoto
June 01, 2019
Tweet
Share
More Decks by Sho Miyamoto
See All by Sho Miyamoto
JavaScriptエンジンから見るランタイム / 2024-04-25
shqld
12
2.1k
Proxy-Status & Cache-Status
shqld
0
580
High Performance JavaScript / jsconfjp2019
shqld
0
560
FastlyとTypeScriptで実現するカナリアリリース / yamagoya2020
shqld
19
7.2k
Loading Performanceとの向き合い方 / InsideFrontend 2019
shqld
8
2.3k
日経電子版とPWAのこれから / PWANight vol.2
shqld
2
4.9k
日経電子版のマイクロフロントエンドとPWA / devsum2019
shqld
7
12k
Other Decks in Technology
See All in Technology
生成AI導入の効果を最大化する データ活用戦略
ham0215
0
110
LIFF CLIとngrokを使ったLIFF/LINEミニアプリのお手軽実機確認
diggymo
0
230
AI コードレビューが面倒すぎるのでテスト駆動開発で解決しようとして読んだら、根本的に俺の勘違いだった
mutsumix
0
160
LLMをツールからプラットフォームへ〜Ai Workforceの戦略〜 #BetAIDay
layerx
PRO
1
840
2025新卒研修・HTML/CSS #弁護士ドットコム
bengo4com
3
13k
AIエージェントを現場で使う / 2025.08.07 著者陣に聞く!現場で活用するためのAIエージェント実践入門(Findyランチセッション)
smiyawaki0820
6
540
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする~遊びやすさと競技性の両立~
cygames
PRO
1
290
20250807_Kiroと私の反省会
riz3f7
0
130
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
4
1.5k
データ基盤の管理者からGoogle Cloud全体の管理者になっていた話
zozotech
PRO
0
330
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
0
270
Oracle Cloud Infrastructure:2025年7月度サービス・アップデート
oracle4engineer
PRO
1
110
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
Practical Orchestrator
shlominoach
190
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
BBQ
matthewcrist
89
9.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
870
The World Runs on Bad Software
bkeepers
PRO
70
11k
Fireside Chat
paigeccino
37
3.6k
Navigating Team Friction
lara
188
15k
Designing for humans not robots
tammielis
253
25k
We Have a Design System, Now What?
morganepeng
53
7.7k
Transcript
ServiceWorkerͷ ڍಈͱ։ൃ ٶຊ ক (@shqld)
- ٶຊ ক (Sho Miyamoto) - @shqld (Github) - @webseals
(Twitter) - Edge / Server / Client - Իָ - τϥϯϖοτ(JazzFunkܥʣɺϐΞϊ - ౦ೆΞδΞʹॅΈ͍ͨ ͩΕʁ
✘ PWA ✘ جຊతͳ࣮ํ๏ ✔ ServiceWorkerͷڍಈ ͢͜ͱ
ServiceWorker
https://developers.google.com/web/ fundamentals/primers/service-workers/
https://developers.google.com/web/fundamentals/primers/service-workers/
- PWAͷத֩ - ϩʔΧϧͷωοτϫʔΫϓϩΩγ - ϖʔδWindowɺφϏήʔγϣϯͱಠཱ όοΫάϥϯυͰಈ͘ SWͱ
- ΫϥΠΞϯτ͔ΒͷϦΫΤετͷδϟοΫ - ΫϥΠΞϯτͱͷϝοηʔδͷૹड৴ - ΩϟογϡͷอଘɾಡΈग़͠ - ΦϑϥΠϯ࣌ͷॲཧͷԆ SWͱ SW͕
Ͱ͖Δ͜ͱ
WebWorkerͷαϒηοτ ϥΠϑαΠΫϧ͕͋Δ SWͱ ಛ
WebWorker͕Ͱ͖Δ͜ͱશͯͰ͖Δ ServiceWorkerGlobalScope WorkerGlobalScopeΛܧঝ͍ͯ͠Δ - DOM͕ͳ͍ - postMessageͰ௨৴ - ผεϨουͰಈ͘ WebWorker
ͷαϒηοτ
SWʹϥΠϑαΠΫϧ͕ଘࡏ͢Δ ϥΠϑαΠΫϧ
ϥΠϑαΠΫϧ https://bitsofco.de/content/images/2016/07/Lifecycle-3.png
ϥΠϑαΠΫϧ https://bitsofco.de/content/images/2016/07/Lifecycle-3.png ঢ়ଶ ݹ͍worker͕ શͯऴΘΔ·Ͱ͍ͬͯΔ ్தͰࣦഊ / ৽͍͠SWʹஔ͖ΘΔલ SWεΫϦϓτͷ ύʔε͕ऴΘ͚ͬͨͩ
ϦΫΤετΛ δϟοΫͰ͖Δ
SW͕ൃՐ͢ΔΠϕϯτʹ2छྨ͋Δ - Lifecycle Events - oninstall - onactivate - Functional
Events - onfetch - onmessage - …etc. ϥΠϑαΠΫϧ Πϕϯτ
ϥΠϑαΠΫϧ https://bitsofco.de/content/images/2016/07/Lifecycle-3.png ϥΠϑαΠΫϧ Πϕϯτ oninstall onactive
ϥΠϑαΠΫϧ oninstall https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle
- installingޙ - SWͷૢ࡞͕ՄೳʹͳΔ - ੩తϦιʔεͷΩϟογϡ - skipWaiting - ݹ͍workeractive
ϥΠϑαΠΫϧ oninstall
⾠ ݹ͍workerͱίϯϑϦΫτ͢Δૢ࡞ߦΘ ͳ͍ - Ωϟογϡͷআ ϥΠϑαΠΫϧ oninstall
oninstallͷޙɺݹ͍worker͕activeͰͳ͘ͳΔ λΠϛϯάʢ= ݹ͍ϖʔδ͕શͯด͡ΒΕ Δʣ·Ͱɺ৽͘͠Πϯετʔϧ͞ΕͨworkerΛ activate͠ͳ͍ oninstallதʹݺͿͱɺ͜ͷڍಈΛճආͰ͖Δ ϥΠϑαΠΫϧ skipWaiting()
⾠ ಉ͡ϖʔδͰҟͳΔεΫϦϓτ͕ಈ͘͜ ͱʹͳΔ e.g. 1. ϦιʔεA: old worker 2. ϦιʔεB:
new worker ϥΠϑαΠΫϧ skipWaiting()
ϥΠϑαΠΫϧ onactivate https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle
activatingޙ ݹ͍worker͏ଘࡏ͠ͳ͍ͷͰɺoninstallͰ Ͱ͖ͳ͔ͬͨ͜ͱ͕Ͱ͖Δ σʔλϕʔεͷҠߦΩϟογϡͷফڈ ϥΠϑαΠΫϧ onactivate
࣮ࡍʹworker͕activated(= Functional Events͕ ड͚औΕΔ)ʹͳΔͷ࣍ͷφϏήʔγϣϯ͔ Β onactivateதʹݺͿͱɺଈ࠲ʹactivatedঢ়ଶʹ ભҠͰ͖Δ ϥΠϑαΠΫϧ clients.claim()
ಉҰφϏήʔγϣϯͰ్த͔ΒSW͕ϑΣο νΛδϟοΫ͢Δ͜ͱʹͳΔ ⾠ جຊతʹඞཁͳ͍ ⾠ SWͷδϟοΫʹґଘ͢Δͷͦͦྑ ͘ͳ͍ʢSW͕ଘࡏ͠ͳ͍ঢ়گͰରԠͰ͖ͳ͘ ͳΔʣ ϥΠϑαΠΫϧ clients.claim()
ϥΠϑαΠΫϧ https://bitsofco.de/content/images/2016/07/Lifecycle-3.png ϥΠϑαΠΫϧ ·ͱΊ ݹ͍worker͕ શͯऴΘΔ·Ͱ͍ͬͯΔ ్தͰࣦഊ / ৽͍͠SWʹஔ͖ΘΔલ SWεΫϦϓτͷ
ύʔε͕ऴΘ͚ͬͨͩ ϦΫΤετΛ δϟοΫͰ͖Δ `oninstall` `onactive`
ίϯτϩʔϧ = ͋Δworker͕Functional Events ΛϋϯυϧͰ͖Δ ⾠ activeͳworker !== controller ϒϥβʹΠϯετʔϧ͞ΕΔSWෳ͋Δ
- ผυϝΠϯ - ಉҰυϝΠϯ - ผείʔϓ - ಉҰείʔϓ શ͕ͯউखʹಈ͍͍ͯͨΒࠔΔ ίϯτϩʔϧ
ࠓͦͷϖʔδΛίϯτϩʔϧ͍ͯ͠Δworker `navigator.serviceWorker.controller` ίϯτϩʔϧ ίϯτϩʔϥ
ίϯτϩʔϧ ίϯτϩʔϥ ͷܾఆ Worker Worker Worker1 Worker2 their.com/ my.com/ my.com/sub/
my.com/sub/ Page my.com/sub/index.html
ίϯτϩʔϧ ίϯτϩʔϥ ͷܾఆ Worker Worker Worker1 Worker2 their.com/ my.com/ my.com/sub/
my.com/sub/ Page my.com/sub/index.html
ίϯτϩʔϧ ίϯτϩʔϥ ͷΓସΘΓ WorkerB /b/ PageA /a/index.html WorkerA /a/ PageB
/b/index.html φϏήʔγϣϯϦΫΤετؚΊͯ WorkerB͕ίϯτϩʔϧ
ServiceWorkerʹείʔϓ͕͋Δ είʔϓ = SWͷίϯτϩʔϧରൣғ σϑΥϧτSWεΫϦϓτͷύεҎԼ είʔϓ
serviceWorker.registerͷΦϓγϣϯͰࢦఆͰ͖ Δ ͨͩ͠ࢦఆͰ͖Δείʔϓʹ༏ઌͷҧ͏ ෳͷ੍ݶ͕͋Δ είʔϓ είʔϓΛ ࢦఆ͢Δ
είʔϓ είʔϓΛ ࢦఆ͢Δ Script Path navgator.serviceWorker .register({ scope }) e.g.
/sw.js e.g. /, /any/
είʔϓ είʔϓΛ ࢦఆ͢Δ Script Path navgator.serviceWorker .register({ scope }) e.g.
/static/sw.js e.g. /static/, /static/any/
είʔϓ είʔϓΛ ࢦఆ͢Δ Script Path navgator.serviceWorker .register({ scope }) e.g.
/static/sw.js `Service-Worker-Allowed` e.g. / e.g. /, /any/
⾠ δϟοΫͰ͖Δରͱແؔ ⾠ `/sub/` ͱ͍͏ࢦఆͳͷͰɺe.g. `/sub`ͷΑ͏ ͳϦιʔεείʔϓ֎ͱͳΔ είʔϓ
SWࣗମવΩϟογϡ͞ΕΔ Ωϟογϡઓུಛघ τοϓϨϕϧεΫϦϓτͱΠϯϙʔτ͞ΕΔ εΫϦϓτͰڍಈ͕ҟͳΔ SWࣗମͷ Ωϟογϡ
جຊతʹ: ͲΜͳʹͯ͘24࣌ؒޙʹඞͣωοτ ϫʔΫ͔ΒऔΓʹ͍͘ SWࣗମͷΩϟογϡ 24࣌ؒ
navigator.serviceWorker.register()ͷҾΦϓγϣϯ `imports`: - τοϓϨϕϧ: 24࣌ؒ - Πϯϙʔτ: HTTP Ωϟογϡ༏ઌ `all`:
- τοϓϨϕϧ: HTTP Ωϟογϡ༏ઌ - Πϯϙʔτ: HTTP Ωϟογϡ༏ઌ `none`: - τοϓϨϕϧ: 24࣌ؒ - Πϯϙʔτ: 24࣌ؒ SWࣗମͷΩϟογϡ updateViaCache cf. https://developers.google.com/web/updates/2018/06/fresher-sw
αʔϏεϫʔΧʔͷىಈதʹϦΫΤετ͕ ͬͨͱ͖ɺʢΩϟογϡͰࡹ͚ͳ͚Εʣ ϦΫΤετ͕Ԇͯ͠͠·͏ Navigation Preload
NavigationPreload Navigation Preload Page Server
NavigationPreload Navigation Preload Page Server Worker
NavigationPreload Navigation Preload Page Server Worker Worker ~500ms
SWͷىಈͱฒߦͯ͠ϦΫΤετ ϨεϙϯεSWͰऔಘͰ͖Δ NavigationPreload Navigation Preload
NavigationPreload Navigation Preload Page Server Worker Worker ~500ms
NavigationPreload Navigation Preload
NavigationPreload Navigation Preload
Runtime Cache Pre-cache Ωϟογϯά ͷछྨ
Runtime Cache: ফۃతΩϟογϡ Pre-cache: ੵۃతΩϟογϡ Ωϟογϯά ͷछྨ
Ωϟογϯάͷछྨ Runtime Cache Page Server Worker Cache ϑΣον Ωϟογϡ ϦΫΤετ
Ϩεϙϯε
ϥϯλΠϜʢϦΫΤετͷδϟοΫ࣌ʣʹߦ ͏Ωϟογϡ `onfetch`ΠϕϯτͷதͰॲཧ͞ΕΔ ύε֦ுࢠʹΑͬͯΩϟογϡઓུ͕͔ ΕΔ Ωϟογϯάͷछྨ Runtime Cache
Ωϟογϯάͷछྨ Pre-cache Server Worker Cache Ωϟογϡ ϦΫΤετ Ϩεϙϯε
Ωϟογϯάͷछྨ Pre-cache Page Server Worker Cache postMessage Ωϟογϡ ϦΫΤετ Ϩεϙϯε
ϦΫΤετ͔Βಠཱͨ͠Ωϟογϡ ੩తϦιʔεΛ࠷ॳʹΩϟογϡ ಈతʹΩϟογϡ e.g. postMessage… Ωϟογϯάͷछྨ Pre-cache
࣮ࡍͷ։ൃʹ͓͍ͯɺύϑΥʔϚϯε্ʹ ͱͯॏཁ e.g. - ੩తϦιʔε(js, css, …etc.)Λ࠷ॳʹ - ϖʔδͷϦϯΫઌΛػతʹ -
HTTPͷ`Link`ϔομʹࡌ͍ͬͯΔαϒϦ ιʔεҰॹʹ Ωϟογϯάͷछྨ Pre-cache
- Offline mode - Update on reload - Bypass for
network - Preserve log - Switching frames - Hard reload ։ൃ࣌ͷTips
- Wi-FiΛΒͳͯ͘ΦϑϥΠϯΛΤϛϡϨʔτͰ͖Δ - 3GͳͲɺճઢͷ͞ௐઅͰ͖Δ - ApplicationλϒʹεΠον͕͋Δ ։ൃ࣌ͷTips Offline Mode
- Ϧϩʔυ࣌ʹຖճSWͷߋ৽Λڧ੍Ͱ͖Δ - εΫϦϓτΛ͍ͬͨ࣌͡oninstall/onactivateΠϕϯτͷڍಈΛݟͨ ͍࣌ʹ͏ - ʢSWͷߋ৽ʹ͍͔ʹ͕͔͔࣌ؒΔ͔͔Δʣ ։ൃ࣌ͷTips Update on
reload
- શͯͷϦΫΤετ͕SWΛܦ༝͠ͳ͘ͳΔ - SWͷ։ൃ࣌Ҏ֎ɺجຊతʹ͜ΕΛΦϯʹ͢Δ ։ൃ࣌ͷTips Bypass for network
- ϖʔδΛભҠͯ͠ϩά͕Γଓ͚Δ - Ϧϩʔυͯ͠SWΛߋ৽͢Δͱ͖ϩά͕ফ͑ͯ͠·͏ - ͪͳΈʹSWͷϩάʹPrefixΛ͚͓ͯ͘ͱɺSWͷϩά͚ͩΛϑΟ ϧλʔͰ͖Δ ։ൃ࣌ͷTips Preserve log
- ϖʔδʹଐ͢ΔϑϨʔϜΛΓସ͑ΒΕΔ - e.g. SW, WebWorker, iframe, …etc. - ࣮ࡍʹίϯιʔϧͰมΛࢀরͰ͖Δ
։ൃ࣌ͷTips Switching frames
- Hard reload (Cmd+Shift+R) - ͦͷNavigationͰߦΘΕΔશͯͷϦΫΤετ͕SWΛܦ༝͠ͳ͘ͳΔ - ٯʹීஈͷΫηͰHard Reload͢Δਓҙ ։ൃ࣌ͷTips
Hard reload
- Google WebFundamentals - ϥΠϑαΠΫϧ - Workerͷίϯτϩʔϧݖ - είʔϓ -
SWࣗମͷΩϟογϡ - NavigationPreload - Ωϟογϯάͷछྨ - ։ൃ࣌ͷTips ·ͱΊ
͋Γ͕ͱ͏͍͟͝·ͨ͠