Save 37% off PRO during our Black Friday Sale! »

HTML5 Application Caching

0f5f0ea6a2dc7ed3cb5830377a4fe7e2?s=47 Ryan McGeary
February 05, 2012
Technology
4
890

HTML5 Application Caching

0f5f0ea6a2dc7ed3cb5830377a4fe7e2?s=128

Ryan McGeary

February 05, 2012
Tweet

More Decks by Ryan McGeary

See All by Ryan McGeary
0f5f0ea6a2dc7ed3cb5830377a4fe7e2?s=48 rmm5t
1
460
0f5f0ea6a2dc7ed3cb5830377a4fe7e2?s=48 rmm5t
5
1.1k
0f5f0ea6a2dc7ed3cb5830377a4fe7e2?s=48 rmm5t
2
110
0f5f0ea6a2dc7ed3cb5830377a4fe7e2?s=48 rmm5t
3
1.5k
0f5f0ea6a2dc7ed3cb5830377a4fe7e2?s=48 rmm5t
2
550
0f5f0ea6a2dc7ed3cb5830377a4fe7e2?s=48 rmm5t
5
550
0f5f0ea6a2dc7ed3cb5830377a4fe7e2?s=48 rmm5t
2
260
0f5f0ea6a2dc7ed3cb5830377a4fe7e2?s=48 rmm5t
5
1.7k

Other Decks in Technology

See All in Technology
8fa31051503b09846584c49cd53d2f80?s=48 asei
0
280
33dd5188ff5f608ca2a1e007b9528e6b?s=48 okepy
PRO
0
610
4a545656ecacd1cde3548bf3e1b66f07?s=48 seputaratote
0
11k
7e6a435700dda6cdb22105d601f20892?s=48 picardparis
4
2.9k
942bb606679caf4c57b38927f83178e1?s=48 qsona
14
5.6k
1e6cfe94614ed96ac769e93f2e0c63f0?s=48 kavisha
1
490
3e77f9dbec6a87756d1dbdddab283aee?s=48 nulabinc
PRO
1
200
4852f047f15c6ef357eb08c62d1c31bf?s=48 shimasan
0
230
74cec195bfb6cb5165256d88cb7fcf0f?s=48 miu_crescent
2
170
4cac35b93861e65f31a1c7278bfb5f20?s=48 shinyaigeek
6
4.3k
11ab209b6dcacad4e5aa841af533a937?s=48 katahiro12345
0
110
36617bf3ef2c14d0474824d678bf3796?s=48 sadashi
1
380

Featured

See All Featured
Ecdea9b9714877b86cee08458f085481?s=48 trallard
27
1.3k
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
288
19k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
58
3.9k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
61
7.3k
828ace851b606e1206900f26459f55ad?s=48 speakerdeck
PRO
2
480
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
180
14k
78b475797a14c84799063c7cd073962f?s=48 holman
464
280k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
19k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
373
43k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
655
120k
245cee81a9c424266e5e401d844ea881?s=48 lara
27
3.5k

Transcript

  1. 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

  2. diveintohtml5.info

  3. Browser Support

  4. Cache Manifest <!DOCTYPE HTML> <html manifest="/mobile.manifest"> <body> ... </body> </html>

    text/cache-manifest

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

  6. NETWORK Sections CACHE MANIFEST NETWORK: * CACHE: http://www.google-analytics.com/ga.js /favicon.ico /javascripts/application.js

    /stylesheets/screen.css /data.json

  7. FALLBACK Sections CACHE MANIFEST FALLBACK: / /offline.html NETWORK: * CACHE:

    http://www.google-analytics.com/ga.js /favicon.ico

  8. Expiring The Cache CACHE MANIFEST # Updated: <%= something.updated_at %>

    # Released: <%= application_released_at %> NETWORK: * CACHE: # ...

  9. window.applicationCache swapCache() checking downloading progress cached error updateready already cached?

    NO YES updated manifest? noupdate NO YES

  10. 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

  11. Debugging Tips about:about

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

  13. Debugging Tips or Use:

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

  15. Gotchas! #2 Beware of swapCache

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

  17. DEMO Let’s play some music.

  18. Ryan McGeary ryan.mcgeary.org @rmm5t ryan@mcgeary.org McGeary Consulting Group