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
130
Array Grouping will soon be arriving at TypeScript
jiko21
0
130
Copying Array Methods arrived at TypeScript
jiko21
1
660
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
130
node:test will replace Jest?
jiko21
0
87
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
jiko21
2
380
NestJS a progressive web framework
jiko21
3
2.1k
レガシーなフロントエンドをリプレイスする
jiko21
5
1.5k
Deep Dive Into Vue Composition API
jiko21
0
3.2k
Other Decks in Programming
See All in Programming
バイブコーディング × 設計思考
nogu66
0
130
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
100
私の後悔をAWS DMSで解決した話
hiramax
4
120
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
490
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
380
学習を成果に繋げるための個人開発の考え方 〜 「学習のための個人開発」のすすめ / personal project for leaning
panda_program
1
110
🔨 小さなビルドシステムを作る
momeemt
1
470
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
770
実践 Dev Containers × Claude Code
touyu
1
240
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
How GitHub (no longer) Works
holman
315
140k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
The Language of Interfaces
destraynor
160
25k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Code Review Best Practice
trishagee
70
19k
Done Done
chrislema
185
16k
The Invisible Side of Design
smashingmag
301
51k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
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