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
140
PWA基礎_3
- キャッシュ戦略
- ストレージ選択
についてまとめてあります。
gyarasu
November 13, 2018
Tweet
Share
More Decks by gyarasu
See All by gyarasu
QAエンジニア組織立ち上げはじめの一歩
gyarasu
0
23
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
1.8k
RESTful Firebase with Vue.js
gyarasu
1
350
Next.jsではじめるPWA
gyarasu
2
1.4k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.4k
副業時代のプロジェクトマネジメント
gyarasu
3
2.7k
PWA基礎_1
gyarasu
0
260
PWA基礎_2
gyarasu
0
160
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.4k
Other Decks in Technology
See All in Technology
エンタープライズ環境下での Active Directory の運用 TIPS
tamaiyutaro
1
1.6k
4年前、あるじゃん老害エンジニアLT合戦に登壇、米国西海岸コンピュータ歴史博物館体験記の続編
toshi_atsumi
0
190
「共通基盤」を超えよ! 今、Platform Engineeringに取り組むべき理由
jacopen
25
5.8k
SREとその組織類型
tatsuo48
8
1.5k
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.3k
Janus
bkuhlmann
1
490
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
120
「手動オペレーションに定評がある」と言われた私が心がけていること / phpcon_odawara2024
blue_goheimochi
2
320
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
100
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
660
〜小さく始めて大きく育てる〜データ分析基盤の開発から活用まで
kniino
0
2k
Microsoft Cloudで開発ライフサイクルを保護する
kkamegawa
0
140
Featured
See All Featured
Statistics for Hackers
jakevdp
789
220k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
11
4.6k
Into the Great Unknown - MozCon
thekraken
10
980
The Invisible Side of Design
smashingmag
294
49k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k
Building Adaptive Systems
keathley
30
1.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
154
14k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
How to Ace a Technical Interview
jacobian
272
22k
Done Done
chrislema
178
15k
YesSQL, Process and Tooling at Scale
rocio
163
13k
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