Service Worker

2018年07月28日(金) に開催された「WEBエンジニア勉強会 #08」で Service Worker について発表しました。

Transcript

1. 04$"
   ᖛ໺ Ұೋࡾ !FOHJOFFS@PTDB 4FSWJDF
   8PSLFS
   ֓ཁ
2. ࣗݾ঺հ © OSCA 04$"
   
   ᖛ໺ Ұೋࡾ ͸·ͷ ͔ͣ;Έ 4*FS 
   ໷ܠࣸਅՈ
   ʮ8&#ΤϯδχΞษڧձʯΛओ࠵
   +BWB
   1)1
   ܥͷ8&#ΤϯδχΞ
   ਓ޻஌ೳ "* ͷ։ൃ΋΍ͬͯΔ
   ݸਓͰ΋714आΓͯ8&#αʔϏεΛӡӦ͢Δͷ͕झຯ
   ເͷࠃ ెาݍ಺ॅΈ
   !FOHJOFFS@PTDB 
   !PTDBQIPUP
   
   !EJTOFZ@PTDB Service Worker
   
3. 4FSWJDF
   8PSLFS
   ͱ͸ʁ © OSCA Service Worker
    8&#ϖʔδͷදࣔॲཧͱ͸ผʹɺ όοΫάϥϯυॲཧΛߦ͏ΠϕϯτۦಈͷεΫϦϓτॲཧɻ
4. 4FSWJDF
   8PSLFS
   ͱ͸ʁ © OSCA Service Worker
    8&#ϖʔδͷදࣔॲཧͱ͸ผʹɺ όοΫάϥϯυॲཧΛߦ͏ΠϕϯτۦಈͷεΫϦϓτॲཧɻ l164)௨஌z΍zΩϟογϡzͳͲͷݴ༿ͱҰॹొ৔͢Δ͕ɺ ͦΕΛࢦ͢΋ͷͰ͸ͳ͘ɺͦΕΒͷϕʔεͱͳ͍ͬͯΔٕज़ɻ ·ͨ l18"z
   ͱ͍͏ݴ༿ͱ΋Ұॹʹొ৔͢Δ͕ɺ 18"
   ΞϓϦέʔγϣϯΛߏ੒͢ΔཁૉͷҰͭͰ͋Δɻ 4FSWJDF
   8PSLFS 164)
   "1* 'FUDI #BDLHSPVOE
   4ZOD $BDIF
   4USBHF 164)௨஌ ϩʔΧϧΩϟογϡ όοΫάϥ΢ϯυಉظ
5. Ҏલʹ Application Cache ͱ͍͏΋ͷ͕1ID9;/ Q]VT^9;2YNO`M\X^YPUWYNO`B:J@. Q]VT^9>7KJ@23
   ?9;/ ͦ΋ͦ΋ͷܦҢ   +,-&"!++ &)#)*(# ' $(%+ 949A5H.0A2=H84H. C @A< >2D:/ F<@[aR_\Z`BQ]VT^MSbWac`?6J
   E5 92@235 LKJG3BAID9;/ © OSCA Service Worker 
6. ͦ΋ͦ΋ͷܦҢ         ʮΩϟογϡʯʹٻΊΒΕΔ࢓༷Λ࠶੔ཧ͠ͳ͓͠ɺඞཁͳ ػೳΛ"1*෼ׂͨ͠ͱ͜Ζɺʮ'FUDI
   "1*ʯʮ$BDIF
   4USBHF
   "1*ʯʮ4FSWJDF
   8PSLFSʯͷ͕ͭ஀ੜ͠·ͨ͠ɻ   © OSCA Service Worker
    ػೳͱͯ͠੾Γग़͞Εͨ 4FSWJDF
   8PSLFS
   ͸ɺΩϟογϡ Ҏ֎ͷ༻్Ͱͷར༻΋ظ଴͞Ε͍ͯΔɻ
