Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ServiceWorkerの開発 / ServiceWorker Development

ServiceWorkerの開発 / ServiceWorker Development

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

96030bc60c6fc8a91f25ccda9b413b24?s=128

Sho Miyamoto

June 01, 2019
Tweet

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