Tweet
Tweet

Slide 1

Slide 1 text

ServiceWorkerͷ ڍಈͱ։ൃ ٶຊ ক (@shqld)

Slide 2

Slide 2 text

- ٶຊ ক (Sho Miyamoto) - @shqld (Github) - @webseals (Twitter) - Edge / Server / Client - Իָ - τϥϯϖοτ(JazzFunkܥʣɺϐΞϊ - ౦ೆΞδΞʹॅΈ͍ͨ ͩΕʁ

Slide 3

Slide 3 text

✘ PWA ✘ جຊతͳ࣮૷ํ๏ ✔ ServiceWorkerͷڍಈ ࿩͢͜ͱ

Slide 4

Slide 4 text

ServiceWorker

Slide 5

Slide 5 text

https://developers.google.com/web/ fundamentals/primers/service-workers/

Slide 6

Slide 6 text

https://developers.google.com/web/fundamentals/primers/service-workers/

Slide 7

Slide 7 text

- PWAͷத֩ - ϩʔΧϧͷωοτϫʔΫϓϩΩγ - ϖʔδ΍WindowɺφϏήʔγϣϯͱ͸ಠཱ όοΫάϥ΢ϯυͰಈ͘ SWͱ͸

Slide 8

Slide 8 text

- ΫϥΠΞϯτ͔ΒͷϦΫΤετͷδϟοΫ - ΫϥΠΞϯτͱͷϝοηʔδͷૹड৴ - ΩϟογϡͷอଘɾಡΈग़͠ - ΦϑϥΠϯ࣌ͷॲཧͷ஗Ԇ SWͱ͸ SW͕ Ͱ͖Δ͜ͱ

Slide 9

Slide 9 text

WebWorkerͷαϒηοτ ϥΠϑαΠΫϧ͕͋Δ SWͱ͸ ಛ௃

Slide 10

Slide 10 text

WebWorker͕Ͱ͖Δ͜ͱ͸શͯͰ͖Δ ServiceWorkerGlobalScope͸ WorkerGlobalScopeΛܧঝ͍ͯ͠Δ - DOM͕ͳ͍ - postMessageͰ௨৴ - ผεϨουͰಈ͘ WebWorker ͷαϒηοτ

Slide 11

Slide 11 text

SWʹ͸ϥΠϑαΠΫϧ͕ଘࡏ͢Δ ϥΠϑαΠΫϧ

Slide 12

Slide 12 text

ϥΠϑαΠΫϧ https://bitsofco.de/content/images/2016/07/Lifecycle-3.png

Slide 13

Slide 13 text

ϥΠϑαΠΫϧ https://bitsofco.de/content/images/2016/07/Lifecycle-3.png ঢ়ଶ ݹ͍worker͕ શͯऴΘΔ·Ͱ଴͍ͬͯΔ ్தͰࣦഊ / ৽͍͠SWʹஔ͖׵ΘΔ௚લ SWεΫϦϓτͷ ύʔε͕ऴΘ͚ͬͨͩ ϦΫΤετΛ δϟοΫͰ͖Δ

Slide 14

Slide 14 text

SW͕ൃՐ͢ΔΠϕϯτʹ͸2छྨ͋Δ - Lifecycle Events - oninstall - onactivate - Functional Events - onfetch - onmessage - …etc. ϥΠϑαΠΫϧ Πϕϯτ

Slide 15

Slide 15 text

ϥΠϑαΠΫϧ https://bitsofco.de/content/images/2016/07/Lifecycle-3.png ϥΠϑαΠΫϧ Πϕϯτ oninstall onactive

Slide 16

Slide 16 text

ϥΠϑαΠΫϧ oninstall https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle

Slide 17

Slide 17 text

- installing௚ޙ - SWͷૢ࡞͕ՄೳʹͳΔ - ੩తϦιʔεͷΩϟογϡ - skipWaiting - ݹ͍worker͸active ϥΠϑαΠΫϧ oninstall

Slide 18

Slide 18 text

⾠ ݹ͍workerͱίϯϑϦΫτ͢Δૢ࡞͸ߦΘ ͳ͍ - Ωϟογϡͷ࡟আ ϥΠϑαΠΫϧ oninstall

Slide 19

Slide 19 text

oninstallͷޙɺݹ͍worker͕activeͰ͸ͳ͘ͳΔ λΠϛϯάʢ= ݹ͍ϖʔδ͕શͯด͡ΒΕ Δʣ·Ͱɺ৽͘͠Πϯετʔϧ͞ΕͨworkerΛ activate͠ͳ͍ oninstallதʹݺͿͱɺ͜ͷڍಈΛճආͰ͖Δ ϥΠϑαΠΫϧ skipWaiting()

Slide 20

Slide 20 text

⾠ ಉ͡ϖʔδ಺ͰҟͳΔεΫϦϓτ͕ಈ͘͜ ͱʹͳΔ e.g. 1. ϦιʔεA: old worker 2. ϦιʔεB: new worker ϥΠϑαΠΫϧ skipWaiting()

Slide 21

Slide 21 text

ϥΠϑαΠΫϧ onactivate https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle

Slide 22

Slide 22 text

activating௚ޙ ݹ͍worker͸΋͏ଘࡏ͠ͳ͍ͷͰɺoninstallͰ ͸Ͱ͖ͳ͔ͬͨ͜ͱ͕Ͱ͖Δ σʔλϕʔεͷҠߦ΍Ωϟογϡͷফڈ ϥΠϑαΠΫϧ onactivate

Slide 23

Slide 23 text

࣮ࡍʹworker͕activated(= Functional Events͕ ड͚औΕΔ)ʹͳΔͷ͸࣍ͷφϏήʔγϣϯ͔ Β onactivateதʹݺͿͱɺଈ࠲ʹactivatedঢ়ଶʹ ભҠͰ͖Δ ϥΠϑαΠΫϧ clients.claim()

Slide 24

Slide 24 text

ಉҰφϏήʔγϣϯ಺Ͱ్த͔ΒSW͕ϑΣο νΛδϟοΫ͢Δ͜ͱʹͳΔ ⾠ جຊతʹ͸ඞཁͳ͍ ⾠ SWͷδϟοΫʹґଘ͢Δͷ͸ͦ΋ͦ΋ྑ ͘ͳ͍ʢSW͕ଘࡏ͠ͳ͍ঢ়گͰରԠͰ͖ͳ͘ ͳΔʣ ϥΠϑαΠΫϧ clients.claim()

Slide 25

Slide 25 text

ϥΠϑαΠΫϧ https://bitsofco.de/content/images/2016/07/Lifecycle-3.png ϥΠϑαΠΫϧ ·ͱΊ ݹ͍worker͕ શͯऴΘΔ·Ͱ଴͍ͬͯΔ ్தͰࣦഊ / ৽͍͠SWʹஔ͖׵ΘΔ௚લ SWεΫϦϓτͷ ύʔε͕ऴΘ͚ͬͨͩ ϦΫΤετΛ δϟοΫͰ͖Δ `oninstall` `onactive`

Slide 26

Slide 26 text

ίϯτϩʔϧ = ͋Δworker͕Functional Events ΛϋϯυϧͰ͖Δ ⾠ activeͳworker !== controller ϒϥ΢βʹΠϯετʔϧ͞ΕΔSW͸ෳ਺͋Δ - ผυϝΠϯ - ಉҰυϝΠϯ - ผείʔϓ - ಉҰείʔϓ શ͕ͯউखʹಈ͍͍ͯͨΒࠔΔ ίϯτϩʔϧ

Slide 27

Slide 27 text

ࠓͦͷϖʔδΛίϯτϩʔϧ͍ͯ͠Δworker `navigator.serviceWorker.controller` ίϯτϩʔϧ ίϯτϩʔϥ

Slide 28

Slide 28 text

ίϯτϩʔϧ ίϯτϩʔϥ ͷܾఆ Worker Worker Worker1 Worker2 their.com/ my.com/ my.com/sub/ my.com/sub/ Page my.com/sub/index.html

Slide 29

Slide 29 text

ίϯτϩʔϧ ίϯτϩʔϥ ͷܾఆ Worker Worker Worker1 Worker2 their.com/ my.com/ my.com/sub/ my.com/sub/ Page my.com/sub/index.html

Slide 30

Slide 30 text

ίϯτϩʔϧ ίϯτϩʔϥ ͷ੾ΓସΘΓ WorkerB /b/ PageA /a/index.html WorkerA /a/ PageB /b/index.html φϏήʔγϣϯϦΫΤετؚΊͯ WorkerB͕ίϯτϩʔϧ

Slide 31

Slide 31 text

ServiceWorkerʹ͸είʔϓ͕͋Δ είʔϓ = SWͷίϯτϩʔϧର৅ൣғ σϑΥϧτ͸SWεΫϦϓτͷύεҎԼ είʔϓ

Slide 32

Slide 32 text

serviceWorker.registerͷΦϓγϣϯͰࢦఆͰ͖ Δ ͨͩ͠ࢦఆͰ͖Δείʔϓʹ͸༏ઌ౓ͷҧ͏ ෳ਺ͷ੍ݶ͕͋Δ είʔϓ είʔϓΛ ࢦఆ͢Δ

Slide 33

Slide 33 text

είʔϓ είʔϓΛ ࢦఆ͢Δ Script Path navgator.serviceWorker .register({ scope }) e.g. /sw.js e.g. /, /any/

Slide 34

Slide 34 text

είʔϓ είʔϓΛ ࢦఆ͢Δ Script Path navgator.serviceWorker .register({ scope }) e.g. /static/sw.js e.g. /static/, /static/any/

Slide 35

Slide 35 text

είʔϓ είʔϓΛ ࢦఆ͢Δ Script Path navgator.serviceWorker .register({ scope }) e.g. /static/sw.js `Service-Worker-Allowed` e.g. / e.g. /, /any/

Slide 36

Slide 36 text

⾠ δϟοΫͰ͖Δର৅ͱ͸ແؔ܎ ⾠ `/sub/` ͱ͍͏ࢦఆͳͷͰɺe.g. `/sub`ͷΑ͏ ͳϦιʔε͸είʔϓ֎ͱͳΔ είʔϓ

Slide 37

Slide 37 text

SWࣗମ΋౰વΩϟογϡ͞ΕΔ Ωϟογϡઓུ͸ಛघ τοϓϨϕϧεΫϦϓτͱΠϯϙʔτ͞ΕΔ εΫϦϓτͰڍಈ͕ҟͳΔ SWࣗମͷ Ωϟογϡ

Slide 38

Slide 38 text

جຊతʹ͸: ͲΜͳʹ஗ͯ͘΋24࣌ؒޙʹ͸ඞͣωοτ ϫʔΫ͔ΒऔΓʹ͍͘ SWࣗମͷΩϟογϡ 24࣌ؒ

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

αʔϏεϫʔΧʔͷىಈதʹϦΫΤετ͕ ૸ͬͨͱ͖ɺʢΩϟογϡͰࡹ͚ͳ͚Ε͹ʣ ϦΫΤετ͕஗Ԇͯ͠͠·͏໰୊ Navigation Preload

Slide 41

Slide 41 text

NavigationPreload Navigation Preload Page Server

Slide 42

Slide 42 text

NavigationPreload Navigation Preload Page Server Worker

Slide 43

Slide 43 text

NavigationPreload Navigation Preload Page Server Worker Worker ~500ms

Slide 44

Slide 44 text

SWͷىಈͱฒߦͯ͠ϦΫΤετ Ϩεϙϯε͸SW಺ͰऔಘͰ͖Δ NavigationPreload Navigation Preload

Slide 45

Slide 45 text

NavigationPreload Navigation Preload Page Server Worker Worker ~500ms

Slide 46

Slide 46 text

NavigationPreload Navigation Preload

Slide 47

Slide 47 text

NavigationPreload Navigation Preload

Slide 48

Slide 48 text

Runtime Cache Pre-cache Ωϟογϯά ͷछྨ

Slide 49

Slide 49 text

Runtime Cache: ফۃతΩϟογϡ Pre-cache: ੵۃతΩϟογϡ Ωϟογϯά ͷछྨ

Slide 50

Slide 50 text

Ωϟογϯάͷछྨ Runtime Cache Page Server Worker Cache ϑΣον Ωϟογϡ ϦΫΤετ Ϩεϙϯε

Slide 51

Slide 51 text

ϥϯλΠϜʢϦΫΤετͷδϟοΫ࣌ʣʹߦ ͏Ωϟογϡ `onfetch`ΠϕϯτͷதͰॲཧ͞ΕΔ ύε΍֦ுࢠʹΑͬͯΩϟογϡઓུ͕෼͔ ΕΔ Ωϟογϯάͷछྨ Runtime Cache

Slide 52

Slide 52 text

Ωϟογϯάͷछྨ Pre-cache Server Worker Cache Ωϟογϡ ϦΫΤετ Ϩεϙϯε

Slide 53

Slide 53 text

Ωϟογϯάͷछྨ Pre-cache Page Server Worker Cache postMessage Ωϟογϡ ϦΫΤετ Ϩεϙϯε

Slide 54

Slide 54 text

ϦΫΤετ͔Β͸ಠཱͨ͠Ωϟογϡ ੩తϦιʔεΛ࠷ॳʹΩϟογϡ ಈతʹΩϟογϡ e.g. postMessage… Ωϟογϯάͷछྨ Pre-cache

Slide 55

Slide 55 text

࣮ࡍͷ։ൃʹ͓͍ͯɺύϑΥʔϚϯε޲্ʹ ͸ͱͯ΋ॏཁ e.g. - ੩తϦιʔε(js, css, …etc.)Λ࠷ॳʹ - ϖʔδ಺ͷϦϯΫઌΛ౤ػతʹ - HTTPͷ`Link`ϔομʹࡌ͍ͬͯΔαϒϦ ιʔε΋Ұॹʹ Ωϟογϯάͷछྨ Pre-cache

Slide 56

Slide 56 text

- Offline mode - Update on reload - Bypass for network - Preserve log - Switching frames - Hard reload ։ൃ࣌ͷTips

Slide 57

Slide 57 text

- Wi-FiΛ੾Βͳͯ͘΋ΦϑϥΠϯΛΤϛϡϨʔτͰ͖Δ - 3GͳͲɺճઢͷ଎͞΋ௐઅͰ͖Δ - Applicationλϒʹ΋εΠον͕͋Δ ։ൃ࣌ͷTips Offline Mode

Slide 58

Slide 58 text

- Ϧϩʔυ࣌ʹຖճSWͷߋ৽Λڧ੍Ͱ͖Δ - εΫϦϓτΛ͍ͬͨ࣌͡΍oninstall/onactivateΠϕϯτͷڍಈΛݟͨ ͍࣌ʹ࢖͏ - ʢSWͷߋ৽ʹ͍͔ʹ͕͔͔࣌ؒΔ͔෼͔Δʣ ։ൃ࣌ͷTips Update on reload

Slide 59

Slide 59 text

- શͯͷϦΫΤετ͕SWΛܦ༝͠ͳ͘ͳΔ - SWͷ։ൃ࣌Ҏ֎͸ɺجຊతʹ͜ΕΛΦϯʹ͢Δ ։ൃ࣌ͷTips Bypass for network

Slide 60

Slide 60 text

- ϖʔδΛભҠͯ͠΋ϩά͕࢒Γଓ͚Δ - Ϧϩʔυͯ͠SWΛߋ৽͢Δͱ͖͸ϩά͕ফ͑ͯ͠·͏ - ͪͳΈʹSWͷϩάʹPrefixΛ෇͚͓ͯ͘ͱɺSWͷϩά͚ͩΛϑΟ ϧλʔͰ͖Δ ։ൃ࣌ͷTips Preserve log

Slide 61

Slide 61 text

- ϖʔδʹଐ͢ΔϑϨʔϜΛ੾Γସ͑ΒΕΔ - e.g. SW, WebWorker, iframe, …etc. - ࣮ࡍʹίϯιʔϧͰม਺ΛࢀরͰ͖Δ ։ൃ࣌ͷTips Switching frames

Slide 62

Slide 62 text

- Hard reload (Cmd+Shift+R) - ͦͷNavigationͰߦΘΕΔશͯͷϦΫΤετ͕SWΛܦ༝͠ͳ͘ͳΔ - ٯʹීஈͷΫηͰHard Reload͢Δਓ͸஫ҙ ։ൃ࣌ͷTips Hard reload

Slide 63

Slide 63 text

- Google WebFundamentals - ϥΠϑαΠΫϧ - Workerͷίϯτϩʔϧݖ - είʔϓ - SWࣗମͷΩϟογϡ - NavigationPreload - Ωϟογϯάͷछྨ - ։ൃ࣌ͷTips ·ͱΊ

Slide 64

Slide 64 text

͋Γ͕ͱ͏͍͟͝·ͨ͠