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
500
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
92
Array Grouping will soon be arriving at TypeScript
jiko21
0
94
Copying Array Methods arrived at TypeScript
jiko21
1
570
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
110
node:test will replace Jest?
jiko21
0
72
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
jiko21
2
330
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
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
コードを読んで理解するko build
bells17
1
110
Rubyと自由とAIと
yotii23
6
1.8k
もう僕は OpenAPI を書きたくない
sgash708
5
1.9k
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.6k
Datadog Workflow Automation で圧倒的価値提供
showwin
1
160
Jasprが凄い話
hyshu
0
160
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
990
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
54
19k
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
150
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Into the Great Unknown - MozCon
thekraken
35
1.6k
Scaling GitHub
holman
459
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Being A Developer After 40
akosma
89
590k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
GraphQLとの向き合い方2022年版
quramy
44
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
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