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
690
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
2k
Proxy-Status & Cache-Status
shqld
0
560
High Performance JavaScript / jsconfjp2019
shqld
0
540
FastlyとTypeScriptで実現するカナリアリリース / yamagoya2020
shqld
19
7.2k
Loading Performanceとの向き合い方 / InsideFrontend 2019
shqld
8
2.2k
日経電子版とPWAのこれから / PWANight vol.2
shqld
2
4.8k
日経電子版のマイクロフロントエンドとPWA / devsum2019
shqld
7
12k
Other Decks in Technology
See All in Technology
LINE 購物幕後推手
line_developers_tw
PRO
0
310
SREからゼロイチプロダクト開発へ ー越境する打席の立ち方と期待への応え方ー / Product Engineering Night #8
itkq
2
1.1k
QA/SDETの現在と、これからの挑戦
imtnd
0
210
企業が押さえるべきMCPの未来
takaakikakei
0
250
白金鉱業Meetup_Vol.18_生成AIはデータサイエンティストを代替するのか?
brainpadpr
4
220
10分で学ぶ、RAGの仕組みと実践
supermarimobros
0
690
DjangoCon Europe 2025 Keynote - Django for Data Science
wsvincent
0
370
ここはMCPの夜明けまえ
nwiizo
32
13k
GraphQLを活用したリアーキテクチャに対応するSLI/Oの再設計
coconala_engineer
0
190
AIによるコードレビューで開発体験を向上させよう!
moongift
PRO
0
320
バクラクの認証基盤の成長と現在地 / bakuraku-authn-platform
convto
4
880
クラウドネイティブ環境の脅威モデリング
kyohmizu
1
240
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
590
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
Scaling GitHub
holman
459
140k
Code Review Best Practice
trishagee
67
18k
Fireside Chat
paigeccino
37
3.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
4 Signs Your Business is Dying
shpigford
183
22k
Why Our Code Smells
bkeepers
PRO
336
57k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.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 ·ͱΊ
͋Γ͕ͱ͏͍͟͝·ͨ͠