HTML5 Application Caching

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