自社サイトをPWA化した話

1. 1 ࣗࣾαΠτΛ
   18"Խͨ͠࿩ ࣾ಺-5େձ
   
   
2. 2 1SPGJMF
   ໊લɿQFUFS
   झຯɿ௼ΓʢΤΪϯάʣ
3. 3 ✨
   18"
   ରԠ͠·ͨ͠✨
4. 4 ͳͥ
   18"
   ରԠͨ͠ͷ͔ʁ ͱ͋ΔҊ݅Ͱ
   18"
   ։ൃͷ࿩͕ڍ͕Γɺ
   ͦͷௐࠪͷͨΊ✏
   ࣗࣾαΠτΛ
   18"
   Խ͢Ε͹
   18"
   ؔ࿈ͷ͓࢓ࣄ͕
   ࠓޙೖͬͯ͘Δ͔΋ɾɾɾʁ✨
5. 5 ͦ΋ͦ΋ɺࣗ෼ͷखฑͷΑ͏ʹ
   ஻͍ͬͯ·͕͢ɾɾɾ
6. 6 18"
   ରԠͨ͠ͷ͸
   8BTBCJ
   ͞Μ ✨ ϨϏϡͨ͠ਓʢসʣ
7. 7 18"
   ͷ։ൃͱ͔ͨ͜͠ͱͳ͍͊ɾɾɾ
   Α͠ɺϨϏϡ͍ͭͰʹษڧ͠Αʂ
8. 8 18"
   ͬͯͳʹʁ ωΠςΟϒΞϓϦͷΑ͏ͳ
   69
   Λ ϒϥ΢β
   "1*
   ʹΑͬͯ
   ఏڙ͢Δ࢓૊Έ
9. 9 ʘ
   ͔ΜͨΜ
   ̏
   εςοϓ
   ʗ NBOJGFTUKTPO
   Λஔ͘ 4FSWJDF
   8PSLFS
   εΫϦϓτ࡞੒ 4FSWJDF
   8PSLFS ʹొ࿥
10. 10 4FSWJDF
    8PSLFS
    ͷϥΠϑαΠΫϧ Λཧղ͢Ε͹ɺ
    ܅΋
    18"
    ΤϯδχΞͩʂʢۃ࿦ʣ
11. 11 4FSWJDF
    8PSLFS
    ͬͯͳʹʁ ϒϥ΢β͕
    8FC
    ϖʔδͱ͸ผʹ όοΫάϥ΢ϯυͰ࣮ߦ͢Δ +BWB4DSJQU
    ؀ڥ
12. 12 ΫϥΠΞϯτ αʔόʔ HTTP request response
13. 13 ΫϥΠΞϯτ αʔόʔ 4FSWJDF
    8PSLFS
14. 14 ΫϥΠΞϯτ αʔόʔ 4FSWJDF
    8PSLFS Cache Storage IndexedDB σʔλΛอଘ
    
    Ωϟογϡ
15. 15 4FSWJDF
    8PSLFS
    ͷ
    ϥΠϑαΠΫϧ
16. 16 ΫϥΠΞϯτ 4FSWJDF
    8PSLFS 4FSWJDF
    8PSLFS
    ʹొ࿥
    4FSWJDF
    8PSLFS
    Λ࢖͏ʹ͸ɺ·ͣొ࿥͢Δඞཁ͕͋Γ·͢ɻ register
17. 17 ΫϥΠΞϯτ 4FSWJDF
    8PSLFS ొ࿥͞ΕΔͱ࣍ʹ
    4FSWJDF
    8PSLFS
    ͕ϒϥ ΢β؀ڥʹΠϯετʔϧ͞ΕɺҰछͷৗறϓ ϩάϥϜͱͳΓ·͢ɻ register installing
18. 18 ΫϥΠΞϯτ 4FSWJDF
    8PSLFS 4FSWJDF
    8PSLFS
    ͕ଘࡏ͠ͳ͚Ε͹
    JOTUBMMJOH
    ঢ়ଶͷ͋ͱ͙͢ʹɺBDUJWBUF
    ঢ়ଶʹͳΔ͕ɺ
    طʹ
    4FSWJDF
    8PSLFS
    ͕ଘࡏ͢Δ৔߹͸ɺ
    XBJUJOH
    ঢ়ଶʹҠߦ͠·͢ register installing waiting
19. 19 ΫϥΠΞϯτ 4FSWJDF
    8PSLFS 4FSWJDF
    8PSLFS
    ͕ར༻Ͱ͖Δ४උ͕੔ͬͨঢ় ଶ͕BDUJWBUF
    ͔͠͠ɺ࣮ࡍʹΫϥΠΞϯτΛίϯτϩʔϧ͢ Δ͜ͱ͸Ͱ͖ͳ͍ register installing waiting activate
20. 20 ΫϥΠΞϯτ 4FSWJDF
    8PSLFS BDUJWBUF
    ঢ়ଶͰ଴ػͯ͠ɺ
    ࣮֬ʹ҆શͳ࣌ʢը໘͕΋͏Ұ౓ߋ৽͞Εͨ࣌ʣʹ
    DPOUSPMMFS
    ʹͳΔ
    DPOUSPMMFS
    ʹͳͬͯॳΊͯωοτϫʔΫϦΫΤετΛίϯτϩʔ ϧ͢Δ͜ͱ͕Ͱ͖Δ register installing waiting activate controller
21. 21 ϨϏϡͰࠔͬͨ͜ͱ 1. IUUQT
    ͔
    MPDBMIPTU
    ্Ͱ͔͠ಈ͔ͳ͍
    2. ΊͬͪΌΩϟογϡ͞ΕΔ͠ɺ
    σόοΫͬͯͲ͏ͨ͠Β͍͍ΜͩΖ͏
22. 22 1. ʹؔͯ͠ Vagrant ʹ͸ port forwarding ͱ͍͏ͷ͕͋Γɺ localhost ʹΞΫηε͢ΔͱɺԾ ૝؀ڥʹΞΫηεͯ͘͠ΕΔͷͰɺ ϩʔΧϧ։ൃ؀ڥͰ PWA Λ֬ೝͰ͖ΔΑ͏ʹͨ͠
23. 23 2. ʹؔͯ͠ Chrome DevTools ͷ৽͍͠ [Application] ύωϧΛ࢖༻͠ ͯ Service Worker ͷσόοά ΍ΩϟογϡͷௐࠪΛߦ͍·͠ ͨ
24. 24 ·ͱΊ
25. 25 ࠓճͷ
    18"
    Խʹ͍ͭͯ طଘͷৼΔ෣͍Λकͬͨ··ߴ଎Խ͢Δ 4FSWJDF
    8PSLFS
    ͷ࢖͍ํ
26. 26 ࠓޙͷ
    18"
    ʹ͍ͭͯ 4FSWJDF
    8PSLFS
    Ͱ͔͠࠶ݱͰ͖ͳ͍ػೳͳͲɺ ༷ʑͳ࢖͍ํ͕͋Γ·͢
    ࠓͷ͏ͪʹܦݧ஋ΛஷΊ͓͚ͯ͹ɾɾɾ
    ࠓޙɺϏδωε޲͚αʔϏεʹར༻͢Δ͜ͱ͕ Ͱ͖Δ͔΋͠Ε·ͤΜ