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
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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.5k
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.1k
PWA基礎_1
gyarasu
0
330
PWA基礎_2
gyarasu
0
210
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.8k
Other Decks in Technology
See All in Technology
開発投資の期待値を上げるプロダクトロードマップづくり ~プロダクトエンジニアが越境して事業を伸ばす~
kekekenta
1
180
Slack上でインフラをトラブルシュートする! Agentic Platform Engineeringの第一歩
teru0x1
4
1.7k
HHKBエバンジェリストになる方法
941
0
110
登壇の自信を奪う3匹のオバケ / 3 Ghosts That Rob You of Your Confidence in Public Speaking
pauli
8
950
「ピッケル本」日本語版は4.0(第6版)が出版されるべき / pickaxe4-nagoyark05
kakutani
1
130
30座EKS, 180次升級淬煉的EKS Upgrade Skill 的歷程
eric8230
0
170
技術的負債から考える、AI時代のエンジニアリング投資 — ビズリーチの技術的負債と向き合った経験から、変更し続けられるソフトウェアを考える/ technical-debt-con2026
visional_engineering_and_design
3
3k
Spring BootからQuarkusへの移行
tatsuya1bm
2
120
作品が生態系になった ─ Mini Tokyo 3D から世界へ
nagix
0
190
The Agent Builder Loop from Daily Work to OSS
minorun365
PRO
3
200
10Xに技術的負債をもたらした「2つの境界の歪み」その構造と解消への営み
10xinc
0
2k
俺の仕事は AIに奪われないし、たぶんその BIも要らない
hikaruri
0
490
Featured
See All Featured
Crafting Experiences
bethany
1
340
Art, The Web, and Tiny UX
lynnandtonic
304
22k
Agile that works and the tools we love
rasmusluckow
331
22k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
700
The agentic SEO stack - context over prompts
schlessera
0
940
Scaling GitHub
holman
464
140k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
830
ラッコキーワード サービス紹介資料
rakko
1
4.9M
It's Worth the Effort
3n
188
29k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
280
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
380
Deep Space Network (abreviated)
tonyrice
0
310
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