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
92
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
71
どこでも動かすために… 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
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
8
2.3k
sappoRo.R #12 初心者セッション
kosugitti
0
270
Datadog Workflow Automation で圧倒的価値提供
showwin
1
140
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
240
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
16
3.6k
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
270
Formの複雑さに立ち向かう
bmthd
1
920
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
130
PRレビューのお供にDanger
stoticdev
1
230
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
140
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
250
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
67
11k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
What's in a price? How to price your products and services
michaelherold
244
12k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Documentation Writing (for coders)
carmenintech
67
4.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Statistics for Hackers
jakevdp
797
220k
Thoughts on Productivity
jonyablonski
69
4.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
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