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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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
110
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
5.7k
RESTful Firebase with Vue.js
gyarasu
1
490
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
AI時代だからこそ推したい!Gitコマンド再入門
munakata
0
160
私の推しは「聞いてから進む」AIです -AI-DLCに一人でアプリを作らせた話
yama3133
1
180
AIは爆速なのに、私が詰まっていた話 ― 音声入力と鳴くマスコットでボトルネックを削る
yama3133
0
550
freeeらしさをAIとともに作る / Creating the freee Experience with AI
ymrl
0
210
使いこなすために知っておきたい Azure SRE Agent アンチパターン
torumakabe
2
420
「Docker Desktop不要の時代」は 来たのか?
ueponx
0
270
並行性の問題を防げ!実践トランザクション入門
occhi
0
280
実体験から学ぶ分析エージェントの開発と運⽤
recruitengineers
PRO
7
1.6k
LocalStack を使ったサーバーレスアプリケーション開発 / Serverless Development with LocalStack
kakakakakku
1
310
The seven pitfalls of AI (revised version)
ufried
0
300
プロダクト価値を、 チームが使える判断軸に変える
vivion
0
130
Claude Code本は、どのように執筆チームで書かれたか
oikon48
1
340
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.2k
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
4
4.3k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
1
1.6k
Agile that works and the tools we love
rasmusluckow
331
22k
A Soul's Torment
seathinner
8
3.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
28
3.7k
Paper Plane
katiecoart
PRO
4
54k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
7k
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
350
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
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