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
730
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
590
High Performance JavaScript / jsconfjp2019
shqld
0
580
FastlyとTypeScriptで実現するカナリアリリース / yamagoya2020
shqld
20
7.3k
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
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
150
stupid jj tricks
indirect
0
8k
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
1
880
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
420
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
0
140
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
AWSにおけるTrend Vision Oneの効果について
shimak
0
130
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
910
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
180
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.5k
いまさら聞けない ABテスト入門
skmr2348
1
200
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
1
330
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Agile that works and the tools we love
rasmusluckow
331
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
A designer walks into a library…
pauljervisheath
209
24k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Rails Girls Zürich Keynote
gr2m
95
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
A better future with KSS
kneath
239
17k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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 ·ͱΊ
͋Γ͕ͱ͏͍͟͝·ͨ͠