ServiceWorkerの開発 / ServiceWorker Development

2019年にお話させていただいたServiceWorkerの開発に関する発表の資料です。部分的に（あるいは全体的に）情報が古くなっている可能性がありますのでご了承ください。

Transcript

1. ServiceWorkerͷ ڍಈͱ։ൃ ٶຊ ক (@shqld)
2. - ٶຊ ক (Sho Miyamoto) - @shqld (Github) - @webseals (Twitter) - Edge / Server / Client - Իָ - τϥϯϖοτ(JazzFunkܥʣɺϐΞϊ - ౦ೆΞδΞʹॅΈ͍ͨ ͩΕʁ
3. ✘ PWA ✘ جຊతͳ࣮૷ํ๏ ✔ ServiceWorkerͷڍಈ ࿩͢͜ͱ
4. ServiceWorker
5. https://developers.google.com/web/ fundamentals/primers/service-workers/
6. https://developers.google.com/web/fundamentals/primers/service-workers/
7. - PWAͷத֩ - ϩʔΧϧͷωοτϫʔΫϓϩΩγ - ϖʔδ΍WindowɺφϏήʔγϣϯͱ͸ಠཱ όοΫάϥ΢ϯυͰಈ͘ SWͱ͸
8. - ΫϥΠΞϯτ͔ΒͷϦΫΤετͷδϟοΫ - ΫϥΠΞϯτͱͷϝοηʔδͷૹड৴ - ΩϟογϡͷอଘɾಡΈग़͠ - ΦϑϥΠϯ࣌ͷॲཧͷ஗Ԇ SWͱ͸ SW͕ Ͱ͖Δ͜ͱ
9. WebWorkerͷαϒηοτ ϥΠϑαΠΫϧ͕͋Δ SWͱ͸ ಛ௃
10. WebWorker͕Ͱ͖Δ͜ͱ͸શͯͰ͖Δ ServiceWorkerGlobalScope͸ WorkerGlobalScopeΛܧঝ͍ͯ͠Δ - DOM͕ͳ͍ - postMessageͰ௨৴ - ผεϨουͰಈ͘ WebWorker ͷαϒηοτ
11. SWʹ͸ϥΠϑαΠΫϧ͕ଘࡏ͢Δ ϥΠϑαΠΫϧ
12. ϥΠϑαΠΫϧ https://bitsofco.de/content/images/2016/07/Lifecycle-3.png
13. ϥΠϑαΠΫϧ https://bitsofco.de/content/images/2016/07/Lifecycle-3.png ঢ়ଶ ݹ͍worker͕ શͯऴΘΔ·Ͱ଴͍ͬͯΔ ్தͰࣦഊ / ৽͍͠SWʹஔ͖׵ΘΔ௚લ SWεΫϦϓτͷ ύʔε͕ऴΘ͚ͬͨͩ ϦΫΤετΛ δϟοΫͰ͖Δ
14. SW͕ൃՐ͢ΔΠϕϯτʹ͸2छྨ͋Δ - Lifecycle Events - oninstall - onactivate - Functional Events - onfetch - onmessage - …etc. ϥΠϑαΠΫϧ Πϕϯτ
15. ϥΠϑαΠΫϧ https://bitsofco.de/content/images/2016/07/Lifecycle-3.png ϥΠϑαΠΫϧ Πϕϯτ oninstall onactive
16. ϥΠϑαΠΫϧ oninstall https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle
17. - installing௚ޙ - SWͷૢ࡞͕ՄೳʹͳΔ - ੩తϦιʔεͷΩϟογϡ - skipWaiting - ݹ͍worker͸active ϥΠϑαΠΫϧ oninstall
18. ⾠ ݹ͍workerͱίϯϑϦΫτ͢Δૢ࡞͸ߦΘ ͳ͍ - Ωϟογϡͷ࡟আ ϥΠϑαΠΫϧ oninstall
19. oninstallͷޙɺݹ͍worker͕activeͰ͸ͳ͘ͳΔ λΠϛϯάʢ= ݹ͍ϖʔδ͕શͯด͡ΒΕ Δʣ·Ͱɺ৽͘͠Πϯετʔϧ͞ΕͨworkerΛ activate͠ͳ͍ oninstallதʹݺͿͱɺ͜ͷڍಈΛճආͰ͖Δ ϥΠϑαΠΫϧ skipWaiting()
20. ⾠ ಉ͡ϖʔδ಺ͰҟͳΔεΫϦϓτ͕ಈ͘͜ ͱʹͳΔ e.g. 1. ϦιʔεA: old worker 2. ϦιʔεB: new worker ϥΠϑαΠΫϧ skipWaiting()
21. ϥΠϑαΠΫϧ onactivate https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle
22. activating௚ޙ ݹ͍worker͸΋͏ଘࡏ͠ͳ͍ͷͰɺoninstallͰ ͸Ͱ͖ͳ͔ͬͨ͜ͱ͕Ͱ͖Δ σʔλϕʔεͷҠߦ΍Ωϟογϡͷফڈ ϥΠϑαΠΫϧ onactivate
23. ࣮ࡍʹworker͕activated(= Functional Events͕ ड͚औΕΔ)ʹͳΔͷ͸࣍ͷφϏήʔγϣϯ͔ Β onactivateதʹݺͿͱɺଈ࠲ʹactivatedঢ়ଶʹ ભҠͰ͖Δ ϥΠϑαΠΫϧ clients.claim()
24. ಉҰφϏήʔγϣϯ಺Ͱ్த͔ΒSW͕ϑΣο νΛδϟοΫ͢Δ͜ͱʹͳΔ ⾠ جຊతʹ͸ඞཁͳ͍ ⾠ SWͷδϟοΫʹґଘ͢Δͷ͸ͦ΋ͦ΋ྑ ͘ͳ͍ʢSW͕ଘࡏ͠ͳ͍ঢ়گͰରԠͰ͖ͳ͘ ͳΔʣ ϥΠϑαΠΫϧ clients.claim()
25. ϥΠϑαΠΫϧ https://bitsofco.de/content/images/2016/07/Lifecycle-3.png ϥΠϑαΠΫϧ ·ͱΊ ݹ͍worker͕ શͯऴΘΔ·Ͱ଴͍ͬͯΔ ్தͰࣦഊ / ৽͍͠SWʹஔ͖׵ΘΔ௚લ SWεΫϦϓτͷ ύʔε͕ऴΘ͚ͬͨͩ ϦΫΤετΛ δϟοΫͰ͖Δ `oninstall` `onactive`
26. ίϯτϩʔϧ = ͋Δworker͕Functional Events ΛϋϯυϧͰ͖Δ ⾠ activeͳworker !== controller ϒϥ΢βʹΠϯετʔϧ͞ΕΔSW͸ෳ਺͋Δ - ผυϝΠϯ - ಉҰυϝΠϯ - ผείʔϓ - ಉҰείʔϓ શ͕ͯউखʹಈ͍͍ͯͨΒࠔΔ ίϯτϩʔϧ
27. ࠓͦͷϖʔδΛίϯτϩʔϧ͍ͯ͠Δworker `navigator.serviceWorker.controller` ίϯτϩʔϧ ίϯτϩʔϥ
28. ίϯτϩʔϧ ίϯτϩʔϥ ͷܾఆ Worker Worker Worker1 Worker2 their.com/ my.com/ my.com/sub/ my.com/sub/ Page my.com/sub/index.html
29. ίϯτϩʔϧ ίϯτϩʔϥ ͷܾఆ Worker Worker Worker1 Worker2 their.com/ my.com/ my.com/sub/ my.com/sub/ Page my.com/sub/index.html
30. ίϯτϩʔϧ ίϯτϩʔϥ ͷ੾ΓସΘΓ WorkerB /b/ PageA /a/index.html WorkerA /a/ PageB /b/index.html φϏήʔγϣϯϦΫΤετؚΊͯ WorkerB͕ίϯτϩʔϧ
31. ServiceWorkerʹ͸είʔϓ͕͋Δ είʔϓ = SWͷίϯτϩʔϧର৅ൣғ σϑΥϧτ͸SWεΫϦϓτͷύεҎԼ είʔϓ
32. serviceWorker.registerͷΦϓγϣϯͰࢦఆͰ͖ Δ ͨͩ͠ࢦఆͰ͖Δείʔϓʹ͸༏ઌ౓ͷҧ͏ ෳ਺ͷ੍ݶ͕͋Δ είʔϓ είʔϓΛ ࢦఆ͢Δ
33. είʔϓ είʔϓΛ ࢦఆ͢Δ Script Path navgator.serviceWorker .register({ scope }) e.g. /sw.js e.g. /, /any/
34. είʔϓ είʔϓΛ ࢦఆ͢Δ Script Path navgator.serviceWorker .register({ scope }) e.g. /static/sw.js e.g. /static/, /static/any/
35. είʔϓ είʔϓΛ ࢦఆ͢Δ Script Path navgator.serviceWorker .register({ scope }) e.g. /static/sw.js `Service-Worker-Allowed` e.g. / e.g. /, /any/
36. ⾠ δϟοΫͰ͖Δର৅ͱ͸ແؔ܎ ⾠ `/sub/` ͱ͍͏ࢦఆͳͷͰɺe.g. `/sub`ͷΑ͏ ͳϦιʔε͸είʔϓ֎ͱͳΔ είʔϓ
37. SWࣗମ΋౰વΩϟογϡ͞ΕΔ Ωϟογϡઓུ͸ಛघ τοϓϨϕϧεΫϦϓτͱΠϯϙʔτ͞ΕΔ εΫϦϓτͰڍಈ͕ҟͳΔ SWࣗମͷ Ωϟογϡ
38. جຊతʹ͸: ͲΜͳʹ஗ͯ͘΋24࣌ؒޙʹ͸ඞͣωοτ ϫʔΫ͔ΒऔΓʹ͍͘ SWࣗମͷΩϟογϡ 24࣌ؒ
39. 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
40. αʔϏεϫʔΧʔͷىಈதʹϦΫΤετ͕ ૸ͬͨͱ͖ɺʢΩϟογϡͰࡹ͚ͳ͚Ε͹ʣ ϦΫΤετ͕஗Ԇͯ͠͠·͏໰୊ Navigation Preload
41. NavigationPreload Navigation Preload Page Server
42. NavigationPreload Navigation Preload Page Server Worker
43. NavigationPreload Navigation Preload Page Server Worker Worker ~500ms
44. SWͷىಈͱฒߦͯ͠ϦΫΤετ Ϩεϙϯε͸SW಺ͰऔಘͰ͖Δ NavigationPreload Navigation Preload
45. NavigationPreload Navigation Preload Page Server Worker Worker ~500ms
46. NavigationPreload Navigation Preload
47. NavigationPreload Navigation Preload
48. Runtime Cache Pre-cache Ωϟογϯά ͷछྨ
49. Runtime Cache: ফۃతΩϟογϡ Pre-cache: ੵۃతΩϟογϡ Ωϟογϯά ͷछྨ
50. Ωϟογϯάͷछྨ Runtime Cache Page Server Worker Cache ϑΣον Ωϟογϡ ϦΫΤετ Ϩεϙϯε
51. ϥϯλΠϜʢϦΫΤετͷδϟοΫ࣌ʣʹߦ ͏Ωϟογϡ `onfetch`ΠϕϯτͷதͰॲཧ͞ΕΔ ύε΍֦ுࢠʹΑͬͯΩϟογϡઓུ͕෼͔ ΕΔ Ωϟογϯάͷछྨ Runtime Cache
52. Ωϟογϯάͷछྨ Pre-cache Server Worker Cache Ωϟογϡ ϦΫΤετ Ϩεϙϯε
53. Ωϟογϯάͷछྨ Pre-cache Page Server Worker Cache postMessage Ωϟογϡ ϦΫΤετ Ϩεϙϯε
54. ϦΫΤετ͔Β͸ಠཱͨ͠Ωϟογϡ ੩తϦιʔεΛ࠷ॳʹΩϟογϡ ಈతʹΩϟογϡ e.g. postMessage… Ωϟογϯάͷछྨ Pre-cache
55. ࣮ࡍͷ։ൃʹ͓͍ͯɺύϑΥʔϚϯε޲্ʹ ͸ͱͯ΋ॏཁ e.g. - ੩తϦιʔε(js, css, …etc.)Λ࠷ॳʹ - ϖʔδ಺ͷϦϯΫઌΛ౤ػతʹ - HTTPͷ`Link`ϔομʹࡌ͍ͬͯΔαϒϦ ιʔε΋Ұॹʹ Ωϟογϯάͷछྨ Pre-cache
56. - Offline mode - Update on reload - Bypass for network - Preserve log - Switching frames - Hard reload ։ൃ࣌ͷTips
57. - Wi-FiΛ੾Βͳͯ͘΋ΦϑϥΠϯΛΤϛϡϨʔτͰ͖Δ - 3GͳͲɺճઢͷ଎͞΋ௐઅͰ͖Δ - Applicationλϒʹ΋εΠον͕͋Δ ։ൃ࣌ͷTips Offline Mode
58. - Ϧϩʔυ࣌ʹຖճSWͷߋ৽Λڧ੍Ͱ͖Δ - εΫϦϓτΛ͍ͬͨ࣌͡΍oninstall/onactivateΠϕϯτͷڍಈΛݟͨ ͍࣌ʹ࢖͏ - ʢSWͷߋ৽ʹ͍͔ʹ͕͔͔࣌ؒΔ͔෼͔Δʣ ։ൃ࣌ͷTips Update on reload
59. - શͯͷϦΫΤετ͕SWΛܦ༝͠ͳ͘ͳΔ - SWͷ։ൃ࣌Ҏ֎͸ɺجຊతʹ͜ΕΛΦϯʹ͢Δ ։ൃ࣌ͷTips Bypass for network
60. - ϖʔδΛભҠͯ͠΋ϩά͕࢒Γଓ͚Δ - Ϧϩʔυͯ͠SWΛߋ৽͢Δͱ͖͸ϩά͕ফ͑ͯ͠·͏ - ͪͳΈʹSWͷϩάʹPrefixΛ෇͚͓ͯ͘ͱɺSWͷϩά͚ͩΛϑΟ ϧλʔͰ͖Δ ։ൃ࣌ͷTips Preserve log
61. - ϖʔδʹଐ͢ΔϑϨʔϜΛ੾Γସ͑ΒΕΔ - e.g. SW, WebWorker, iframe, …etc. - ࣮ࡍʹίϯιʔϧͰม਺ΛࢀরͰ͖Δ ։ൃ࣌ͷTips Switching frames
62. - Hard reload (Cmd+Shift+R) - ͦͷNavigationͰߦΘΕΔશͯͷϦΫΤετ͕SWΛܦ༝͠ͳ͘ͳΔ - ٯʹීஈͷΫηͰHard Reload͢Δਓ͸஫ҙ ։ൃ࣌ͷTips Hard reload
63. - Google WebFundamentals - ϥΠϑαΠΫϧ - Workerͷίϯτϩʔϧݖ - είʔϓ - SWࣗମͷΩϟογϡ - NavigationPreload - Ωϟογϯάͷछྨ - ։ൃ࣌ͷTips ·ͱΊ
64. ͋Γ͕ͱ͏͍͟͝·ͨ͠