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

自社サイトをPWA化した話

 自社サイトをPWA化した話

KeitaroOkamura

September 20, 2018
Tweet

More Decks by KeitaroOkamura

Other Decks in Technology

Transcript

  1. 1
    ࣗࣾαΠτΛ
    18"Խͨ͠࿩
    ࣾ಺-5େձ

    View full-size slide

  2. 2
    1SPGJMF
    ໊લɿQFUFS
    झຯɿ௼ΓʢΤΪϯάʣ

    View full-size slide

  3. 3
    ✨18"ରԠ͠·ͨ͠✨

    View full-size slide

  4. 4
    ͳͥ18"ରԠͨ͠ͷ͔ʁ
    ͱ͋ΔҊ݅Ͱ18"։ൃͷ࿩͕ڍ͕Γɺ
    ͦͷௐࠪͷͨΊ✏
    ࣗࣾαΠτΛ18"Խ͢Ε͹
    18"ؔ࿈ͷ͓࢓ࣄ͕
    ࠓޙೖͬͯ͘Δ͔΋ɾɾɾʁ✨

    View full-size slide

  5. 5
    ͦ΋ͦ΋ɺࣗ෼ͷखฑͷΑ͏ʹ
    ஻͍ͬͯ·͕͢ɾɾɾ

    View full-size slide

  6. 6
    18"ରԠͨ͠ͷ͸
    8BTBCJ͞Μ ✨
    ϨϏϡͨ͠ਓʢসʣ

    View full-size slide

  7. 7
    18"ͷ։ൃͱ͔ͨ͜͠ͱͳ͍͊ɾɾɾ
    Α͠ɺϨϏϡ͍ͭͰʹษڧ͠Αʂ

    View full-size slide

  8. 8
    18"ͬͯͳʹʁ
    ωΠςΟϒΞϓϦͷΑ͏ͳ69Λ
    ϒϥ΢β"1*ʹΑͬͯ
    ఏڙ͢Δ࢓૊Έ

    View full-size slide

  9. 9
    ʘ͔ΜͨΜ̏εςοϓʗ
    NBOJGFTUKTPO
    Λஔ͘
    4FSWJDF8PSLFS
    εΫϦϓτ࡞੒
    4FSWJDF8PSLFS
    ʹొ࿥

    View full-size slide

  10. 10
    4FSWJDF8PSLFSͷϥΠϑαΠΫϧ
    Λཧղ͢Ε͹ɺ
    ܅΋18"ΤϯδχΞͩʂʢۃ࿦ʣ

    View full-size slide

  11. 11
    4FSWJDF8PSLFS
    ͬͯͳʹʁ
    ϒϥ΢β͕8FCϖʔδͱ͸ผʹ
    όοΫάϥ΢ϯυͰ࣮ߦ͢Δ
    +BWB4DSJQU؀ڥ

    View full-size slide

  12. 12
    ΫϥΠΞϯτ αʔόʔ
    HTTP
    request
    response

    View full-size slide

  13. 13
    ΫϥΠΞϯτ αʔόʔ
    4FSWJDF8PSLFS

    View full-size slide

  14. 14
    ΫϥΠΞϯτ αʔόʔ
    4FSWJDF8PSLFS
    Cache Storage
    IndexedDB
    σʔλΛอଘΩϟογϡ

    View full-size slide

  15. 15
    4FSWJDF8PSLFSͷ
    ϥΠϑαΠΫϧ

    View full-size slide

  16. 16
    ΫϥΠΞϯτ 4FSWJDF8PSLFS
    4FSWJDF8PSLFSʹొ࿥
    4FSWJDF8PSLFSΛ࢖͏ʹ͸ɺ·ͣొ࿥͢Δඞཁ͕͋Γ·͢ɻ
    register

    View full-size slide

  17. 17
    ΫϥΠΞϯτ 4FSWJDF8PSLFS
    ొ࿥͞ΕΔͱ࣍ʹ4FSWJDF8PSLFS͕ϒϥ
    ΢β؀ڥʹΠϯετʔϧ͞ΕɺҰछͷৗறϓ
    ϩάϥϜͱͳΓ·͢ɻ
    register installing

    View full-size slide

  18. 18
    ΫϥΠΞϯτ 4FSWJDF8PSLFS
    4FSWJDF8PSLFS͕ଘࡏ͠ͳ͚Ε͹JOTUBMMJOH
    ঢ়ଶͷ͋ͱ͙͢ʹɺBDUJWBUFঢ়ଶʹͳΔ͕ɺ
    طʹ4FSWJDF8PSLFS͕ଘࡏ͢Δ৔߹͸ɺ
    XBJUJOHঢ়ଶʹҠߦ͠·͢
    register installing waiting

    View full-size slide

  19. 19
    ΫϥΠΞϯτ 4FSWJDF8PSLFS
    4FSWJDF8PSLFS͕ར༻Ͱ͖Δ४උ͕੔ͬͨঢ়
    ଶ͕BDUJWBUF
    ͔͠͠ɺ࣮ࡍʹΫϥΠΞϯτΛίϯτϩʔϧ͢
    Δ͜ͱ͸Ͱ͖ͳ͍
    register installing waiting activate

    View full-size slide

  20. 20
    ΫϥΠΞϯτ 4FSWJDF8PSLFS
    BDUJWBUFঢ়ଶͰ଴ػͯ͠ɺ
    ࣮֬ʹ҆શͳ࣌ʢը໘͕΋͏Ұ౓ߋ৽͞Εͨ࣌ʣʹ DPOUSPMMFS
    ʹͳΔ
    DPOUSPMMFSʹͳͬͯॳΊͯωοτϫʔΫϦΫΤετΛίϯτϩʔ
    ϧ͢Δ͜ͱ͕Ͱ͖Δ
    register installing waiting activate
    controller

    View full-size slide

  21. 21
    ϨϏϡͰࠔͬͨ͜ͱ
    1. IUUQT͔MPDBMIPTU্Ͱ͔͠ಈ͔ͳ͍
    2. ΊͬͪΌΩϟογϡ͞ΕΔ͠ɺ
    σόοΫͬͯͲ͏ͨ͠Β͍͍ΜͩΖ͏

    View full-size slide

  22. 22
    1. ʹؔͯ͠
    Vagrant ʹ͸ port forwarding
    ͱ͍͏ͷ͕͋Γɺ
    localhost ʹΞΫηε͢ΔͱɺԾ
    ૝؀ڥʹΞΫηεͯ͘͠ΕΔͷͰɺ
    ϩʔΧϧ։ൃ؀ڥͰ
    PWA Λ֬ೝͰ͖ΔΑ͏ʹͨ͠

    View full-size slide

  23. 23
    2. ʹؔͯ͠
    Chrome DevTools ͷ৽͍͠
    [Application] ύωϧΛ࢖༻͠
    ͯ Service Worker ͷσόοά
    ΍ΩϟογϡͷௐࠪΛߦ͍·͠
    ͨ

    View full-size slide

  24. 25
    ࠓճͷ18"Խʹ͍ͭͯ
    طଘͷৼΔ෣͍Λकͬͨ··ߴ଎Խ͢Δ
    4FSWJDF8PSLFSͷ࢖͍ํ

    View full-size slide

  25. 26
    ࠓޙͷ18"ʹ͍ͭͯ
    4FSWJDF8PSLFSͰ͔͠࠶ݱͰ͖ͳ͍ػೳͳͲɺ
    ༷ʑͳ࢖͍ํ͕͋Γ·͢
    ࠓͷ͏ͪʹܦݧ஋ΛஷΊ͓͚ͯ͹ɾɾɾ
    ࠓޙɺϏδωε޲͚αʔϏεʹར༻͢Δ͜ͱ͕
    Ͱ͖Δ͔΋͠Ε·ͤΜ

    View full-size slide