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
PWA基礎_3
Search
gyarasu
November 13, 2018
Technology
0
150
PWA基礎_3
- キャッシュ戦略
- ストレージ選択
についてまとめてあります。
gyarasu
November 13, 2018
Tweet
Share
More Decks by gyarasu
See All by gyarasu
QAエンジニア組織立ち上げはじめの一歩
gyarasu
0
34
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
2.5k
RESTful Firebase with Vue.js
gyarasu
1
390
Next.jsではじめるPWA
gyarasu
2
1.5k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.6k
副業時代のプロジェクトマネジメント
gyarasu
3
2.8k
PWA基礎_1
gyarasu
0
290
PWA基礎_2
gyarasu
0
170
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.5k
Other Decks in Technology
See All in Technology
ハイテク休憩
sat
PRO
2
150
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
260
ゼロから創る横断SREチーム 挑戦と進化の軌跡
rvirus0817
2
270
AI時代のデータセンターネットワーク
lycorptech_jp
PRO
1
280
日本版とグローバル版のモバイルアプリ統合の開発の裏側と今後の展望
miichan
1
130
統計データで2024年の クラウド・インフラ動向を眺める
ysknsid25
2
840
AWS re:Invent 2024で発表された コードを書く開発者向け機能について
maruto
0
190
[Ruby] Develop a Morse Code Learning Gem & Beep from Strings
oguressive
1
160
Jetpack Composeで始めるServer Cache State
ogaclejapan
2
170
非機能品質を作り込むための実践アーキテクチャ
knih
5
1.3k
Fanstaの1年を大解剖! 一人SREはどこまでできるのか!?
syossan27
2
170
DUSt3R, MASt3R, MASt3R-SfM にみる3D基盤モデル
spatial_ai_network
2
110
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
Designing for humans not robots
tammielis
250
25k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
It's Worth the Effort
3n
183
28k
Site-Speed That Sticks
csswizardry
2
190
Making the Leap to Tech Lead
cromwellryan
133
9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Transcript
PWAೖߨ࠲ Part3 ʔ PWAͷجૅᶅ ʔ
࣍ ▹ PWAʹ͓͚ΔΩϟογϡͷλΠϛ ϯά ▹ Ωϟογϡઓུ ▹ ετϨʔδͷબ 2
PWAʹ͓͚ΔΩϟογϡͷλΠϛϯά
Ωϟογϡͷ༻λΠϛϯάʢ1ʣ 4 タイミング 動作・用途・キャッシュ対象 Install時 • 依存関係として静的アセット • 非依存関係として、すぐに必要ないサイズ が大きいリソース
Activate時 • 不要なキャッシュの削除 • IndexedDBのスキーマ移行 • 古いSWがActive時にやり残した処理 ユーザ操作時 • 「あとで読む」や「オフライン用に保存」ボタ ンクリック時のリソース取得 ネットワークの応答時 • 受信トレイや記事コンテンツなど、頻繁に更 新されるリソース • キャッシュ内にリクエストに一致するものが あればキャッシュを使用
Ωϟογϡͷ༻λΠϛϯάʢ2ʣ 5 タイミング 動作・用途・キャッシュ対象 プッシュメッセージ時 • 通知に関するコンテンツ(チャットメッセージ、 ニュース速報、メール) • 即座に同期する必要があるコンテンツ
(ToDoリストのアップデートなど) バックグラウンド同 期時 • ソーシャルメディアのタイムラインなど、急を 要さないアップデート
Ωϟογϡઓུ
Ωϟογϡઓུ 7 戦略 説明 キャッシュのみ • 静的アセット(install時キャッシュしたもの) ネットワークのみ • GET以外のリクエストなど、オフラインに相当しな
いもの キャッシュファースト (オフラインファースト) • キャッシュになければネットワークから取得 キャッシュとネットワーク の競争 • キャッシュ、ネットワークの双方を利用し、速い方を 採用 • ディスクアクセスが低速な端末でのパフォーマンス 追求 ネットワークファースト • 頻繁に更新されるリソース • ネットワーク低速時に待ちが発生 先にキャッシュ、次にネッ トワーク • 頻繁に更新されるリソース • とりあえずキャッシュから取得し、ネットワークから 取得した時点で更新 • 閲覧中のコンテンツが更新されるとユーザの混乱 を招く
ετϨʔδͷબ
ετϨʔδͷબ 9 タイプ 使用するもの ローカル key-valueストア • Cache ローカル 構造化ストレージ
• IndexedDB グローバル バイトストリーム • Cloud Storage ଟ͘ͷϒϥβͰαϙʔτ͞Ε͍ͯΔ͜ͱɺඇಉظI/OͰ͋Δ͜ ͱ͕બఆͷج४ͱͳΔ
END