Service Workerとは、それを使ってできること / what-is-service-worker

4FSWJDF8PSLFSͱ͸ ͦΕΛ࢖ͬͯͰ͖Δ͜ͱ ,BOB[BXBKT3FNPUF.FFUVQ 5PTIJIJTB5PNBUTV 1

֎দढ़ঘ 5PTIJIJTB5PNBUTV αΠϘ΢ζגࣜձࣾ ϑϩϯτΤϯυ ۚ୔ େֶଔۀ·Ͱ ˠ౦ژˠѪඤ !UPTIJUPNB !UPTIJ@@UPNB

4FSWJDF8PSLFSͱ͸ 3

4FSWJDF8PSLFS 48 8FCϖʔδͱ͸ผʹϒϥ΢βͷόοΫάϥ΢ϯυͰ ಈ࡞͢Δ+4ͷ࣮ߦ؀ڥͰ ϖʔδ͔ΒͷωοτϫʔΫϦΫΤετʹհೖͰ͖Δ 4

Α͘Θ͔Βͳ͍ 5

4FSWJDF8PSLFS 48 ᶃ8FCϖʔδͱ͸ผʹϒϥ΢βͷόοΫάϥ΢ϯυͰ ᶄಈ࡞͢Δ+4ͷ࣮ߦ؀ڥͰ ᶅϖʔδ͔ΒͷωοτϫʔΫϦΫΤετʹհೖͰ͖Δ 6

Ұൠతͳ8FCϖʔδ Ұൠతʹϒϥ΢βͰಈ͘+4͸ɺ8FCϖʔδͷ ϥΠϑλΠϜͷதͰ࣮ߦ ˠλϒΛดͨ͡Βɺऴྃ͢Δ 8FCϖʔδ +4 )5.- $44 8FCϖʔδ +BWB4DSJQUͷ࣮ߦ
8

8FCϖʔδͱ͸ผʹϒϥ΢βͷ όοΫάϥ΢ϯυ 48͸ɺϒϥ΢βͷཪͰಈ͘ͷͰ ϖʔδΛดͯ͡΋ੜଘ͢Δ 8FCϖʔδ 48 +4 +4 )5.- $44
8FCϖʔδ 4FSWJDF8PSLFS 9

+4ͷ࣮ߦ؀ڥ 8FC8PSLFS ผεϨουͰ+BWB4DSJQUΛ࣮ߦ͢Δ 11

ϦΫΤετʹհೖͰ͖Δ 8FCϖʔδ αʔόʔ BQJBSUJDMFT ʹΞΫηε 4FSWJDF8PSLFS APIϦΫΤετ΍ ϦιʔεͷϦΫΤετ͕͋Ε͹ɺ೚ҙͷ ॲཧΛ࣮ߦͰ͖ΔΑɻ ϦΫΤετΛൃߦ͢Δ͜ͱ΋Ͱ͖Δ
13

4FSWJDF8PSLFS 48 ͱ͸ 8FCϖʔδͱ͸ผʹϒϥ΢βͷόοΫάϥ΢ϯυͰ ಈ࡞͢Δ+4ͷ࣮ߦ؀ڥͰ ϖʔδ͔ΒͷωοτϫʔΫϦΫΤετʹհೖͰ͖Δ 14

ͪΐͬͱ෼͔Δؾ͕͢Δ 15

·ͩྑ͘Θ͔Βͳ͍ͷͰ 48Λ׆༻ͯ͠ΔαʔϏεΛݟͯ ΠϝʔδΛ෇͚Δ 16

48ΛऔΓೖΕ͍ͯΔ αʔϏε 17

4DSBQCPY ΦϑϥΠϯͰ΋ίϯ ςϯπΛӾཡՄೳ 18 IUUQTQSUJNFTKQNBJOIUNMSEQIUNM

5XJUUFS 8FCΞϓϦΛ 18"ͱͯ͠Πϯε τʔϧ πΠʔτ͕ˢ 19 IUUQTEFWFMPQFSTHPPHMFDPNXFCTIPXDBTFUXJUUFS

:PV5VCF ϖʔδΛ։͍ͯ ແͯ͘΋σεΫτοϓ ௨஌͕͘Δ 20

͜ΕΒ͸48Λϕʔεʹ ࣮ݱ͍ͯ͠Δ 21

48ͱ͸ ͦΕΛ࢖ͬͯͰ͖Δ͜ͱ 22

4FSWJDF8PSLFSͱ͸ 8FCϖʔδͷϥΠϑλΠϜΛ௒͑ͯ αʔϏε FH1VTI௨஌ɺΦϑϥΠϯମݧ ΛఏڙͰ͖Δ΋ͷ 8FCϖʔδ 48 +4 )5.-
$44 8FCϖʔδͱ͸ผʹϒϥ΢βͷόοΫάϥ΢ϯυͰಈ࡞͢Δ+4ͷ࣮ߦ؀ڥ Ͱϖʔδ͔ΒͷωοτϫʔΫϦΫΤετʹհೖͰ͖Δ 23

