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
47
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
2.7k
RESTful Firebase with Vue.js
gyarasu
1
420
Next.jsではじめるPWA
gyarasu
2
1.6k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.7k
副業時代のプロジェクトマネジメント
gyarasu
3
2.9k
PWA基礎_1
gyarasu
0
300
PWA基礎_2
gyarasu
0
180
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.6k
Other Decks in Technology
See All in Technology
4月15日の AZ 障害をテクサポの中の人目線で振り返ってみる
kazzpapa3
3
160
激動の一年を通じて見えてきた「技術でリードする」ということ
ktr_0731
8
8.1k
Next.jsと状態管理のプラクティス
uhyo
6
2.3k
試作とデモンストレーション / Prototyping and Demonstrations
ks91
PRO
0
150
とあるEdTechベンチャーのシステム構成こだわりN選 / edtech-system
gotok365
5
360
dbtとリバースETLでデータ連携の複雑さに立ち向かう
morookacube
0
1.1k
encoding/json v2を予習しよう!
yuyu_hf
PRO
1
210
20250514 1Passwordを使い倒す道場 vol.1
east_takumi
0
150
Cursorをチョッパヤインタビューライターにチューニングする方法 / how to tuning cursor for interview write
shuzon
2
260
経済メディア編集部の実務に小さく刺さるAI / small-ai-with-editorial
nkzn
2
470
MCP でモノが動くとおもしろい/It is interesting when things move with MCP
bitkey
3
610
ユーザーコミュニティが海外スタートアップのDevRelを補完する瞬間
nagauta
1
200
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
49
7.8k
Why Our Code Smells
bkeepers
PRO
336
57k
Done Done
chrislema
184
16k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Writing Fast Ruby
sferik
628
61k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
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