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

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