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

by jiko21

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

খౡ େج / Daiki Kojima @jiko_21 @jiko21 ژ౎େֶେֶӃ৘ใֶݚڀՊM2 Server/Front, Mobile(iOS/Android)… Vue fes JPࢀՃ͠·͢!! ࠷ۙFlutterָ͕͍͠…

Slide 3

Slide 3 text

Posted on … IUUQTTQFBLFSEFDLDPNEBJLJETWVFEFQXBTVSVUPLJOJRJXPUVLFUFPLJUBJUJQT

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

What is

Slide 6

Slide 6 text

What is PWA? • ৽͍͠΢ΣϒΞϓϦͷܗ • (εϚϗ౳ʹ)ΠϯετʔϧՄೳ • ௨஌ػೳͳͲ • ΦϑϥΠϯͰ΋ར༻Մೳ… • ࠃ಺Ͱ΋Pixiv, Qiita౳Ͱͷ࠾༻ࣄྫΞϦ!!

Slide 7

Slide 7 text

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

VueͰPWA͸؆୯!!

Slide 10

Slide 10 text

ऴ ੍࡞ɾஶ࡞ ━━━━━ @Daikids2

Slide 11

Slide 11 text

ͱ͸͍͔ͳ͍!

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

ڻ͖ͷന͞ͱ͸?

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

ղܾࡦ • start_urlΛҎԼͷΑ͏ʹઃఆ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

ղܾࡦ(࢑ఆ) • 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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

͜͜ͷ͜ͱ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

࠷ޙʹ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

ऴ ੍࡞ɾஶ࡞ ━━━━━ @Daikids2