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
HTML5 Application Caching
Search
Ryan McGeary
February 05, 2012
Technology
4
1k
HTML5 Application Caching
Ryan McGeary
February 05, 2012
Tweet
Share
More Decks by Ryan McGeary
See All by Ryan McGeary
Cloud Services You Should Be Using To Build Your Startup
rmm5t
1
690
Asynchronous Collaboration
rmm5t
5
1.3k
How We Use MongoDB at BusyConf (Take Two!)
rmm5t
2
160
Just In Time Inventory with Spree
rmm5t
3
1.8k
How We Use MongoDB at BusyConf
rmm5t
2
730
CoffeeScript
rmm5t
5
700
One Man Lightning Talks
rmm5t
2
420
Do Your Commit Messages Suck?
rmm5t
5
1.9k
Other Decks in Technology
See All in Technology
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
410
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
140
dbtとBigQuery MLで実現する リクルートの営業支援基盤のモデル開発と保守運用
recruitengineers
PRO
3
100
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2k
能登半島地震で見えた災害対応の課題と組織変革の重要性
ditccsugii
0
1k
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
320
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
5
960
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
320
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing Hiroshima 2025 Edition
tomzoh
0
140
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
97
6.3k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
For a Future-Friendly Web
brad_frost
180
10k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Speed Design
sergeychernyshev
32
1.2k
RailsConf 2023
tenderlove
30
1.2k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Designing for Performance
lara
610
69k
Six Lessons from altMBA
skipperchong
29
4k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Transcript
HTML5 Application Caching There are only two hard things in
Computer Science: cache invalidation and naming things. -- Phil Karlton Ryan McGeary http://ryan.mcgeary.org @rmm5t
diveintohtml5.info
Browser Support
Cache Manifest <!DOCTYPE HTML> <html manifest="/mobile.manifest"> <body> ... </body> </html>
text/cache-manifest
CACHE Sections CACHE MANIFEST http://www.google-analytics.com/ga.js /favicon.ico /javascripts/application.js /stylesheets/screen.css /data.json
NETWORK Sections CACHE MANIFEST NETWORK: * CACHE: http://www.google-analytics.com/ga.js /favicon.ico /javascripts/application.js
/stylesheets/screen.css /data.json
FALLBACK Sections CACHE MANIFEST FALLBACK: / /offline.html NETWORK: * CACHE:
http://www.google-analytics.com/ga.js /favicon.ico
Expiring The Cache CACHE MANIFEST # Updated: <%= something.updated_at %>
# Released: <%= application_released_at %> NETWORK: * CACHE: # ...
window.applicationCache swapCache() checking downloading progress cached error updateready already cached?
NO YES updated manifest? noupdate NO YES
window.applicationCache.status 0: window.applicationCache. UNCACHED 1: window.applicationCache. IDLE 2: window.applicationCache. CHECKING
3: window.applicationCache. DOWNLOADING 4: window.applicationCache. UPDATEREADY 5: window.applicationCache. OBSOLETE
Debugging Tips about:about
Debugging Tips https://gist.github.com/1714753
Debugging Tips or Use:
Gotchas! #1 The manifest is downloaded twice during a sync.
Gotchas! #2 Beware of swapCache
Gotchas! #3 Make sure your manifest file isn’t cached.
DEMO Let’s play some music.
Ryan McGeary ryan.mcgeary.org @rmm5t
[email protected]
McGeary Consulting Group