HTML5 Application Caching

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

HTML5 Application Caching

HTML5 Application Caching

Ryan McGeary

More Decks by Ryan McGeary

Other Decks in Technology

Featured

Transcript