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.2k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
3
190
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
8
1.8k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
17
8.6k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
0
670
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
6
4.4k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
5
2.3k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
8
1.9k
E9ce07196f470caff07053e98a88fa9e?s=48 10shi10ma
2
380

Other Decks in Technology

See All in Technology
744a38d972036c3bd0bcdaddafdd5f26?s=48 mathetake
2
210
6afbe110d33ef7e859fb8649b86bae55?s=48 mashabow
0
120
E4159c65ac8decc882bfaf10088bd07e?s=48 daikimiura
5
1.7k
5b47136bedcba2799edf4fcd27ea66d7?s=48 yaegashi
0
130
9b2600a82821673d9d0f03cc6f7bc56e?s=48 kloudleinc
0
110
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
0
110
E8aaf6f975dda96c47412cf311089243?s=48 tadashi0713
6
1.6k
069cd7a173dfb7d46c8b6b90624f5bf1?s=48 nasrinjp
0
480
2b680c5f22146e764e2998dd4595ec93?s=48 sue445
0
150
64a4ba69d50590e592cd8e572454daa8?s=48 olegkovalov
1
340
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
3
1.1k
E598c2f9a8e5c94eea0e6505b4233d81?s=48 tomohide_tanaka
1
590

Featured

See All Featured
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
32
3.5k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
154
11k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
293
28k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
237
23k
282d599b414022eba5096510f675b6e2?s=48 chrislema
173
14k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
188
14k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
35
1.7k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
285
19k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
262
11k
79acae287842acf29084005533a7fb3b?s=48 hursman
108
9.3k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
73
7.6k

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