7. ରԠϒϥ΢β  
    © OSCA Service Worker 
8. 8&#αΠτͷදࣔͱಉ࣌ʹɺ๚໰ऀͷϒϥ΢βʹɺ +BWB4DSJQUΛ༻͍ͯ 4FSWJDF
   8PSLFS
   ΛΠϯετʔϧ͢Δɻ ͢Δͱ8&#αΠτΛ཭Εͨͱͯ͠΋ɺ όοΫάϥ΢ϯυͰॲཧΛಈ͔͢͜ͱ͕Ͱ͖Δɻ ˞஫ҙ˞ 4FSWJDF
   8PSLFS
   Λར༻͢Δ8&#αΠτ͸ɺ )5514ͷαΠτͰ͋Δඞཁ͕͋Δɻ ͲͷΑ͏ʹಈ͔͢ͷ͔ʁ © OSCA Service Worker
   
9. 4FSWJDF
   8PSLFS
   ͷΠϯετʔϧʹ͍ͭͯઆ໌͠·ͨ͠ɻ NJO ϥΠϒίʔσΟϯά © OSCA Service Worker
   
10. σϞͷϑΝΠϧߏ੒ © OSCA Service Worker
     JOEFYIUNM ๚໰ऀ͕๚ΕΔϖʔδɻ ͜ͷϖʔδ಺ͷॲཧͰ 4FSWJDF
    8PSLFS
    ΛΠϯετʔϧ͢Δ TXKT 4FSWJDF
    8PSLFS
    ͷॲཧΛهड़͢Δ +BWB4DSJQU
    ϑΝΠϧɻ ϒϥ΢βʹΠϯετʔϧ͞ΕΔɻ
11. ࣍ͷΑ͏ͳ+BWB4DSJQUͷهड़Ͱɺ8&#αΠτͷ๚໰ऀͷϒ ϥ΢βʹɺ4FSWJDF
    8PSLFS
    εΫϦϓτΛΠϯετʔϧͰ͖ ·͢ɻ 4FSWJDF
    8PSLFS
    ͷΠϯετʔϧ OBWJHBUPSTFSWJDF8PSLFSSFHJTUFS TXKT  ͋ͱ͸όοΫάϥ΢ϯυॲཧΛ TXKT
    ʹهड़͢Δ͚ͩͰ͢ɻ © OSCA Service Worker
    
