V-Kansai Vue.js/Nuxt Meetup #9の資料です。
VueͰ ͢Δͱ͖ʹؾΛ͚͓͖͍ͭͯͨTipsV-Kansai Vue.js/Nuxt Meetup #9@Daikids2
View Slide
খౡ େج / Daiki Kojima@jiko_21@jiko21ژେֶେֶӃใֶݚڀՊM2Server/Front, Mobile(iOS/Android)…Vue fes JPࢀՃ͠·͢!!࠷ۙFlutterָ͕͍͠…
Posted on …IUUQTTQFBLFSEFDLDPNEBJLJETWVFEFQXBTVSVUPLJOJRJXPUVLFUFPLJUBJUJQT
ࠓճͷωλ• Vue.jsͰPWA͍ͬͯ͘தͰΒ͔ͨ͠Λத৺ʹ հ͠·͢!• ϗεςΟϯάFirebaseͱ͔ɺNetlifyͱ͔ λʔήοτͰ͢(ଟ)
What is
What is PWA?• ৽͍͠ΣϒΞϓϦͷܗ• (εϚϗʹ)ΠϯετʔϧՄೳ• ௨ػೳͳͲ• ΦϑϥΠϯͰར༻Մೳ…• ࠃͰPixiv, QiitaͰͷ࠾༻ࣄྫΞϦ!!
in
Vue in PWA• ࣮…• @vue/cliͰ؆୯ʹઃఆͰ͖Δ!!
VueͰPWA؆୯!!
ऴ੍࡞ɾஶ࡞━━━━━@Daikids2
ͱ͍͔ͳ͍!
͜ͷ··ͩͱ…• ʮϗʔϜը໘ʹՃʯͨ͠ͷΛىಈ͢Δͱ ڻ͖ͷന͞• Cache͕अຐͯ͠ߋ৽͕ޮ͔ͳ͍• manifest.jsonΛมߋͨ͠ͷʹ AndroidଆͷςʔϚΧϥʔ͕มΘΒͳ͍
ʮϗʔϜը໘ʹՃʯͨ͠ͷΛ ىಈ͢Δͱڻ͖ͷന͞
ڻ͖ͷന͞ͱ?
ڻ͖ͷന͞ͱ?dev serverͩͱ… pwaͷΞΠίϯ͔Βىಈ͢Δͱ
Why?• σϑΥϧτͰɺmanifest.jsonʹҎԼͷΑ͏ʹهड़ ͞ΕͯΔ… • ****/index.html͕։͔Εͯ͠·͏ͨΊ…
ղܾࡦ• start_urlΛҎԼͷΑ͏ʹઃఆ
Cache͕अຐͯ͠ߋ৽͕ޮ͔ͳ͍
Ͳ͏͍͏?• Ξοϓσʔτͨ͠ͷΛDeploy• Ξοϓσʔτ͕ө͞Εͣ…• PWAͰΑ͘·͞ΕΔͭ
ղܾࡦ(ఆ)• StackOverflowʹΑΔͱɺVue.jsͰ৽͍͠ίϯςϯπΛ μϯϩʔυ͢ΔʹɺҎԼͷઃఆ͕vue.config.js ʹඞཁhttps://stackoverflow.com/questions/54145735/vue-pwa-not-getting-new-content-after-refresh
ղܾࡦ(ఆ)• ͞ΒʹɺԼهΛregisterServiceWorker.jsʹ ॻ͍ͯ͋͛Εɺίϯςϯπ͕ μϯϩʔυ͞ΕͨࡍʹΞοϓσʔτ͞ΕΔ…
ͨͩ…• ϞʔμϧͰߋ৽͢ΔΑ͏ʹଅ͢ɺΈ͍ͨͳ ҙݟ͋ΔͷͰ͜͜ΒΜαʔϏε࣍ୈɻ• (Ϣʔβʔମݧతʹ)ΞϓϦͱͯͬͯ͠ΔΜ͔ͩΒɺ ΞοϓσʔτΛڋ൱Ͱ͖ΔΑ͏ʹ͢Δͱ͍͍͔!!
manifest.jsonΛมߋͨ͠ͷʹ AndroidଆͷςʔϚΧϥʔ͕ มΘΒͳ͍
͜͜ͷ͜ͱ
Why?• Կނ͔manifest.jsonͷใΛಡΈऔͬͯ͘Εͳ͍…• ωοτݟͯΔͱhtmlʹϕλॻ͖͢ΔΑ͏ʹ ॻ͔ΕͯΔ…https://forum.vuejs.org/t/vue-cli-3-where-i-change-theme-color-for-address-bar/29951/7
ղܾࡦ• vue.config.jsʹҎԼͷΑ͏ͳॻ͖ํͰॻ͍ͯΕOK!https://forum.vuejs.org/t/vue-cli-3-where-i-change-theme-color-for-address-bar/29951/7
࠷ޙʹ
·ͱΊ• Vue.jsΛ͑؆୯ʹPWAΛʮ࢝ΊΔʯ͜ͱͰ͖Δ!!• Ωϟογϡͱ͔theme-colorͱ͔ɺ ॳ৺ऀͭ·͖ͮϙΠϯτຬࡌͳͷͰཁҙ• manifest.jsonࣄ͠Ζɺvue.config.js༏ल͗͢…
jiko21
kazumura
dunglas
tmokmss
takesinoda
hagatake
hirotokirimaru
treastrain
ivargrimstad
ancaghenade
maaretp
naokimrmt
nearme_tech
reverentgeek
akosma
cromwellryan
iamctodd
bkeepers
pedronauck
addyosmani
soudai
jrom
colly
ammeep
lauravandoore