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 Slide

  2. ֎দढ़ঘ 5PTIJIJTB5PNBUTV

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

    View Slide

  3. 4FSWJDF8PSLFSͱ͸
    3

    View Slide

  4. 4FSWJDF8PSLFS 48

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

    View Slide

  5. Α͘Θ͔Βͳ͍
    5

    View Slide

  6. 4FSWJDF8PSLFS 48

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

    View Slide

  7. 4FSWJDF8PSLFS 48

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

    View Slide

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


    8FCϖʔδ
    +BWB4DSJQUͷ࣮ߦ
    8

    View Slide

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

    8FCϖʔδ
    4FSWJDF8PSLFS

    9

    View Slide

  10. 4FSWJDF8PSLFS 48

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

    View Slide

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

    View Slide

  12. 4FSWJDF8PSLFS 48

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    31

    View Slide

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

    View Slide

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

    View Slide

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

    34

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    38

    View Slide

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

    View Slide

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

    View Slide

  41. 18"
    41

    View Slide

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

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

    View Slide

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

    View Slide

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


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

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

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

    View Slide

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

    View Slide

  49. ͦͷଞ࠷ۙͷಈ޲
    49

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide