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

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

Transcript

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

   View Slide

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