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
34
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
2.4k
RESTful Firebase with Vue.js
gyarasu
1
390
Next.jsではじめるPWA
gyarasu
2
1.5k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.6k
副業時代のプロジェクトマネジメント
gyarasu
3
2.8k
PWA基礎_1
gyarasu
0
290
PWA基礎_2
gyarasu
0
170
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.5k
Other Decks in Technology
See All in Technology
Terraform Stacks入門 #HashiTalks
msato
0
350
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.2k
SSMRunbook作成の勘所_20241120
koichiotomo
2
130
誰も全体を知らない ~ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
1
220
dev 補講: プロダクトセキュリティ / Product security overview
wa6sn
1
2.3k
隣接領域をBeyondするFinatextのエンジニア組織設計 / beyond-engineering-areas
stajima
1
270
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
180
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
200
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
フルカイテン株式会社 採用資料
fullkaiten
0
40k
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
6
620
Lambdaと地方とコミュニティ
miu_crescent
2
370
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
How STYLIGHT went responsive
nonsquared
95
5.2k
Building Applications with DynamoDB
mza
90
6.1k
Speed Design
sergeychernyshev
24
610
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Visualization
eitanlees
145
15k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
BBQ
matthewcrist
85
9.3k
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