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
620
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
1.7k
Proxy-Status & Cache-Status
shqld
0
490
High Performance JavaScript / jsconfjp2019
shqld
0
480
FastlyとTypeScriptで実現するカナリアリリース / yamagoya2020
shqld
19
6.9k
Loading Performanceとの向き合い方 / InsideFrontend 2019
shqld
9
2.1k
日経電子版とPWAのこれから / PWANight vol.2
shqld
2
4.6k
日経電子版のマイクロフロントエンドとPWA / devsum2019
shqld
8
12k
Other Decks in Technology
See All in Technology
サーバレスでモバイルアプリ開発! NTTコム「ビジネスdアプリ」のアーキテクチャ / The architecture of business d app
nttcom
12
220
Javaにおける関数型プログラミンへの取り組み
skrb
7
300
AWS SAW を広めたい @四国クラウドお遍路
kazzpapa3
0
220
LLVM/ASMを使った有限体の高速実装
herumi
0
110
社内の学びの場・コミュニティ形成とエンジニア同士のリレーションシップ構築/devreljapan2024
nishiuma
3
160
エンジニア向け会社紹介資料
caddi_eng
15
250k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
0
3.2k
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
6
600
疎通2024
sadnessojisan
5
1k
四国クラウドお遍路 2024 in 高知 エンディング
yukataoka
0
180
標準ライブラリの奥深アップデートを掘り下げよう!
logica0419
2
450
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
290
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
88
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
1.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
34
1.7k
Scaling GitHub
holman
458
140k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
Code Reviewing Like a Champion
maltzj
518
39k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
How to train your dragon (web standard)
notwaldorf
85
5.6k
Bash Introduction
62gerente
608
210k
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 ·ͱΊ
͋Γ͕ͱ͏͍͟͝·ͨ͠