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
450
Next.jsではじめるPWA
gyarasu
2
1.6k
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
アプリにAIを正しく組み込むための アーキテクチャ── 国産LLMの現実と実践
kohju
0
210
AIBuildersDay_track_A_iidaxs
iidaxs
4
1.2k
モダンデータスタックの理想と現実の間で~1.3億人Vポイントデータ基盤の現在地とこれから~
taromatsui_cccmkhd
2
260
マイクロサービスへの5年間 ぶっちゃけ何をしてどうなったか
joker1007
19
7.5k
株式会社ビザスク_AI__Engineering_Summit_Tokyo_2025_登壇資料.pdf
eikohashiba
1
110
Agent Skillsがハーネスの垣根を超える日
gotalab555
6
4k
普段使ってるClaude Skillsの紹介(by Notebooklm)
zerebom
8
2k
Oracle Database@AWS:サービス概要のご紹介
oracle4engineer
PRO
1
400
AWS運用を効率化する!AWS Organizationsを軸にした一元管理の実践/nikkei-tech-talk-202512
nikkei_engineer_recruiting
0
170
SREが取り組むデプロイ高速化 ─ Docker Buildを最適化した話
capytan
0
140
New Relic 1 年生の振り返りと Cloud Cost Intelligence について #NRUG
play_inc
0
220
日本の AI 開発と世界の潮流 / GenAI Development in Japan
hariby
1
290
Featured
See All Featured
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
28
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.8k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
49
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
We Are The Robots
honzajavorek
0
120
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
30
The Spectacular Lies of Maps
axbom
PRO
1
400
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
170
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
1
25
Leo the Paperboy
mayatellez
0
1.2k
Building Applications with DynamoDB
mza
96
6.8k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.1k
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