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

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

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

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

Toshihisa Tomatsu

September 26, 2020
Tweet

More Decks by Toshihisa Tomatsu

Other Decks in Technology

Transcript

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

    View full-size slide

  2. ֎দढ़ঘ 5PTIJIJTB5PNBUTV

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

    View full-size slide

  3. 4FSWJDF8PSLFSͱ͸
    3

    View full-size slide

  4. 4FSWJDF8PSLFS 48

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

    View full-size slide

  5. Α͘Θ͔Βͳ͍
    5

    View full-size slide

  6. 4FSWJDF8PSLFS 48

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

    View full-size slide

  7. 4FSWJDF8PSLFS 48

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

    View full-size slide

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


    8FCϖʔδ
    +BWB4DSJQUͷ࣮ߦ
    8

    View full-size slide

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

    8FCϖʔδ
    4FSWJDF8PSLFS

    9

    View full-size slide

  10. 4FSWJDF8PSLFS 48

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

    View full-size slide

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

    View full-size slide

  12. 4FSWJDF8PSLFS 48

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. 4FSWJDF8PSLFSͱ͸
    8FCϖʔδͷϥΠϑλΠϜΛ௒͑ͯ
    αʔϏε FH1VTI௨஌ɺΦϑϥΠϯମݧ

    ΛఏڙͰ͖Δ΋ͷ
    8FCϖʔδ
    48
    +4
    )5.-
    $44

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. Ͱ͖Δ͜ͱ
    ᶃ8FCϖʔδ͔Βαʔόʔ΁ͷϦΫΤετΛϑοΫͰ͖Δ
    ˠΩϟογϡͷ׆༻ ΦϑϥΠϯମݧɺදࣔ଎౓ͷߴ଎Խ

    ᶄ8FCϖʔδΛ։͍ͯແͯ͘΋ɺಛఆͷॲཧΛߦ͑Δ
    ˠϓογϡ௨஌
    ᶅ48ΛΠϯετʔϧͯ͠ɺ8FCΞϓϦΛ18"ͱͯ͠Πϯετʔϧ
    ˠ"EEUP)PNF4DSFFO ")4

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    31

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    34

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    '$.Λ࢖͏ͷ͕Ұൠత
    ϖΠϩʔυͷ҉߸ԽͳͲ໘౗ͳ
    ॲཧΛ೚ͤΕΔ

    View full-size slide

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

    38

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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


    w 5XJUUFS
    w πΠʔτ਺૿Ճɺ௚ؼ཰ݮগ
    IUUQTEFWFMPQFSTHPPHMFDPNXFCTIPXDBTFUXJUUFS

    w ೔ܦ
    w ίϯόʔδϣϯ ձһొ࿥
    ૿Ճɺ೔ͷΞΫςΟϒϢʔβʔ਺૿Ճ
    IUUQTEFWFMPQFSTHPPHMFDPNXFCTIPXDBTFOJLLFJ
    44

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. 18"ͷϝϦοτɾσϝϦοτ
    w ϝϦοτ

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

    w ΞϓϦετΞܦ༝Ͱͷू٬͕Ͱ͖ͳ͍ 58"

    w J04Ͱ͸Ұ෦ػೳ੍͕ݶ͞ΕΔ
    w ωΠςΟϒͷମݧʹྼΔ෦෼͸΋ͪΖΜ͋Γͦ͏
    ैདྷͷ8FCͷ
    Ԇ௕ઢ্Ͱগͣͭ͠௥Ճ͍͚ͯ͠Δ
    47

    View full-size slide

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

    View full-size slide

  48. ͦͷଞ࠷ۙͷಈ޲
    49

    View full-size slide

  49. ݱঢ়ͱࠓޙͷมԽ
    8FCΞϓϦ
    4FSWJDF8PSFLS
    ৽͍͠
    "1*
    ৽͍͠
    "1*
    ৽͍͠
    "1*
    48্Ͱ࣮ݱͰ͖Δ
    "1*͕૿͍͑ͯ͘
    ؆୯ʹ͔͚Δ
    Α͏ʹ
    ϕʔεʹͳΔ
    ߟ͑΍ٕज़͸
    ग़དྷ্͕ͬͯͦ͏
    50

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide