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

E9ce07196f470caff07053e98a88fa9e?s=47 Toshihisa Tomatsu
September 26, 2020
Technology
2
1.1k

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

Kanazawa.js Remote Meetup #06の資料です。
https://kanazawajs.connpass.com/event/188109/

E9ce07196f470caff07053e98a88fa9e?s=128

Toshihisa Tomatsu

September 26, 2020
Tweet

More Decks by Toshihisa Tomatsu

See All by Toshihisa Tomatsu
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
8
2k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
3
180
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
8
1.7k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
16
8.2k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
0
630
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
6
4.2k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
5
2.2k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
8
1.8k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
2
350

Other Decks in Technology

See All in Technology
D5554c0703d71b3f813e658020267954?s=48 masudas75
1
240
93fc2d713bc4d0e9c594bf8c9e6bcc62?s=48 oztick139
0
120
E8f618bf29b36a046d01e235071b2ac3?s=48 trafficbrain
0
490
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
200
C5e26822fb2aa64410b50eac63ef7d84?s=48 fill9120
0
170
8a84268593355816432ceaf78777d585?s=48 dena_tech
0
510
21a4b941766d805333e11c5766be43b4?s=48 takahashim
10
860
457ada693e168bd1102fec3914040b5d?s=48 uipath_friends
0
130
A581dece94e3a97b391d3d17b10cf084?s=48 fnario
0
130
9b600b6d2f592d0944507e989770b9b3?s=48 issei126
1
250
332f89cc697355902a817506b6995f2b?s=48 ytaka23
0
410
0d29d155ce5c5a93ed46363626da3ea7?s=48 ocise
1
1.8k

Featured

See All Featured
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
250
11k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
125
21k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
254
36k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
113
7k
245cee81a9c424266e5e401d844ea881?s=48 lara
590
60k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
155
11k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
175
7.2k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
Ecdea9b9714877b86cee08458f085481?s=48 trallard
10
440
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
11
500
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
14
980
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
123
20k

