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
180
0
Share
PWA基礎_3
- キャッシュ戦略
- ストレージ選択
についてまとめてあります。
gyarasu
November 13, 2018
More Decks by gyarasu
See All by gyarasu
QAエンジニア組織立ち上げはじめの一歩
gyarasu
0
83
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
3.5k
RESTful Firebase with Vue.js
gyarasu
1
460
Next.jsではじめるPWA
gyarasu
2
1.7k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.9k
副業時代のプロジェクトマネジメント
gyarasu
3
3.1k
PWA基礎_1
gyarasu
0
320
PWA基礎_2
gyarasu
0
210
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.8k
Other Decks in Technology
See All in Technology
checker.tsにチキンレースを仕掛けてみた:型エラー(TS2589)が発生する境界線を求めて
hal_spidernight
1
150
コーディングAIが導くリスクベースド探索的テストの実践
lycorptech_jp
PRO
1
300
AI時代に求められる思考のパラダイムシフト
nrinetcom
PRO
1
130
TypeScriptで実現する既存APIを活用したリモートMCPサーバー構築 / TSKaigi 2026
soarteclab
1
220
"スキルファースト"で作る、AIの自走環境
subroh0508
1
690
AWSアップデートから考える継続的な運用改善
toru_kubota
2
360
The Making of AI Chips
pfn
PRO
0
690
まだ道半ば、AI-DLCを歩み始めている話
news_it_enj
2
110
TypeScriptはどのようにどこまで推論できるのか ─ とにかく as は禁止で
ypresto
1
350
TypeScript の型で副作用の実行順序を制御する
yanaemon
2
170
実例から学ぶ GuardDuty(SSH BruteForce)調査の全体フローと勘所【SecurityJAWS】
cscengineer
PRO
1
200
最新技術を"今は選ばない"という技術選定
leveragestech
PRO
0
380
Featured
See All Featured
Building the Perfect Custom Keyboard
takai
2
770
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
199
73k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
370
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
180
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
510
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
170
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Become a Pro
speakerdeck
PRO
31
5.9k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
700
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
200
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.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