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
160
PWA基礎_3
- キャッシュ戦略
- ストレージ選択
についてまとめてあります。
gyarasu
November 13, 2018
Tweet
Share
More Decks by gyarasu
See All by gyarasu
QAエンジニア組織立ち上げはじめの一歩
gyarasu
0
59
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
2.9k
RESTful Firebase with Vue.js
gyarasu
1
440
Next.jsではじめるPWA
gyarasu
2
1.6k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.7k
副業時代のプロジェクトマネジメント
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
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
450
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
5.4k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
0
390
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
830
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
940
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
140
コンパウンド組織のCRE #cre_meetup
layerx
PRO
0
230
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
2
2.3k
生成AIを安心して活用するために──「情報セキュリティガイドライン」策定とポイント
gree_tech
PRO
0
250
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
3
1.8k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Designing for Performance
lara
610
69k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
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