Service Worker

265edb69bfcd5cac012ad5a14f2e6e2f?s=47 OSCA
July 27, 2018

Service Worker

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

265edb69bfcd5cac012ad5a14f2e6e2f?s=128

OSCA

July 27, 2018
Tweet

Transcript

  1. 04$" ᖛ໺ Ұೋࡾ !FOHJOFFS@PTDB 4FSWJDF8PSLFS֓ཁ

  2. ࣗݾ঺հ © OSCA 04$"ᖛ໺ Ұೋࡾ ͸·ͷ ͔ͣ;Έ 4*FS ໷ܠࣸਅՈ 

    ʮ8&#ΤϯδχΞษڧձʯΛओ࠵  +BWB 1)1ܥͷ8&#ΤϯδχΞ  ਓ޻஌ೳ "* ͷ։ൃ΋΍ͬͯΔ  ݸਓͰ΋714आΓͯ8&#αʔϏεΛӡӦ͢Δͷ͕झຯ  ເͷࠃ ెาݍ಺ॅΈ  !FOHJOFFS@PTDB !PTDBQIPUP!EJTOFZ@PTDB Service Worker 
  3. 4FSWJDF8PSLFSͱ͸ʁ © OSCA Service Worker  8&#ϖʔδͷදࣔॲཧͱ͸ผʹɺ όοΫάϥϯυॲཧΛߦ͏ΠϕϯτۦಈͷεΫϦϓτॲཧɻ

  4. 4FSWJDF8PSLFSͱ͸ʁ © OSCA Service Worker  8&#ϖʔδͷදࣔॲཧͱ͸ผʹɺ όοΫάϥϯυॲཧΛߦ͏ΠϕϯτۦಈͷεΫϦϓτॲཧɻ l164)௨஌z΍zΩϟογϡzͳͲͷݴ༿ͱҰॹొ৔͢Δ͕ɺ ͦΕΛࢦ͢΋ͷͰ͸ͳ͘ɺͦΕΒͷϕʔεͱͳ͍ͬͯΔٕज़ɻ

    ·ͨ l18"zͱ͍͏ݴ༿ͱ΋Ұॹʹొ৔͢Δ͕ɺ 18"ΞϓϦέʔγϣϯΛߏ੒͢ΔཁૉͷҰͭͰ͋Δɻ 4FSWJDF8PSLFS 164)"1* 'FUDI #BDLHSPVOE4ZOD $BDIF4USBHF 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*ʯʮ4FSWJDF8PSLFSʯͷ͕ͭ஀ੜ͠·ͨ͠ɻ   © OSCA Service Worker  ػೳͱͯ͠੾Γग़͞Εͨ 4FSWJDF8PSLFS͸ɺΩϟογϡ Ҏ֎ͷ༻్Ͱͷར༻΋ظ଴͞Ε͍ͯΔɻ
  7. ରԠϒϥ΢β   © OSCA Service Worker 

  8. 8&#αΠτͷදࣔͱಉ࣌ʹɺ๚໰ऀͷϒϥ΢βʹɺ +BWB4DSJQUΛ༻͍ͯ 4FSWJDF8PSLFSΛΠϯετʔϧ͢Δɻ ͢Δͱ8&#αΠτΛ཭Εͨͱͯ͠΋ɺ όοΫάϥ΢ϯυͰॲཧΛಈ͔͢͜ͱ͕Ͱ͖Δɻ ˞஫ҙ˞ 4FSWJDF8PSLFSΛར༻͢Δ8&#αΠτ͸ɺ )5514ͷαΠτͰ͋Δඞཁ͕͋Δɻ ͲͷΑ͏ʹಈ͔͢ͷ͔ʁ ©

    OSCA Service Worker 
  9. 4FSWJDF8PSLFSͷΠϯετʔϧʹ͍ͭͯઆ໌͠·ͨ͠ɻ NJO ϥΠϒίʔσΟϯά © OSCA Service Worker 

  10. σϞͷϑΝΠϧߏ੒ © OSCA Service Worker  JOEFYIUNM ๚໰ऀ͕๚ΕΔϖʔδɻ ͜ͷϖʔδ಺ͷॲཧͰ 4FSWJDF8PSLFSΛΠϯετʔϧ͢Δ

    TXKT 4FSWJDF8PSLFSͷॲཧΛهड़͢Δ +BWB4DSJQUϑΝΠϧɻ ϒϥ΢βʹΠϯετʔϧ͞ΕΔɻ
  11. ࣍ͷΑ͏ͳ+BWB4DSJQUͷهड़Ͱɺ8&#αΠτͷ๚໰ऀͷϒ ϥ΢βʹɺ4FSWJDF8PSLFSεΫϦϓτΛΠϯετʔϧͰ͖ ·͢ɻ 4FSWJDF8PSLFSͷΠϯετʔϧ OBWJHBUPSTFSWJDF8PSLFSSFHJTUFS TXKT  ͋ͱ͸όοΫάϥ΢ϯυॲཧΛ TXKTʹهड़͢Δ͚ͩͰ͢ɻ ©

    OSCA Service Worker 
  12. JOEFYIUNM IUNM IFBE TDSJQU JG TFSWJDF8PSLFSJOOBWJHBUPS \ OBWJHBUPSTFSWJDF8PSLFSSFHJTUFS TXKT` 

    ^ TDSJQU IFBE CPEZ  লུ  CPEZ IUNM © OSCA Service Worker  ˞આ໌ͷͨΊɺΠϯετʔϧͷྫ֎ॲཧ΍࣮ߦλΠϛϯάΛߟྀ͍ͯ͠·ͤΜɻ࣮૷࣌ʹ͸஫ҙ͍ͯͩ͘͠͞ɻ
  13. 4FSWJDF8PSLFS͸ɺΠϕϯτۦಈͷ࣮ߦ؀ڥͰ͢ɻ ԿΒ͔ͷΠϕϯτΛΩοΧέʹॲཧ͕࣮ߦ͞Ε·͢ɻ 4FSWJDF 8PSLFS ͕࣮ߦ͞ΕΔΩοΧέ Πϕϯτ આ໌ JOTUBMM 4FSWJDF8PSLFS͕Πϯετʔϧ͞Εͨࡍ BDUJWBUF

    4FSWJDF8PSLFS͕༗ޮʹͳͬͨࡍ 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. 4FSWJDF8PSLFSͷԠ༻ྫ 164)௨஌ ϒϥ΢β͕164)௨஌Λड͚͚ͭͨ͜ͱΛτϦΨʔʹͯ͠ɺ ॲཧΛ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δɻ      

      + © OSCA Service Worker  164)"1*͕ 4FSWJDF8PSLFSʹ QVTIΠϕϯτΛ௥Ճͯ͘͠Ε͍ͯΔɻ Πϕϯτ આ໌ JOTUBMM 4FSWJDF8PSLFS͕Πϯετʔϧ͞Εͨࡍ BDUJWBUF 4FSWJDF8PSLFS͕༗ޮʹͳͬͨࡍ GFUDI ωοτϫʔΫʹϦιʔεΛऔಘ͢Δࡍ NFTTBHF ϝοηʔδΛड৴ͨ͠ࡍ QVTI 164)௨஌Λड৴ͨ͠ࡍ TFMGBEE&WFOU-JTUFOFS QVTI GVODUJPO FWFOU \ 164)௨஌Λड৴ͨ͠ࡍͷॲཧΛॻ͘ /PSUJGJDBUJPOΛදࣔ͢ΔͳͲ ^
  17. 4FSWJDF8PSLFSʹͳͥ஫໨͢΂͖ͳͷ͔ʁ © OSCA Service Worker  • εϚʔτϑΥϯ΍σεΫτοϓͷΞϓϦέʔγϣϯͱͷ ػೳ͕ࠩຒ·Δ͜ͱ͕ظ଴Ͱ͖Δɻ •

    18" 1SPHSFTTJWF8FC"QQMJDBUJPO ͷొ৔ʹΑΓɺ 8&#ͷٕज़ͰεϚʔτϑΥϯ΍σεΫτοϓͷΞϓϦΛ ࣮૷Ͱ͖ΔΑ͏ʹͳΔɻ
  18. ·ͱΊ • 8&#ը໘ͷඳࣸॲཧͱ͸ҧ͏ϨϕϧͰɺόοΫάϥϯυ ॲཧ͢Δ࢓૊Έ͕ 4FSWJDF8PSLFSɻ • ༷ʑͳ "1*ͱ૊Έ߹ΘͤΔ͜ͱͰɺࠓ·Ͱ8&#Ͱ࣮ݱ͕ ೉͔ͬͨ͠ػೳ 164)௨஌ͳͲ

    ͕࣮ݱͰ͖ͭͭ͋Δɻ • ωΠςΟϒΞϓϦͱͷػೳࠩΛຒΊΔ8&#ٕज़ͱͯ͠ɺ ࠓޙͷීٴ͕஫໨͞ΕΔɻ © OSCA Service Worker