Offline Mode - Web Applications Offline

892 views

Published on

An introduction to the ApplicationCache and LocalStorage HTML5 APIs that allow you to write web applications that seamlessly transition from online to offline and back.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
892
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
18
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Offline Mode - Web Applications Offline

  1. 1. Offline Mode Web Applications for Offline Use @pleckey | http://pleckey.me
  2. 2. Who is this guy? Patrick Leckey Director of Engineering In-Touch Insight Systems Inc. http://www.intouchinsight.com
  3. 3. Online is easy
  4. 4. Offline is ... easy?
  5. 5. But what if ...
  6. 6. ... you're not guaranteed to have connectivity the whole way ...
  7. 7. What we have now ... LocalStorage window.localStorage ApplicationCache window.applicationCache Chrome: 4+, Firefox: 3.5+, Safari: 4+ Mobile Safari: 3.2+, Android Browser: 2.1+ IE: 10+
  8. 8. LocalStorage simple straightforward rather limited ApplicationCache complex confusing powerful
  9. 9. LocalStorage ... it's basically a shelf ... Put stuff on the shelf Take stuff off the shelf Can only hold so much stuff
  10. 10. LocalStorage Similar to Cookies ... but not transmitted on each request Send what you want, when you want!
  11. 11. LocalStorage Key / Value pairs Limited storage size Same Origin Policy! http://pleckey.me != https://www.pleckey.me
  12. 12. LocalStorage 5 MB limit As JavaScript strings ... 1.2345678 4 byte float? 9 bytes of characters? Nope! 18-byte UTF-16 string
  13. 13. LocalStorage window.localStorage.getItem( 'foo' ); // null window.localStorage.setItem( 'foo', 'bar' ); window.localStorage.getItem( 'foo' ); // "bar" window.localStorage.length; // 1 JSON.stringify( window.localStorage ); // {"foo": "bar"} window.localStorage.removeItem( 'foo' ); // does nothing if key doesn't exist window.localStorage.clear(); // remove ALL items
  14. 14. LocalStorage What happens when the shelf is full? try { window.localStorage.setItem( 'foo', really_big_thing ); } catch ( e /* DOMException */ ) { if ( e.name == 'QuotaExceededError' ) // Chrome, Safari, IE else if ( e.name == 'NS_ERROR_DOM_QUOTA_REACHED' ) // Firefox }
  15. 15. LocalStorage Good Ideas application state user information Bad Ideas base64-encoded images postal code lookup database
  16. 16. ApplicationCache ... is basically a ... uh ... cache ... Pre-cache resources Access resources offline Fallback to alternates for dynamic resources
  17. 17. ApplicationCache No storage limit Event-driven API Cache is based on manifest URL
  18. 18. ApplicationCache <html manifest="/cache.manifest"> mime type must be text/cache-manifest
  19. 19. cache.manifest CACHE NETWORK FALLBACK
  20. 20. cache.manifest CACHE CACHE MANIFEST # Version: 8cf54be2 CACHE: /favicon.png /logo.png /site/page2.html explicitly cached resources
  21. 21. cache.manifest NETWORK CACHE MANIFEST # Version: 8cf54be2 CACHE: /favicon.png ... NETWORK: * resources that require the user to be online usually just "*"
  22. 22. cache.manifest FALLBACK CACHE MANIFEST # Version: 8cf54be2 CACHE: /favicon.png /static.html NETWORK: * FALLBACK: /dynamic.php /static.html resource to load if requested resource not available offline
  23. 23. ApplicationCache cached items are always served from the application cache the application cache will not update unless the cache manifest file content changes
  24. 24. ApplicationCache CACHE MANIFEST # Version: 8cf54be2 CACHE: /script.js NETWORK: * text content has to be changed
  25. 25. Pretty Simple, right? ... and you thought it'd be that easy ...
  26. 26. Oops #1 Non-cached resources don't exist. Even when you're online. NETWORK: *
  27. 27. Oops #2 The application cache works with the browser cache. Sort of. Cache-Control: max-age=9999999999
  28. 28. Oops #3 Caching the cache manifest. It'll never update. Cache-Control: no-cache, no-store
  29. 29. Clearing the ApplicationCache HTTP/1.0 410 Gone
  30. 30. ApplicationCache Events window.applicationCache.addEventListener( ... ); /** * 'checking' - browser is checking for an update (always first) * * 'cached' - fired after first download of a new cache manifest * * 'downloading' - new / updated resources found, browser is fetching * * 'error' - manifest returned 404 or a download failed * * 'noupdate' - cache manifest has not changed * * 'obsolete' - manifest returned 410, cache deleted * * 'progress' - X of Y manifest resources downloaded * * 'updateready' - all updates downloaded */
  31. 31. ApplicationCache API window.applicationCache.addEventListener( 'updateready', function( e ) { alert( 'New version downloaded. Application will now reload.' ); window.location.reload(); } ); window.applicationCache.update();
  32. 32. ApplicationCache API window.applicationCache.addEventListener( 'updateready', function( e ) { alert( 'New version downloaded. Application will now reload.' ); window.applicationCache.swapCache(); } ); window.applicationCache.update();
  33. 33. iframe is your friend <!-- iframe_js.html --> <html> <script type="application/javascript"> store large lookup data in iframes
  34. 34. iframe is your friend <!-- index.html --> <html manifest="/cache.manifest"> <iframe src="iframe_js.html" width="0" height="0" border ="0"/> </html> CACHE MANIFEST # Version: 1 CACHE: /iframe_js.html NETWORK: * include lookup data in cache manifest load via iframe (same origin)
  35. 35. iframe is your friend // index.html console > window.awesome_data Object {con: "foo", bar: "baz"} var appCache = window.applicationCache; if ( appCache.status != appCache.status.CACHED ) { // not cached yet, do an AJAX lookup } else { return window.awesome_data.con; // "foo" }
  36. 36. Single Page Applications pre-cache static resources (speed!)
  37. 37. Native(ish) Web App <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="mobile-web-app-capable" content="yes"/> runs full screen built-in software updates queue data for submission later
  38. 38. What Else Can I Do With This? Come work for us! Software Developer User Experience Data Scientist
  39. 39. Thank you! Questions? @pleckey | http://pleckey.com

×