Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
PWA基礎_3
Search
gyarasu
November 13, 2018
Technology
200
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
130
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
5.9k
RESTful Firebase with Vue.js
gyarasu
1
500
Next.jsではじめるPWA
gyarasu
2
1.8k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.9k
副業時代のプロジェクトマネジメント
gyarasu
3
3.2k
PWA基礎_1
gyarasu
0
330
PWA基礎_2
gyarasu
0
220
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.8k
Other Decks in Technology
See All in Technology
Jev の中身は50行で再現できる。でも本物との差はどこにあるのか
hisuzuya
0
200
契約で守るコンパウンドプロダクトのデザインシステム
yug1224
1
1.6k
キヨさん67歳 AIコーディングエージェント物語
happysamurai294
0
130
コンテナサービスは ECS だけじゃない!Google Cloud の Cloud Runの魅力
gre212
0
110
キヨさん、67歳。AIコーディングエージェントに挑む
happysamurai294
0
120
AIテスト自動化と評価駆動開発EDD
happysamurai294
0
100
書き手が人でもAIでも正しくなる道、SREを埋め込んだDeveloper Platform / tech drivers day8
chmikata
4
840
AWSセキュリティで活用するAI機能
cmusudakeisuke
1
370
AWS Continuum for Penetration Testing に Deep Dive してみる
asanoharuki
2
1.4k
AIエージェント時代、Kaggleにどう取り組むか
takanao
2
400
AIエージェントに 権限と鍵をどこまで渡すか
nrinetcom
PRO
2
150
Technical Project Manager の役割とやりがい、少しだけ AI
yoshiiryo1
0
270
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
35
2.9k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
63
47k
Accessibility Awareness
sabderemane
1
270
KATA
mclloyd
PRO
35
16k
Why Our Code Smells
bkeepers
PRO
340
58k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
540
My Coaching Mixtape
mlcsv
0
370
Build your cross-platform service in a week with App Engine
jlugia
234
19k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
1
3.6k
Java REST API Framework Comparison - PWX 2021
mraible
34
9.8k
Optimising Largest Contentful Paint
csswizardry
37
4k
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
540
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