VueでPWAするときに 気をつけておきたいTips

06a095e125c2016e983e183e10209b9a?s=47 jiko21
August 21, 2019

VueでPWAするときに 気をつけておきたいTips

V-Kansai Vue.js/Nuxt Meetup #9の資料です。

06a095e125c2016e983e183e10209b9a?s=128

jiko21

August 21, 2019
Tweet

Transcript

  1. VueͰ ͢Δͱ͖ʹ ؾΛ͚͓͖͍ͭͯͨTips V-Kansai Vue.js/Nuxt Meetup #9 @Daikids2

  2. খౡ େج / Daiki Kojima @Daikids2 @daikikojima ژ౎େֶେֶӃ৘ใֶݚڀՊM2 Server/Front, Mobile(iOS/Android)…

    Vue fes JPࢀՃ͠·͢!! ࠷ۙFlutterָ͕͍͠…
  3. Posted on … IUUQTTQFBLFSEFDLDPNEBJLJETWVFEFQXBTVSVUPLJOJRJXPUVLFUFPLJUBJUJQT

  4. ࠓճͷωλ • Vue.jsͰPWA΍͍ͬͯ͘தͰ΍Β͔ͨ͠఺Λத৺ʹ
 ঺հ͠·͢! • ϗεςΟϯά͸Firebaseͱ͔ɺNetlifyͱ͔
 λʔήοτͰ͢(ଟ෼)

  5. What is

  6. What is PWA? • ৽͍͠΢ΣϒΞϓϦͷܗ • (εϚϗ౳ʹ)ΠϯετʔϧՄೳ • ௨஌ػೳͳͲ •

    ΦϑϥΠϯͰ΋ར༻Մೳ… • ࠃ಺Ͱ΋Pixiv, Qiita౳Ͱͷ࠾༻ࣄྫΞϦ!!
  7. in

  8. Vue in PWA • ࣮͸… • @vue/cliͰ؆୯ʹઃఆͰ͖Δ!!

  9. VueͰPWA͸؆୯!!

  10. ऴ ੍࡞ɾஶ࡞ ᴸᴸᴸᴸᴸ @Daikids2

  11. ͱ͸͍͔ͳ͍!

  12. ͜ͷ··ͩͱ… • ʮϗʔϜը໘ʹ௥Ճʯͨ͠΋ͷΛىಈ͢Δͱ
 ڻ͖ͷന͞ • Cache͕अຐͯ͠ߋ৽͕ޮ͔ͳ͍ • manifest.jsonΛมߋͨ͠ͷʹ
 AndroidଆͷςʔϚΧϥʔ͕มΘΒͳ͍

  13. ʮϗʔϜը໘ʹ௥Ճʯͨ͠΋ͷΛ
 ىಈ͢Δͱڻ͖ͷന͞

  14. ڻ͖ͷന͞ͱ͸?

  15. ڻ͖ͷന͞ͱ͸? dev serverͩͱ… pwaͷΞΠίϯ͔Βىಈ͢Δͱ

  16. Why? • σϑΥϧτͰ͸ɺmanifest.jsonʹҎԼͷΑ͏ʹهड़
 ͞ΕͯΔ…
 • ****/index.html͕։͔Εͯ͠·͏ͨΊ…

  17. ղܾࡦ • start_urlΛҎԼͷΑ͏ʹઃఆ

  18. Cache͕अຐͯ͠ߋ৽͕ޮ͔ͳ͍

  19. Ͳ͏͍͏໰୊? • Ξοϓσʔτͨ͠΋ͷΛDeploy • Ξοϓσʔτ͕൓ө͞Εͣ… • PWAͰ͸Α͘೰·͞ΕΔ΍ͭ

  20. ղܾࡦ(࢑ఆ) • StackOverflowʹΑΔͱɺVue.jsͰ৽͍͠ίϯςϯπΛ
 μ΢ϯϩʔυ͢Δʹ͸ɺҎԼͷઃఆ͕vue.config.js
 ʹඞཁ https://stackoverflow.com/questions/54145735/vue-pwa-not-getting-new-content-after-refresh

  21. ղܾࡦ(࢑ఆ) • ͞ΒʹɺԼهΛregisterServiceWorker.jsʹ
 ॻ͍ͯ͋͛Ε͹ɺίϯςϯπ͕
 μ΢ϯϩʔυ͞ΕͨࡍʹΞοϓσʔτ͞ΕΔ…

  22. ͨͩ… • ϞʔμϧͰߋ৽͢ΔΑ͏ʹଅ͢ɺΈ͍ͨͳ
 ҙݟ΋͋ΔͷͰ͜͜Β΁Μ͸αʔϏε࣍ୈɻ • (Ϣʔβʔମݧతʹ)ΞϓϦͱͯ͠࢖ͬͯΔΜ͔ͩΒɺ
 ΞοϓσʔτΛڋ൱Ͱ͖ΔΑ͏ʹ͢Δͱ͍͍͔΋!!

  23. manifest.jsonΛมߋͨ͠ͷʹ
 AndroidଆͷςʔϚΧϥʔ͕
 มΘΒͳ͍

  24. ͜͜ͷ͜ͱ

  25. Why? • Կނ͔manifest.jsonͷ৘ใΛಡΈऔͬͯ͘Εͳ͍… • ωοτݟͯΔͱhtmlʹϕλॻ͖͢ΔΑ͏ʹ
 ॻ͔ΕͯΔ… https://forum.vuejs.org/t/vue-cli-3-where-i-change-theme-color-for-address-bar/29951/7

  26. ղܾࡦ • vue.config.jsʹҎԼͷΑ͏ͳॻ͖ํͰॻ͍ͯ΍Ε͹OK! https://forum.vuejs.org/t/vue-cli-3-where-i-change-theme-color-for-address-bar/29951/7

  27. ࠷ޙʹ

  28. ·ͱΊ • Vue.jsΛ࢖͑͹؆୯ʹPWAΛʮ࢝ΊΔʯ͜ͱ͸Ͱ͖Δ!! • Ωϟογϡͱ͔theme-colorͱ͔ɺ
 ॳ৺ऀͭ·͖ͮϙΠϯτຬࡌͳͷͰཁ஫ҙ • manifest.json࢓ࣄ͠Ζɺvue.config.js༏ल͗͢…

  29. ऴ ੍࡞ɾஶ࡞ ᴸᴸᴸᴸᴸ @Daikids2