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
190
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
PWA基礎_3
- キャッシュ戦略
- ストレージ選択
についてまとめてあります。
gyarasu
November 13, 2018
More Decks by gyarasu
See All by gyarasu
QAエンジニア組織立ち上げはじめの一歩
gyarasu
0
100
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
4.7k
RESTful Firebase with Vue.js
gyarasu
1
480
Next.jsではじめるPWA
gyarasu
2
1.7k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.9k
副業時代のプロジェクトマネジメント
gyarasu
3
3.1k
PWA基礎_1
gyarasu
0
330
PWA基礎_2
gyarasu
0
210
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.8k
Other Decks in Technology
See All in Technology
属人化を叩き割れ!「制作加速」と「安定化」の矛盾を打破する:8年目プロダクトが辿り着いた「ミスが起こり得ない」アセット制作フローの全貌
gree_tech
PRO
0
290
国家プロジェクトを支える「さくらONE」 大規模LLM開発におけるGPU障害を乗り越えるクラスター運用戦略
gpuunite_official
0
260
ハッカソンで入賞した話 @ Findy LT
asari194617
0
1.5k
Kiro入門|仕様駆動開発で変わるAI時代の開発スタイル
cmkudo
0
340
AIに持続⼒を与える 判断の⻑期記憶設計
eiei114
1
660
Adding Right-to-Left support to your web application with CSS logical properties — Lessons from Redmine
vividtone
0
170
Flutter × BLE Centralを自前Pluginで実装する設計パターン - MethodChannel / EventChannelで作る双方向ブリッジの実践 / Building Custom Flutter BLE Central Plugins: Bidirectional Bridging with Method & Event Channels
bitkey
PRO
0
230
暗号化?某ファイルストレージはどうなるの!? 3rd Partyとうまく付き合う秘密度ラベル設計
kasada
0
140
VLMで2.3万枚のPyCon JP写真を検索!
terapyon
1
310
ホームラボ紹介
y_sera15
0
230
RelayerというPHPのフレームワークを作った
polidog
PRO
0
120
トークンマネジメントでAIにとって働きやすい環境を実現する
hikaruegashira
0
140
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
77
5.5k
ラッコキーワード サービス紹介資料
rakko
1
4.5M
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
580
Large-scale JavaScript Application Architecture
addyosmani
515
110k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
440
The World Runs on Bad Software
bkeepers
PRO
72
12k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
1
250
Facilitating Awesome Meetings
lara
57
7.1k
Google's AI Overviews - The New Search
badams
0
1.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
3k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
870
Marketing to machines
jonoalderson
1
5.7k
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