12. JOEFYIUNM IUNM IFBE TDSJQU JG TFSWJDF8PSLFS
    JO
    OBWJHBUPS
    \ OBWJHBUPSTFSWJDF8PSLFSSFHJTUFS TXKT`  ^ TDSJQU IFBE CPEZ  লུ  CPEZ IUNM © OSCA Service Worker
     ˞આ໌ͷͨΊɺΠϯετʔϧͷྫ֎ॲཧ΍࣮ߦλΠϛϯάΛߟྀ͍ͯ͠·ͤΜɻ࣮૷࣌ʹ͸஫ҙ͍ͯͩ͘͠͞ɻ
13. 4FSWJDF
    8PSLFS͸ɺΠϕϯτۦಈͷ࣮ߦ؀ڥͰ͢ɻ ԿΒ͔ͷΠϕϯτΛΩοΧέʹॲཧ͕࣮ߦ͞Ε·͢ɻ 4FSWJDF 8PSLFS ͕࣮ߦ͞ΕΔΩοΧέ Πϕϯτ આ໌ JOTUBMM 4FSWJDF
    8PSLFS
    ͕Πϯετʔϧ͞Εͨࡍ BDUJWBUF 4FSWJDF
    8PSLFS
    ͕༗ޮʹͳͬͨࡍ GFUDI ωοτϫʔΫʹϦιʔεΛऔಘ͢Δࡍ NFTTBHF ϝοηʔδΛड৴ͨ͠ࡍ © OSCA Service Worker
     جຊΠϕϯτ
14. TXKT © OSCA Service Worker
     TFMGBEE&WFOU-JTUFOFS JOTUBMM
    GVODUJPO FWFOU
    \ DPOTPMFMPH JOTUBMMJOH  ^  TFMGBEE&WFOU-JTUFOFS BDUJWBUF
    GVODUJPO FWFOU
    \ DPOTPMFMPH BDUJWBUJOH  ^  TFMGBEE&WFOU-JTUFOFS GFUDI
    GVODUJPO FWFOU
    \ DPOTPMFMPH GFUDIJOH  DPOTPMFMPH 
    FWFOUSFRVFTUVSM
    
    FWFOUSFRVFTUVSM  ^  TFMGBEE&WFOU-JTUFOFS NFTTBHF
    GVODUJPO FWFOU
    \ DPOTPMFMPH NFTTBHJOH  ^ 
15. !  3 164) %HJ:A( 8*-+08DK<M28 '&5' 1+0(/)7$ !    + FC=>J:LE %?LGIMB(;LJ9L21.-+08DK<M2#@MF04 606,7&5'1+0(/)7$ !    "  + © OSCA Service Worker
    
16. 4FSWJDF
    8PSLFS
    ͷԠ༻ྫ 
    164)௨஌ ϒϥ΢β͕164)௨஌Λड͚͚ͭͨ͜ͱΛτϦΨʔʹͯ͠ɺ ॲཧΛ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δɻ         + © OSCA Service Worker
     164)
    "1*
    ͕ 4FSWJDF
    8PSLFS
    ʹ QVTI
    ΠϕϯτΛ௥Ճͯ͘͠Ε͍ͯΔɻ Πϕϯτ આ໌ JOTUBMM 4FSWJDF
    8PSLFS
    ͕Πϯετʔϧ͞Εͨࡍ BDUJWBUF 4FSWJDF
    8PSLFS
    ͕༗ޮʹͳͬͨࡍ GFUDI ωοτϫʔΫʹϦιʔεΛऔಘ͢Δࡍ NFTTBHF ϝοηʔδΛड৴ͨ͠ࡍ QVTI 164)௨஌Λड৴ͨ͠ࡍ TFMGBEE&WFOU-JTUFOFS QVTI
    GVODUJPO FWFOU
    \ 
    164)௨஌Λड৴ͨ͠ࡍͷॲཧΛॻ͘ /PSUJGJDBUJPOΛදࣔ͢ΔͳͲ ^
17. 4FSWJDF
    8PSLFS
    ʹͳͥ஫໨͢΂͖ͳͷ͔ʁ © OSCA Service Worker
     • εϚʔτϑΥϯ΍σεΫτοϓͷΞϓϦέʔγϣϯͱͷ ػೳ͕ࠩຒ·Δ͜ͱ͕ظ଴Ͱ͖Δɻ • 18"
    1SPHSFTTJWF
    8FC
    "QQMJDBUJPO
    ͷొ৔ʹΑΓɺ 8&#ͷٕज़ͰεϚʔτϑΥϯ΍σεΫτοϓͷΞϓϦΛ ࣮૷Ͱ͖ΔΑ͏ʹͳΔɻ
18. ·ͱΊ • 8&#ը໘ͷඳࣸॲཧͱ͸ҧ͏ϨϕϧͰɺόοΫάϥϯυ ॲཧ͢Δ࢓૊Έ͕ 4FSWJDF
    8PSLFSɻ • ༷ʑͳ "1*
    ͱ૊Έ߹ΘͤΔ͜ͱͰɺࠓ·Ͱ8&#Ͱ࣮ݱ͕ ೉͔ͬͨ͠ػೳ 164)௨஌ͳͲ ͕࣮ݱͰ͖ͭͭ͋Δɻ • ωΠςΟϒΞϓϦͱͷػೳࠩΛຒΊΔ8&#ٕज़ͱͯ͠ɺ ࠓޙͷීٴ͕஫໨͞ΕΔɻ © OSCA Service Worker