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
42
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
2.6k
RESTful Firebase with Vue.js
gyarasu
1
410
Next.jsではじめるPWA
gyarasu
2
1.5k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.6k
副業時代のプロジェクトマネジメント
gyarasu
3
2.9k
PWA基礎_1
gyarasu
0
290
PWA基礎_2
gyarasu
0
180
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.6k
Other Decks in Technology
See All in Technology
Compose MultiplatformにおけるiOSネイティブ実装のベストプラクティス
enomotok
1
170
Vision Language Modelを活用した メルカリの類似画像レコメンドの性能改善
yadayuki
4
550
職種に名前が付く、ということ/The fact that a job title has a name
bitkey
1
190
IAMのマニアックな話 2025 ~40分バージョン ~
nrinetcom
PRO
4
400
みんなで育てるNewsPicksのSLO
troter
4
1k
BCMathを高速化した一部始終をC言語でガチ目に解説する / BCMath performance improvement explanation
sakitakamachi
2
590
お問い合わせ対応の改善取り組みとその進め方
masartz
0
130
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略
ryu955
2
170
Why Go?
xpmatteo
0
120
PHPでアクターモデルを活用したSagaパターンの実践法 / php-saga-pattern-with-actor-model
ytake
0
810
KCD Brazil '25: Enabling Developers with Dapr & Backstage
salaboy
1
110
AWSにおけるサイバー攻撃の傾向と具体的な対策
yuobayashi
8
790
Featured
See All Featured
Facilitating Awesome Meetings
lara
53
6.3k
For a Future-Friendly Web
brad_frost
176
9.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
A Tale of Four Properties
chriscoyier
158
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Gamification - CAS2011
davidbonilla
80
5.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
Practical Orchestrator
shlominoach
186
10k
Designing for Performance
lara
605
69k
Optimizing for Happiness
mojombo
377
70k
Why Our Code Smells
bkeepers
PRO
336
57k
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