Transcript

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

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

  3. 4FSWJDF8PSLFSͱ͸ 3

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

  5. Α͘Θ͔Βͳ͍ 5

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

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

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

    8

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

    8FCϖʔδ 4FSWJDF8PSLFS 9

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

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

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

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

    13

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

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

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

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

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

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

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

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

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

  23. 4FSWJDF8PSLFSͱ͸ 8FCϖʔδͷϥΠϑλΠϜΛ௒͑ͯ αʔϏε FH1VTI௨஌ɺΦϑϥΠϯମݧ  ΛఏڙͰ͖Δ΋ͷ 8FCϖʔδ 48 +4 )5.-

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

  24. 4FSWJDF8PSLFS ʓʓ w 4FSWJDF8PSLFS͚ͩͰϓογϡ௨஌΍ΦϑϥΠϯମݧͳͲ ͕ఏڙͰ͖ΔΘ͚Ͱ͸ͳ͍ w ΦϑϥΠϯମݧ w $BDIF"1* 48

    w ϓογϡ௨஌ w 1VTI"1* 48 ϙΠϯτ͸ɺ48͸ϖʔδ ͱ͸ผͰϒϥ΢βͷόοΫάϥ΢ϯ υͰಈ࡞ͯ͠ɺϖʔδͷϦΫΤετ ΛϑοΫͰ͖Δ 24

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

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

    ChromeɾEdge Firefox Safari Firefox Safari Firefox ChromeɾEdge ChromeɾEdge 26

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

    ฦͤΔͶ $BDIF 27

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

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

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

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

    JOEFYIUNM 31

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

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

    $BDIF 33

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

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

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

  37. ᶄ8FCϖʔδΛ։͍ͯແͯ͘΋ɺ ಛఆͷॲཧΛߦ͑Δˠϓογϡ௨஌ 8FCϖʔδ αʔόʔ 4FSWJDF8PSLFS 1VTI4FSWJDF 37 '$. 'JSFCBTF$MPVE.FTTBHJOH '$.Λ࢖͏ͷ͕Ұൠత

    ϖΠϩʔυͷ҉߸ԽͳͲ໘౗ͳ ॲཧΛ೚ͤΕΔ

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

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

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

  41. 18" 41

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

    'BTU &OHBHJOH  w ϞόΠϧˠϞόΠϧΞϓϦ w 1$ˠσεΫτοϓΞϓϦ 42

  43. 18"ͱ͸ʁ w ϞόΠϧ΢Σϒʹ͓͚ΔϢʔβʔମݧͷ޲্ w 'BTU ߴ଎ ΢ΣϒΞϓϦͷίϯςϯπΛߴ଎ʹఏڙ͢Δ w *OUFHSBUFE ౷߹

    σόΠε΍04ʹ߹Θͤͨମݧ w 3FMJBCMF ৴པ ௿଎ͳωοτϫʔΫ΍ΦϑϥΠϯͰ΋ར༻Մೳ w &OHBHJOH Τϯήʔδ ୺຤ʹΠϯετʔϧՄೳɺϓογϡ௨஌ 43

  44. 18"ͷಋೖࣄྫ w 466.0 w ಡΈࠐΈ࣌ؒΛ୹ॖɺϓογϡ௨஌ͷ։෧཰ IUUQTEFWFMPQFSTHPPHMFDPNXFCTIPXDBTFTVVNP  w 5XJUUFS w

    πΠʔτ਺૿Ճɺ௚ؼ཰ݮগ IUUQTEFWFMPQFSTHPPHMFDPNXFCTIPXDBTFUXJUUFS  w ೔ܦ w ίϯόʔδϣϯ ձһొ࿥ ૿Ճɺ೔ͷΞΫςΟϒϢʔβʔ਺૿Ճ IUUQTEFWFMPQFSTHPPHMFDPNXFCTIPXDBTFOJLLFJ 44

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

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

    w ωΠςΟϒΞϓϦͷΑ͏ͳߴ଎ͳදࣔ 46

  47. 18"ͷϝϦοτɾσϝϦοτ w ϝϦοτ  w 8FCʹ௥ՃͰ͔͔ΔωΠςΟϒΞϓϦ։ൃίετ͕௿͍ w ωΠςΟϒετΞ͔ΒͷΠϯετʔϧ͕ෆཁ w ετΞͷ৹͕ࠪෆཁϢʔβʔ͕Ξοϓσʔτ͢ΔλΠϛϯάΛؾʹ͠ͳͯ͘ྑ͍

    w σϝϦοτ  w ΞϓϦετΞܦ༝Ͱͷू٬͕Ͱ͖ͳ͍ 58"  w J04Ͱ͸Ұ෦ػೳ੍͕ݶ͞ΕΔ w ωΠςΟϒͷମݧʹྼΔ෦෼͸΋ͪΖΜ͋Γͦ͏ ैདྷͷ8FCͷ Ԇ௕ઢ্Ͱগͣͭ͠௥Ճ͍͚ͯ͠Δ 47

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

  49. ͦͷଞ࠷ۙͷಈ޲ 49

  50. ݱঢ়ͱࠓޙͷมԽ 8FCΞϓϦ 4FSWJDF8PSFLS ৽͍͠ "1* ৽͍͠ "1* ৽͍͠ "1* 48্Ͱ࣮ݱͰ͖Δ

    "1*͕૿͍͑ͯ͘ ؆୯ʹ͔͚Δ Α͏ʹ ϕʔεʹͳΔ ߟ͑΍ٕज़͸ ग़དྷ্͕ͬͯͦ͏ 50

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

    51

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

    1FSJPEJD#BDLHSPVOE4ZOD w όοΫάϥ΢ϯυͰλεΫΛఆظ࣮ߦͰ͖Δ 52

  53. ༷ʑͳϓϥοτϑΥʔϜͰ18" w σεΫτοϓ18" $ISPNF04 8JOEPXT -JOVY NBD04  w 8JOEPXTͰͷ18"

    w IUUQTXXXTMJEFTIBSFOFUPTBNVNQXBPOXJOEPXT w 5SVTUFE8FC"DUJWJUZ 58"  w ಛఆͷ৚݅΍1MBZετΞͷϙϦγʔʹै͏͜ͱͰ18"͔Β"1,Λ࡞੒ ͯ͠(PPHMF1MBZʹొ࿥Մೳ w CVCCMFXSBQͱ͍͏$-*πʔϧ΋༻ҙ͞Ε͍ͯΔ 53

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

    #BEHJOH w &UDʜ 54

  55. J04Ͱͷ18" w J04 w ")4͕ར༻Մೳʹ w 4FSWJDF8PSLFS͕ΠϯετʔϧͰ͖ΔΑ͏ʹ w 0BVUIͰͷϩάΠϯ࣌ʹ4BGSJ͕ىಈ18"͔Β ೝূ৘ใʹΞΫηεͰ͖ͳ͍

     w J04 w 0BVUIϩάΠϯ࣌ʹ18"಺΢Οϯυ΢͕ ্ཱ͕ͪΔೝূ৘ใ͕࢖͑Δ J04Ͱ΋18"  ˞ 48ͷ1VTI"1*͸ ࢖͑ͳ͍ 55

  56. ·ͱΊ w 4FSWJDF8PSLFSͱ͸ w 8FCϖʔδͷϥΠϑλΠϜΛ௒͑ͯαʔϏεΛఏڙͯ͘͠ΕΔ 8PSLFS w 48Λ࢖͑͹ w ΦϑϥΠϯମݧ΍ϓογϡ௨஌ɺ18"ͱͯ͠ͷΠϯετʔϧͳ

    ͲωΠςΠϒΞϓϦʹ͍ۙ͜ͱΛ8FCΞϓϦͰ΋ఏڙͰ͖Δ 56