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
570
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
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
750
形式手法特論:位相空間としての並行プログラミング #kernelvm / Kernel VM Study Tokyo 18th
ytaka23
3
1.4k
アカデミーキャンプ 2025 SuuuuuuMMeR「燃えろ!!ロボコン」 / Academy Camp 2025 SuuuuuuMMeR "Burn the Spirit, Robocon!!" DAY 1
ks91
PRO
0
150
[OCI Technical Deep Dive] OCIで生成AIを活用するためのソリューション解説(2025年8月5日開催)
oracle4engineer
PRO
0
110
GISエンジニアよ 現場に行け!
sudataka
1
130
React Server ComponentsでAPI不要の開発体験
polidog
PRO
0
330
Foundation Model × VisionKit で実現するローカル OCR
sansantech
PRO
1
400
AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか?
cap120
1
680
文字列の並び順 / String Collation
tmtms
1
100
ファッションコーディネートアプリ「WEAR」における、Vertex AI Vector Searchを利用したレコメンド機能の開発・運用で得られたノウハウの紹介
zozotech
PRO
0
500
事業特性から逆算したインフラ設計
upsider_tech
0
150
夏休みWebアプリパフォーマンス相談室/web-app-performance-on-radio
hachi_eiji
0
250
Featured
See All Featured
Making Projects Easy
brettharned
117
6.3k
How to train your dragon (web standard)
notwaldorf
96
6.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Rails Girls Zürich Keynote
gr2m
95
14k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Measuring & Analyzing Core Web Vitals
bluesmoon
8
550
Being A Developer After 40
akosma
90
590k
Why Our Code Smells
bkeepers
PRO
338
57k
Facilitating Awesome Meetings
lara
54
6.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
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 ·ͱΊ
͋Γ͕ͱ͏͍͟͝·ͨ͠