Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Offline Application Cache

3,596 views

Published on

Published in: Technology
  • Be the first to comment

Offline Application Cache

  1. 1. Offline Application Cache Jonathan Stark 1
  2. 2. What is AppCache? 2
  3. 3. The Basics 3
  4. 4. Manifest File • A simple text document • Hosted on your web server • Contains a list of static resources 4
  5. 5. demo.manifest CACHE MANIFEST index.html logo.jpg scripts/demo.js styles/screen.css 5
  6. 6. index.html <html manifest="demo.manifest"> 6
  7. 7. .htaccess AddType text/cache-manifest .manifest 7
  8. 8. It Works! • User loads index.html normally • Listed files download in the background • User can now go offline 8
  9. 9. What About Updates? • Update your content (HTML, CSS, JS, IMG) • Update your manifest • All files re-download next time 9
  10. 10. Online Whitelist 10
  11. 11. demo.manifest CACHE MANIFEST index.html scripts/demo.js styles/screen.css NETWORK: logo.jpg 11
  12. 12. Offline Fallbacks 12
  13. 13. demo.manifest CACHE MANIFEST index.html scripts/demo.js styles/screen.css FALLBACK: logo.jpg offline.jpg 13
  14. 14. demo.manifest CACHE MANIFEST index.html scripts/demo.js styles/screen.css FALLBACK: images/ images/offline.jpg 14
  15. 15. Dynamic Manifest 15
  16. 16. manifest.php <?php echo "CACHE MANIFESTn"; $dir = new RecursiveDirectoryIterator("."); foreach(new RecursiveIteratorIterator($dir) as $file) { if ($file->IsFile() and $file != "./manifest.php" and substr($file->getFilename(), 0, 1) != ".") { echo $file . "n"; } } 16
  17. 17. Debugging 17
  18. 18. access_log tail -f /var/log/apache2/access_log 18
  19. 19. JavaScript API // Convenience array of status values var cacheStatusValues = []; cacheStatusValues[0] = 'uncached'; cacheStatusValues[1] = 'idle'; cacheStatusValues[2] = 'checking'; cacheStatusValues[3] = 'downloading'; cacheStatusValues[4] = 'updateready'; cacheStatusValues[5] = 'obsolete'; 19
  20. 20. JavaScript API // Listeners for all possible events var cache = window.applicationCache; cache.addEventListener('cached', logEvent, false); cache.addEventListener('checking', logEvent, false); cache.addEventListener('downloading', logEvent, false); cache.addEventListener('error', logEvent, false); cache.addEventListener('noupdate', logEvent, false); cache.addEventListener('obsolete', logEvent, false); cache.addEventListener('progress', logEvent, false); cache.addEventListener('updateready', logEvent, false); 20
  21. 21. JavaScript API // Log every event to the console function logEvent(e) { var online, status, type, message; online = (navigator.onLine) ? 'yes' : 'no'; status = cacheStatusValues[cache.status]; type = e.type; message = 'online: ' + online; message+= ', event: ' + type; message+= ', status: ' + status; if (type == 'error' && navigator.onLine) { message+= ' (prolly a syntax error in manifest)'; } console.log(message); } 21
  22. 22. JavaScript API // Check for manifest changes every 10 seconds setInterval(function(){cache.update()}, 10000); 22
  23. 23. Demo! 23
  24. 24. More Info • http://jonathanstark.com/books • http://jonathanstark.com/contact • http://jonathanstark.com/e4h 24

×