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

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

Transcript

1. VueͰ ͢Δͱ͖ʹ ؾΛ͚͓͖͍ͭͯͨTips V-Kansai Vue.js/Nuxt Meetup #9 @Daikids2
2. খౡ େج / Daiki Kojima @jiko_21 @jiko21 ژ౎େֶେֶӃ৘ใֶݚڀՊ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. ղܾࡦ(࢑ఆ) • StackOver fl owʹΑΔͱɺVue.jsͰ৽͍͠ίϯςϯπΛ 
 μ΢ϯϩʔυ͢Δʹ͸ɺҎԼͷઃఆ͕vue.con fi g.js 
 ʹඞཁ https://stackover fl ow.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.con fi g.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.con fi g.js༏ल͗͢…
29. ऴ ੍࡞ɾஶ࡞ ━━━━━ @Daikids2