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

Service Worker

OSCA
July 27, 2018

Service Worker

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

OSCA

July 27, 2018
Tweet

More Decks by OSCA

Other Decks in Technology

Transcript

  1. 04$" ᖛ໺ Ұೋࡾ

    [email protected]
    4FSWJDF8PSLFS֓ཁ

    View Slide

  2. ࣗݾ঺հ
    © OSCA
    04$"ᖛ໺ Ұೋࡾ ͸·ͷ ͔ͣ;Έ

    4*FS ໷ܠࣸਅՈ
    ʮ8ΤϯδχΞษڧձʯΛओ࠵
    +BWB 1)1ܥͷ8ΤϯδχΞ
    ਓ޻஌ೳ "*
    ͷ։ൃ΋΍ͬͯΔ
    ݸਓͰ΋714आΓͯ8αʔϏεΛӡӦ͢Δͷ͕झຯ
    ເͷࠃ ెาݍ಺ॅΈ
    [email protected] [email protected]
    Service Worker

    View Slide

  3. 4FSWJDF8PSLFSͱ͸ʁ
    © OSCA
    Service Worker
    8ϖʔδͷදࣔॲཧͱ͸ผʹɺ
    όοΫάϥϯυॲཧΛߦ͏ΠϕϯτۦಈͷεΫϦϓτॲཧɻ

    View Slide

  4. 4FSWJDF8PSLFSͱ͸ʁ
    © OSCA
    Service Worker
    8ϖʔδͷදࣔॲཧͱ͸ผʹɺ
    όοΫάϥϯυॲཧΛߦ͏ΠϕϯτۦಈͷεΫϦϓτॲཧɻ
    l164)௨஌z΍zΩϟογϡzͳͲͷݴ༿ͱҰॹొ৔͢Δ͕ɺ
    ͦΕΛࢦ͢΋ͷͰ͸ͳ͘ɺͦΕΒͷϕʔεͱͳ͍ͬͯΔٕज़ɻ
    ·ͨ l18"zͱ͍͏ݴ༿ͱ΋Ұॹʹొ৔͢Δ͕ɺ
    18"ΞϓϦέʔγϣϯΛߏ੒͢ΔཁૉͷҰͭͰ͋Δɻ
    4FSWJDF8PSLFS
    164)"1* 'FUDI #BDLHSPVOE4ZOD
    $BDIF4USBHF
    164)௨஌ ϩʔΧϧΩϟογϡ όοΫάϥ΢ϯυಉظ

    View Slide

  5. Ҏલʹ Application Cache ͱ͍͏΋ͷ͕1ID9;/
    Q]VT^9;2YNO`M\X^YPUWYNO`B:[email protected]
    Q]VT^9>[email protected]?9;/
    ͦ΋ͦ΋ͷܦҢ

    +,-&"!++
    &)#)*(#
    ' $(%+
    949A5H.0A2=H84H.C
    @A<
    >2D:/
    F<@[aR_\Z`BQ]VT^MSbWac`?6JE5
    [email protected] LKJG3BAID9;/
    © OSCA
    Service Worker

    View Slide

  6. ͦ΋ͦ΋ͷܦҢ






    ʮΩϟογϡʯʹٻΊΒΕΔ࢓༷Λ࠶੔ཧ͠ͳ͓͠ɺඞཁͳ
    ػೳΛ"1*෼ׂͨ͠ͱ͜Ζɺʮ'FUDI"1*ʯʮ$BDIF
    4USBHF"1*ʯʮ4FSWJDF8PSLFSʯͷ͕ͭ஀ੜ͠·ͨ͠ɻ



    © OSCA
    Service Worker
    ػೳͱͯ͠੾Γग़͞Εͨ 4FSWJDF8PSLFS͸ɺΩϟογϡ
    Ҏ֎ͷ༻్Ͱͷར༻΋ظ଴͞Ε͍ͯΔɻ

    View Slide

  7. ରԠϒϥ΢β



    © OSCA
    Service Worker

    View Slide

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

    View Slide

  9. 4FSWJDF8PSLFSͷΠϯετʔϧʹ͍ͭͯઆ໌͠·ͨ͠ɻ
    NJO

    ϥΠϒίʔσΟϯά
    © OSCA
    Service Worker

    View Slide

  10. σϞͷϑΝΠϧߏ੒
    © OSCA
    Service Worker
    JOEFYIUNM
    ๚໰ऀ͕๚ΕΔϖʔδɻ
    ͜ͷϖʔδ಺ͷॲཧͰ 4FSWJDF8PSLFSΛΠϯετʔϧ͢Δ
    TXKT
    4FSWJDF8PSLFSͷॲཧΛهड़͢Δ +BWB4DSJQUϑΝΠϧɻ
    ϒϥ΢βʹΠϯετʔϧ͞ΕΔɻ

    View Slide

  11. ࣍ͷΑ͏ͳ+BWB4DSJQUͷهड़Ͱɺ8αΠτͷ๚໰ऀͷϒ
    ϥ΢βʹɺ4FSWJDF8PSLFSεΫϦϓτΛΠϯετʔϧͰ͖
    ·͢ɻ
    4FSWJDF8PSLFSͷΠϯετʔϧ
    OBWJHBUPSTFSWJDF8PSLFSSFHJTUFS TXKT

    ͋ͱ͸όοΫάϥ΢ϯυॲཧΛ TXKTʹهड़͢Δ͚ͩͰ͢ɻ
    © OSCA
    Service Worker

    View Slide

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

    ^
    TDSJQU
    IFBE
    CPEZ
    লུ
    CPEZ
    IUNM
    © OSCA
    Service Worker
    ˞આ໌ͷͨΊɺΠϯετʔϧͷྫ֎ॲཧ΍࣮ߦλΠϛϯάΛߟྀ͍ͯ͠·ͤΜɻ࣮૷࣌ʹ͸஫ҙ͍ͯͩ͘͠͞ɻ

    View Slide

  13. 4FSWJDF8PSLFS͸ɺΠϕϯτۦಈͷ࣮ߦ؀ڥͰ͢ɻ
    ԿΒ͔ͷΠϕϯτΛΩοΧέʹॲཧ͕࣮ߦ͞Ε·͢ɻ
    4FSWJDF 8PSLFS ͕࣮ߦ͞ΕΔΩοΧέ
    Πϕϯτ આ໌
    JOTUBMM 4FSWJDF8PSLFS͕Πϯετʔϧ͞Εͨࡍ
    BDUJWBUF 4FSWJDF8PSLFS͕༗ޮʹͳͬͨࡍ
    GFUDI ωοτϫʔΫʹϦιʔεΛऔಘ͢Δࡍ
    NFTTBHF ϝοηʔδΛड৴ͨ͠ࡍ
    © OSCA
    Service Worker
    جຊΠϕϯτ

    View Slide

  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 FWFOUSFRVFTUVSMFWFOUSFRVFTUVSM

    ^

    TFMGBEE&WFOU-JTUFOFS NFTTBHF GVODUJPO FWFOU
    \
    DPOTPMFMPH NFTTBHJOH

    ^

    View Slide

  15. ! 3
    164)
    %HJ:A( 8*-+08DK'&5'
    1+0(/)7$
    !
    +
    FC=>J:LE
    %?LGIMB(;LJ9L21.-+08DK606,7&5'1+0(/)7$
    ! "
    +
    © OSCA
    Service Worker

    View Slide

  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Λදࣔ͢ΔͳͲ

    ^

    View Slide

  17. 4FSWJDF8PSLFSʹͳͥ஫໨͢΂͖ͳͷ͔ʁ
    © OSCA
    Service Worker
    • εϚʔτϑΥϯ΍σεΫτοϓͷΞϓϦέʔγϣϯͱͷ
    ػೳ͕ࠩຒ·Δ͜ͱ͕ظ଴Ͱ͖Δɻ
    • 18" 1SPHSFTTJWF8FC"QQMJDBUJPO
    ͷొ৔ʹΑΓɺ
    8ͷٕज़ͰεϚʔτϑΥϯ΍σεΫτοϓͷΞϓϦΛ
    ࣮૷Ͱ͖ΔΑ͏ʹͳΔɻ

    View Slide

  18. ·ͱΊ
    • 8ը໘ͷඳࣸॲཧͱ͸ҧ͏ϨϕϧͰɺόοΫάϥϯυ
    ॲཧ͢Δ࢓૊Έ͕ 4FSWJDF8PSLFSɻ
    • ༷ʑͳ "1*ͱ૊Έ߹ΘͤΔ͜ͱͰɺࠓ·Ͱ8Ͱ࣮ݱ͕
    ೉͔ͬͨ͠ػೳ 164)௨஌ͳͲ
    ͕࣮ݱͰ͖ͭͭ͋Δɻ
    • ωΠςΟϒΞϓϦͱͷػೳࠩΛຒΊΔ8ٕज़ͱͯ͠ɺ
    ࠓޙͷීٴ͕஫໨͞ΕΔɻ
    © OSCA
    Service Worker

    View Slide