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
160
PWA基礎_3
- キャッシュ戦略
- ストレージ選択
についてまとめてあります。
gyarasu
November 13, 2018
Tweet
Share
More Decks by gyarasu
See All by gyarasu
QAエンジニア組織立ち上げはじめの一歩
gyarasu
0
65
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
3.2k
RESTful Firebase with Vue.js
gyarasu
1
450
Next.jsではじめるPWA
gyarasu
2
1.7k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.8k
副業時代のプロジェクトマネジメント
gyarasu
3
3k
PWA基礎_1
gyarasu
0
310
PWA基礎_2
gyarasu
0
190
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.7k
Other Decks in Technology
See All in Technology
マネージャー視点で考えるプロダクトエンジニアの評価 / Evaluating Product Engineers from a Manager's Perspective
hiro_torii
0
180
生成AIを活用した音声文字起こしシステムの2つの構築パターンについて
miu_crescent
PRO
3
220
usermode linux without MMU - fosdem2026 kernel devroom
thehajime
0
240
こんなところでも(地味に)活躍するImage Modeさんを知ってるかい?- Image Mode for OpenShift -
tsukaman
1
170
ランサムウェア対策としてのpnpm導入のススメ
ishikawa_satoru
0
220
AIエージェントを開発しよう!-AgentCore活用の勘所-
yukiogawa
0
190
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
sansantech
PRO
3
1.6k
CDKで始めるTypeScript開発のススメ
tsukuboshi
1
550
Embedded SREの終わりを設計する 「なんとなく」から計画的な自立支援へ
sansantech
PRO
3
2.6k
CDK対応したAWS DevOps Agentを試そう_20260201
masakiokuda
1
410
今こそ学びたいKubernetesネットワーク ~CNIが繋ぐNWとプラットフォームの「フラッと」な対話
logica0419
5
450
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
zepprix
0
480
Featured
See All Featured
How to build a perfect <img>
jonoalderson
1
4.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
GraphQLとの向き合い方2022年版
quramy
50
14k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
470
Become a Pro
speakerdeck
PRO
31
5.8k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
170
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.4k
So, you think you're a good person
axbom
PRO
2
1.9k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
120
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
350
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
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