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
パスタの技術
yusukebe
1
400
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
170
Honoアップデート 2025年夏
yusukebe
1
840
実践!App Intents対応
yuukiw00w
1
350
CSC305 Summer Lecture 06
javiergs
PRO
0
100
私の後悔をAWS DMSで解決した話
hiramax
4
130
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
tool ディレクティブを導入してみた感想
sgash708
1
150
コーディングエージェント時代のNeovim
key60228
1
100
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
380
ソフトウェアテスト徹底指南書の紹介
goyoki
1
110
Laravel Boost 超入門
fire_arlo
1
120
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
A better future with KSS
kneath
239
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Pragmatic Product Professional
lauravandoore
36
6.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Producing Creativity
orderedlist
PRO
347
40k
Docker and Python
trallard
45
3.5k
Designing Experiences People Love
moore
142
24k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
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