Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

diveintohtml5.info

Slide 3

Slide 3 text

Browser Support

Slide 4

Slide 4 text

Cache Manifest ... text/cache-manifest

Slide 5

Slide 5 text

CACHE Sections CACHE MANIFEST http://www.google-analytics.com/ga.js /favicon.ico /javascripts/application.js /stylesheets/screen.css /data.json

Slide 6

Slide 6 text

NETWORK Sections CACHE MANIFEST NETWORK: * CACHE: http://www.google-analytics.com/ga.js /favicon.ico /javascripts/application.js /stylesheets/screen.css /data.json

Slide 7

Slide 7 text

FALLBACK Sections CACHE MANIFEST FALLBACK: / /offline.html NETWORK: * CACHE: http://www.google-analytics.com/ga.js /favicon.ico

Slide 8

Slide 8 text

Expiring The Cache CACHE MANIFEST # Updated: <%= something.updated_at %> # Released: <%= application_released_at %> NETWORK: * CACHE: # ...

Slide 9

Slide 9 text

window.applicationCache swapCache() checking downloading progress cached error updateready already cached? NO YES updated manifest? noupdate NO YES

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Debugging Tips about:about

Slide 12

Slide 12 text

Debugging Tips https://gist.github.com/1714753

Slide 13

Slide 13 text

Debugging Tips or Use:

Slide 14

Slide 14 text

Gotchas! #1 The manifest is downloaded twice during a sync.

Slide 15

Slide 15 text

Gotchas! #2 Beware of swapCache

Slide 16

Slide 16 text

Gotchas! #3 Make sure your manifest file isn’t cached.

Slide 17

Slide 17 text

DEMO Let’s play some music.

Slide 18

Slide 18 text

Ryan McGeary ryan.mcgeary.org @rmm5t [email protected] McGeary Consulting Group