Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

jiko21
August 21, 2019

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

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

jiko21

August 21, 2019
Tweet

More Decks by jiko21

Other Decks in Programming

Transcript

  1. VueͰ ͢Δͱ͖ʹ


    ؾΛ͚͓͖͍ͭͯͨTips
    V-Kansai Vue.js/Nuxt Meetup #9


    @Daikids2

    View full-size slide

  2. খౡ େج / Daiki Kojima


    @jiko_21


    @jiko21


    ژ౎େֶେֶӃ৘ใֶݚڀՊM2


    Server/Front, Mobile(iOS/Android)…


    Vue fes JPࢀՃ͠·͢!!


    ࠷ۙFlutterָ͕͍͠…

    View full-size slide

  3. Posted on …
    IUUQTTQFBLFSEFDLDPNEBJLJETWVFEFQXBTVSVUPLJOJRJXPUVLFUFPLJUBJUJQT

    View full-size slide

  4. ࠓճͷωλ
    • Vue.jsͰPWA΍͍ͬͯ͘தͰ΍Β͔ͨ͠఺Λத৺ʹ

    ঺հ͠·͢!


    • ϗεςΟϯά͸Firebaseͱ͔ɺNetlifyͱ͔

    λʔήοτͰ͢(ଟ෼)

    View full-size slide

  5. What is PWA?
    • ৽͍͠΢ΣϒΞϓϦͷܗ


    • (εϚϗ౳ʹ)ΠϯετʔϧՄೳ


    • ௨஌ػೳͳͲ


    • ΦϑϥΠϯͰ΋ར༻Մೳ…


    • ࠃ಺Ͱ΋Pixiv, Qiita౳Ͱͷ࠾༻ࣄྫΞϦ!!

    View full-size slide

  6. Vue in PWA
    • ࣮͸…


    • @vue/cliͰ؆୯ʹઃఆͰ͖Δ!!

    View full-size slide

  7. VueͰPWA͸؆୯!!

    View full-size slide




  8. ੍࡞ɾஶ࡞


    ━━━━━


    @Daikids2

    View full-size slide

  9. ͱ͸͍͔ͳ͍!

    View full-size slide

  10. ͜ͷ··ͩͱ…
    • ʮϗʔϜը໘ʹ௥Ճʯͨ͠΋ͷΛىಈ͢Δͱ

    ڻ͖ͷന͞


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


    • manifest.jsonΛมߋͨ͠ͷʹ

    AndroidଆͷςʔϚΧϥʔ͕มΘΒͳ͍

    View full-size slide

  11. ʮϗʔϜը໘ʹ௥Ճʯͨ͠΋ͷΛ

    ىಈ͢Δͱڻ͖ͷന͞

    View full-size slide

  12. ڻ͖ͷന͞ͱ͸?

    View full-size slide

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

    View full-size slide

  14. Why?
    • σϑΥϧτͰ͸ɺmanifest.jsonʹҎԼͷΑ͏ʹهड़

    ͞ΕͯΔ…

    • ****/index.html͕։͔Εͯ͠·͏ͨΊ…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. Ͳ͏͍͏໰୊?
    • Ξοϓσʔτͨ͠΋ͷΛDeploy


    • Ξοϓσʔτ͕൓ө͞Εͣ…


    • PWAͰ͸Α͘೰·͞ΕΔ΍ͭ

    View full-size slide

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

    View full-size slide

  19. ղܾࡦ(࢑ఆ)
    • ͞ΒʹɺԼهΛregisterServiceWorker.jsʹ

    ॻ͍ͯ͋͛Ε͹ɺίϯςϯπ͕

    μ΢ϯϩʔυ͞ΕͨࡍʹΞοϓσʔτ͞ΕΔ…

    View full-size slide

  20. ͨͩ…
    • ϞʔμϧͰߋ৽͢ΔΑ͏ʹଅ͢ɺΈ͍ͨͳ

    ҙݟ΋͋ΔͷͰ͜͜Β΁Μ͸αʔϏε࣍ୈɻ


    • (Ϣʔβʔମݧతʹ)ΞϓϦͱͯ͠࢖ͬͯΔΜ͔ͩΒɺ

    ΞοϓσʔτΛڋ൱Ͱ͖ΔΑ͏ʹ͢Δͱ͍͍͔΋!!

    View full-size slide

  21. manifest.jsonΛมߋͨ͠ͷʹ

    AndroidଆͷςʔϚΧϥʔ͕

    มΘΒͳ͍

    View full-size slide

  22. Why?
    • Կނ͔manifest.jsonͷ৘ใΛಡΈऔͬͯ͘Εͳ͍…


    • ωοτݟͯΔͱhtmlʹϕλॻ͖͢ΔΑ͏ʹ

    ॻ͔ΕͯΔ…
    https://forum.vuejs.org/t/vue-cli-3-where-i-change-theme-color-for-address-bar/29951/7

    View full-size slide

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

    View full-size slide

  24. ·ͱΊ
    • Vue.jsΛ࢖͑͹؆୯ʹPWAΛʮ࢝ΊΔʯ͜ͱ͸Ͱ͖Δ!!


    • Ωϟογϡͱ͔theme-colorͱ͔ɺ

    ॳ৺ऀͭ·͖ͮϙΠϯτຬࡌͳͷͰཁ஫ҙ


    • manifest.json࢓ࣄ͠Ζɺvue.con
    fi
    g.js༏ल͗͢…

    View full-size slide




  25. ੍࡞ɾஶ࡞


    ━━━━━


    @Daikids2

    View full-size slide