4FSWJDF8PSLFS ʓʓ w 4FSWJDF8PSLFS͚ͩͰϓογϡ௨஌΍ΦϑϥΠϯମݧͳͲ ͕ఏڙͰ͖ΔΘ͚Ͱ͸ͳ͍ w ΦϑϥΠϯମݧ w $BDIF"1* 48
w ϓογϡ௨஌ w 1VTI"1* 48 ϙΠϯτ͸ɺ48͸ϖʔδ ͱ͸ผͰϒϥ΢βͷόοΫάϥ΢ϯ υͰಈ࡞ͯ͠ɺϖʔδͷϦΫΤετ ΛϑοΫͰ͖Δ 24

2020/09/26 ֤ϒϥ΢βͷαϙʔτঢ়گ 25

Ͱ͖Δ͜ͱ ᶃ8FCϖʔδ͔Βαʔόʔ΁ͷϦΫΤετΛϑοΫͰ͖Δ ˠΩϟογϡͷ׆༻ ΦϑϥΠϯମݧɺදࣔ଎౓ͷߴ଎Խ ᶄ8FCϖʔδΛ։͍ͯແͯ͘΋ɺಛఆͷॲཧΛߦ͑Δ ˠϓογϡ௨஌ ᶅ48ΛΠϯετʔϧͯ͠ɺ8FCΞϓϦΛ18"ͱͯ͠Πϯετʔϧ ˠ"EEUP)PNF4DSFFO ")4
ChromeɾEdge Firefox Safari Firefox Safari Firefox ChromeɾEdge ChromeɾEdge 26

ᶃ8FCϖʔδ͔Βαʔόʔ΁ͷϦΫΤ ετΛϑοΫͰ͖ΔˠΦϑϥΠϯମݧ 8FCϖʔδ αʔόʔ JOEFYIUNM͍ͩ͘͞ ʹΞΫηε 4FSWJDF8PSLFS ࣄલʹϦιʔεΛ Ωϟογϡ͓͍͔ͯͨ͠Βɺ ΦϑϥΠϯͰ΋ϦιʔεΛ
ฦͤΔͶ $BDIF 27

ᶃ8FCϖʔδ͔Βαʔόʔ΁ͷϦΫΤ ετΛϑοΫͰ͖Δˠදࣔ଎౓ͷߴ଎Խ ᶃΩϟογϡϑΝʔετ ᶃωοτϫʔΫϑΝʔετ ଞʹ΋͍͔ͭ͘ Ωϟογϡઓུ͕͋Δ 28

͋·Γසൟʹ಺༰͕ߋ৽͞Εͳ͍ Ϧιʔε΍σʔλ͸ Ωϟογϡ͔Βฦͤ͹ྑ͍Ͷʂ 29

ᶃΩϟογϡϑΝʔετ 8FCϖʔδ αʔόʔ JOEFYIUNM͍ͩ͘͞ ʹΞΫηε 4FSWJDF8PSLFS Cache͋Δ͔ΒɺCache͔Βฦ͢Ͷ $BDIF 30

ɹᶃΩϟογϡϑΝʔετ 8FCϖʔδ αʔόʔ JOEFYIUNM͍ͩ͘͞ ʹΞΫηε 4FSWJDF8PSLFS Cacheແ͍ͳΒαʔόʔʹϦΫΤε τ͢ΔΑ $BDIF 'FUDI"1*
JOEFYIUNM 31

සൟʹ಺༰͕ߋ৽͞Εͦ͏ͳ৘ใ͸ʁ 32

ᶃωοτϫʔΫϑΝʔετ 8FCϖʔδ αʔόʔ GPPIUNM͍ͩ͘͞ GPPʹΞΫηε 4FSWJDF8PSLFS ·ͣ͸αʔόʔʹ ϦΫΤετ͢ΔΑ 'FUDI"1* GPPIUNM
$BDIF 33

ɹᶃωοτϫʔΫϑΝʔετ 8FCϖʔδ αʔόʔ GPPIUNM͍ͩ͘͞ GPPʹΞΫηε 4FSWJDF8PSLFS OfflineͳΒCache͔Βฦ͢Α $BDIF 34

ᶄ8FCϖʔδΛ։͍ͯແͯ͘΋ɺ ಛఆͷॲཧΛߦ͑Δˠϓογϡ௨஌ 8FCϖʔδ αʔόʔ 4FSWJDF8PSLFS 1VTI4FSWJDF 35

