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

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

E9ce07196f470caff07053e98a88fa9e?s=47 Toshihisa Tomatsu
September 26, 2020
Technology
3
1.2k

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
2.1k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
3
190
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
8
1.7k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
17
8.5k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
0
660
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
6
4.3k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
5
2.3k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
8
1.9k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
2
370

Other Decks in Technology

See All in Technology
56ae61a2631362f985e4c1fa4548a7ac?s=48 yuzutas0
8
3k
3353b76e1480888ea7a482ebaa883dcb?s=48 robcrowley
0
150
Bc0167df60f90a38e0ec30895b7ecc6c?s=48 karabish
0
270
3e8f61263f14a620f21d5f3f89c4b846?s=48 gamella
3
1.5k
8611672fd60a86cd19c972c61df3c99f?s=48 900groove
2
450
Cc568a0b1284645f9fb927b2343eb87e?s=48 youtalk
0
410
Ff7f1f76468f46a1c5c84b9238a4b162?s=48 miyake
1
430
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
240
Ad2155c75c67c0100dd008ad10858de5?s=48 legalforce
PRO
1
110
A2cac4b3dcb2bc0b87917ddc034ef708?s=48 sansandsoc
2
770
4ccf6c02807d06f043a71435c48ce86a?s=48 eller86
1
230
7cd783377515bdf8207062840b7b2f4e?s=48 soracom
0
160

Featured

See All Featured
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
8
550
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
587
200k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
11
810
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
627
43k
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
103
5k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
294
39k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
217
16k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
610
55k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
112
10k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
145
12k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
52
4.2k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
655
54k

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