Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
62
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
3.1k
RESTful Firebase with Vue.js
gyarasu
1
440
Next.jsではじめるPWA
gyarasu
2
1.6k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.8k
副業時代のプロジェクトマネジメント
gyarasu
3
3k
PWA基礎_1
gyarasu
0
300
PWA基礎_2
gyarasu
0
190
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.7k
Other Decks in Technology
See All in Technology
Fashion×AI「似合う」を届けるためのWEARのAI戦略
zozotech
PRO
2
1k
AWSを使う上で最低限知っておきたいセキュリティ研修を社内で実施した話 ~みんなでやるセキュリティ~
maimyyym
2
1.9k
AIエージェント開発と活用を加速するワークフロー自動生成への挑戦
shibuiwilliam
4
680
AIプラットフォームにおけるMLflowの利用について
lycorptech_jp
PRO
1
180
Bedrock AgentCore Memoryの新機能 (Episode) を試してみた / try Bedrock AgentCore Memory Episodic functionarity
hoshi7_n
2
1.1k
GitHub Copilotを使いこなす 実例に学ぶAIコーディング活用術
74th
3
3.7k
re:Invent2025 3つの Frontier Agents を紹介 / introducing-3-frontier-agents
tomoki10
0
320
AWS re:Invent 2025~初参加の成果と学び~
kubomasataka
0
160
Connection-based OAuthから学ぶOAuth for AI Agents
flatt_security
0
190
アプリにAIを正しく組み込むための アーキテクチャ── 国産LLMの現実と実践
kohju
0
150
2025-12-18_AI駆動開発推進プロジェクト運営について / AIDD-Promotion project management
yayoi_dd
0
140
IAMユーザーゼロの運用は果たして可能なのか
yama3133
2
510
Featured
See All Featured
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
28
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.3k
AI Search: Where Are We & What Can We Do About It?
aleyda
0
6.7k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
72
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
110
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
How to make the Groovebox
asonas
2
1.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
570
Rebuilding a faster, lazier Slack
samanthasiow
85
9.3k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
2
61
Fireside Chat
paigeccino
41
3.8k
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