ᶄ8FCϖʔδΛ։͍ͯແͯ͘΋ɺ ಛఆͷॲཧΛߦ͑Δˠϓογϡ௨஌ 8FCϖʔδ αʔόʔ 4FSWJDF8PSLFS 1VTI4FSWJDF 36 ϖʔδΛ։͍ͯແͯ͘ ΋ɺ1VTI4FSWJDF͔Β ͷ௨஌Λड͚औΕΔΑ

ᶄ8FCϖʔδΛ։͍ͯແͯ͘΋ɺ ಛఆͷॲཧΛߦ͑Δˠϓογϡ௨஌ 8FCϖʔδ αʔόʔ 4FSWJDF8PSLFS 1VTI4FSWJDF 37 '$. 'JSFCBTF$MPVE.FTTBHJOH '$.Λ࢖͏ͷ͕Ұൠత
ϖΠϩʔυͷ҉߸ԽͳͲ໘౗ͳ ॲཧΛ೚ͤΕΔ

ᶅ48ΛΠϯετʔϧͯ͠ 8FCΞϓϦΛ18"ͱͯ͠Πϯετʔϧ ˠ"EEUP)PNF4DSFO ")4 38

39 ᶅ48ΛΠϯετʔϧͯ͠ 8FCΞϓϦΛ18"ͱͯ͠Πϯετʔϧ ˠ"EEUP)PNF4DSFO ")4

40 ᶅ48ΛΠϯετʔϧͯ͠ 8FCΞϓϦΛ18"ͱͯ͠Πϯετʔϧ ˠ"EEUP)PNF4DSFO ")4

18" 41

18"ͱ͸ʁ w 1SPHSFTTJWF8FC"QQT w ৽͍͠"1*ͱϓϩάϨογϒͳ֦ுઓུΛ࢖༻ͯ͠ɺΫϩεϓϥοτ ϑΥʔϜͳ΢ΣϒΞϓϦ w 8FCΞϓϦͰωΠςΟϒΞϓϦͷΑ͏ͳϢʔβʔମݧΛఏڙ͢Δ 3FMJBCMF *OUFHSBUFE
'BTU &OHBHJOH w ϞόΠϧˠϞόΠϧΞϓϦ w 1$ˠσεΫτοϓΞϓϦ 42

18"ͱ͸ʁ w ϞόΠϧ΢Σϒʹ͓͚ΔϢʔβʔମݧͷ޲্ w 'BTU ߴ଎ ΢ΣϒΞϓϦͷίϯςϯπΛߴ଎ʹఏڙ͢Δ w *OUFHSBUFE ౷߹
σόΠε΍04ʹ߹Θͤͨମݧ w 3FMJBCMF ৴པ ௿଎ͳωοτϫʔΫ΍ΦϑϥΠϯͰ΋ར༻Մೳ w &OHBHJOH Τϯήʔδ ୺຤ʹΠϯετʔϧՄೳɺϓογϡ௨஌ 43

18"ͷಋೖࣄྫ w 466.0 w ಡΈࠐΈ࣌ؒΛ୹ॖɺϓογϡ௨஌ͷ։෧཰ IUUQTEFWFMPQFSTHPPHMFDPNXFCTIPXDBTFTVVNP w 5XJUUFS w
πΠʔτ਺૿Ճɺ௚ؼ཰ݮগ IUUQTEFWFMPQFSTHPPHMFDPNXFCTIPXDBTFUXJUUFS w ೔ܦ w ίϯόʔδϣϯ ձһొ࿥ ૿Ճɺ೔ͷΞΫςΟϒϢʔβʔ਺૿Ճ IUUQTEFWFMPQFSTHPPHMFDPNXFCTIPXDBTFOJLLFJ 44

18"ͷ࡞Γํ 8FCΞϓϦΛ࡞Δ 4FSWJDF8PSLFSΛΠϯετʔϧ͢Δ NBOJGFTUKTPOΛ࡞੒ͯ͠MJOLλάͰಡΈࠐ· ͤΔ 45

18"Ͱͷମݧ w 48Λج൫ʹͨ͠8FCͷٕज़ͱ૊Έ߹ΘͤΔ͜ͱͰɺωΠςΟ ϒΞϓϦͷΑ͏ͳମݧΛఏڙՄೳ w ϓογϡ௨஌ w ϗʔϜը໘΁ͷΠϯετʔϧ w ΦϑϥΠϯͰͷӾཡ
w ωΠςΟϒΞϓϦͷΑ͏ͳߴ଎ͳදࣔ 46

