Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
VueでPWAするときに 気をつけておきたいTips
Search
jiko21
August 21, 2019
Programming
2
520
VueでPWAするときに 気をつけておきたいTips
V-Kansai Vue.js/Nuxt Meetup #9の資料です。
jiko21
August 21, 2019
Tweet
Share
More Decks by jiko21
See All by jiko21
Creating a Next.js-style Framework with Bun and Hono
jiko21
0
140
Array Grouping will soon be arriving at TypeScript
jiko21
0
130
Copying Array Methods arrived at TypeScript
jiko21
1
670
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
130
node:test will replace Jest?
jiko21
0
89
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
jiko21
2
390
NestJS a progressive web framework
jiko21
3
2.2k
レガシーなフロントエンドをリプレイスする
jiko21
5
1.5k
Deep Dive Into Vue Composition API
jiko21
0
3.2k
Other Decks in Programming
See All in Programming
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
220
私はどうやって技術力を上げたのか
yusukebe
43
17k
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
370
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
130
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
180
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
140
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
960
CSC305 Lecture 03
javiergs
PRO
0
230
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
160
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
920
明日から始めるリファクタリング
ryounasso
0
110
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Rails Girls Zürich Keynote
gr2m
95
14k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
How to Ace a Technical Interview
jacobian
280
24k
Transcript
VueͰ ͢Δͱ͖ʹ ؾΛ͚͓͖͍ͭͯͨTips V-Kansai Vue.js/Nuxt Meetup #9 @Daikids2
খౡ େج / Daiki Kojima @jiko_21 @jiko21 ژେֶେֶӃใֶݚڀՊM2 Server/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ͰΑ͘·͞ΕΔͭ
ղܾࡦ(ఆ) • 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
ղܾࡦ(ఆ) • ͞ΒʹɺԼهΛ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.con fi g.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.con fi
g.js༏ल͗͢…
ऴ ੍࡞ɾஶ࡞ ━━━━━ @Daikids2