ServiceWorkerの開発 / ServiceWorker Development

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