18"ͷϝϦοτɾσϝϦοτ w ϝϦοτ w 8FCʹ௥ՃͰ͔͔ΔωΠςΟϒΞϓϦ։ൃίετ͕௿͍ w ωΠςΟϒετΞ͔ΒͷΠϯετʔϧ͕ෆཁ w ετΞͷ৹͕ࠪෆཁϢʔβʔ͕Ξοϓσʔτ͢ΔλΠϛϯάΛؾʹ͠ͳͯ͘ྑ͍
w σϝϦοτ w ΞϓϦετΞܦ༝Ͱͷू٬͕Ͱ͖ͳ͍ 58" w J04Ͱ͸Ұ෦ػೳ੍͕ݶ͞ΕΔ w ωΠςΟϒͷମݧʹྼΔ෦෼͸΋ͪΖΜ͋Γͦ͏ ैདྷͷ8FCͷ Ԇ௕ઢ্Ͱগͣͭ͠௥Ճ͍͚ͯ͠Δ 47

18" 8FCͰྑ͍ମݧΛఏڙ͍ͯ͜͠͏ɻ 48

ͦͷଞ࠷ۙͷಈ޲ 49

ݱঢ়ͱࠓޙͷมԽ 8FCΞϓϦ 4FSWJDF8PSFLS ৽͍͠ "1* ৽͍͠ "1* ৽͍͠ "1* 48্Ͱ࣮ݱͰ͖Δ
"1*͕૿͍͑ͯ͘ ؆୯ʹ͔͚Δ Α͏ʹ ϕʔεʹͳΔ ߟ͑΍ٕज़͸ ग़དྷ্͕ͬͯͦ͏ 50

؆୯ʹ͔͚ΔΑ͏ʹ w 8PSLCPY w IUUQTEFWFMPQFSTHPPHMFDPNXFCUPPMTXPSLCPY w 4FSWJDF8PSLFSʹؔ࿈͢Δɺ༷ʑͳॲཧΛ ؆୯ʹ࣮૷Ͱ͖ΔϥΠϒϥϦ w ๛෋ͳ1MVHJO͕༻ҙ͞Ε͍ͯΔ
51

48Ͱ#BDLHSPVOEॲཧ w #BDLHSPVOE'FUDI w όοΫάϥ΢ϯυͰσʔλΛऔಘͰ͖Δ w #BDLHSPVOE4ZOD w ΦϑϥΠϯ࣌ʹࣦഊͨ͠ϦΫΤετΛ෮ؼ࣌ʹ࠶࣮ߦͰ͖Δ w
1FSJPEJD#BDLHSPVOE4ZOD w όοΫάϥ΢ϯυͰλεΫΛఆظ࣮ߦͰ͖Δ 52

༷ʑͳϓϥοτϑΥʔϜͰ18" w σεΫτοϓ18" $ISPNF04 8JOEPXT -JOVY NBD04 w 8JOEPXTͰͷ18"
w IUUQTXXXTMJEFTIBSFOFUPTBNVNQXBPOXJOEPXT w 5SVTUFE8FC"DUJWJUZ 58" w ಛఆͷ৚݅΍1MBZετΞͷϙϦγʔʹै͏͜ͱͰ18"͔Β"1,Λ࡞੒ ͯ͠(PPHMF1MBZʹొ࿥Մೳ w CVCCMFXSBQͱ͍͏$-*πʔϧ΋༻ҙ͞Ε͍ͯΔ 53

8FCͷ৽͍͠"1*ͱ૊Έ߹Θͤͯ ΑΓωΠςΟϒΞϓϦͷΑ͏ͳମݧ΁ w 8FC4IBSF8FC4IBSF5BSHFU w 4.4 $POUBDU1JDLFS /BUJWF'JMF4ZTUFN w 4IPSUDVUT
#BEHJOH w &UDʜ 54

J04Ͱͷ18" w J04 w ")4͕ར༻Մೳʹ w 4FSWJDF8PSLFS͕ΠϯετʔϧͰ͖ΔΑ͏ʹ w 0BVUIͰͷϩάΠϯ࣌ʹ4BGSJ͕ىಈ18"͔Β ೝূ৘ใʹΞΫηεͰ͖ͳ͍
w J04 w 0BVUIϩάΠϯ࣌ʹ18"಺΢Οϯυ΢͕ ্ཱ͕ͪΔೝূ৘ใ͕࢖͑Δ J04Ͱ΋18" ˞ 48ͷ1VTI"1*͸ ࢖͑ͳ͍ 55

·ͱΊ w 4FSWJDF8PSLFSͱ͸ w 8FCϖʔδͷϥΠϑλΠϜΛ௒͑ͯαʔϏεΛఏڙͯ͘͠ΕΔ 8PSLFS w 48Λ࢖͑͹ w ΦϑϥΠϯମݧ΍ϓογϡ௨஌ɺ18"ͱͯ͠ͷΠϯετʔϧͳ
ͲωΠςΠϒΞϓϦʹ͍ۙ͜ͱΛ8FCΞϓϦͰ΋ఏڙͰ͖Δ 56

Service Workerとは、それを使ってできること / what-is-service-worker

Service Workerとは、それを使ってできること / what-is-service-worker

More Decks by Toshihisa Tomatsu

Other Decks in Technology

Featured

Transcript