Your SlideShare is downloading. ×
0
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Offline Mode - Web Applications Offline
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Offline Mode - Web Applications Offline

386

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.

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
386
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Offline Mode Web Applications for Offline Use @pleckey | http://pleckey.me
  • 2. Who is this guy? Patrick Leckey Director of Engineering In-Touch Insight Systems Inc. http://www.intouchinsight.com
  • 3. Online is easy
  • 4. Offline is ... easy?
  • 5. But what if ...
  • 6. ... you're not guaranteed to have connectivity the whole way ...
  • 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. LocalStorage simple straightforward rather limited ApplicationCache complex confusing powerful
  • 9. LocalStorage ... it's basically a shelf ... Put stuff on the shelf Take stuff off the shelf Can only hold so much stuff
  • 10. LocalStorage Similar to Cookies ... but not transmitted on each request Send what you want, when you want!
  • 11. LocalStorage Key / Value pairs Limited storage size Same Origin Policy! http://pleckey.me != https://www.pleckey.me
  • 12. LocalStorage 5 MB limit As JavaScript strings ... 1.2345678 4 byte float? 9 bytes of characters? Nope! 18-byte UTF-16 string
  • 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. 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. LocalStorage Good Ideas application state user information Bad Ideas base64-encoded images postal code lookup database
  • 16. ApplicationCache ... is basically a ... uh ... cache ... Pre-cache resources Access resources offline Fallback to alternates for dynamic resources
  • 17. ApplicationCache No storage limit Event-driven API Cache is based on manifest URL
  • 18. ApplicationCache <html manifest="/cache.manifest"> mime type must be text/cache-manifest
  • 19. cache.manifest CACHE NETWORK FALLBACK
  • 20. cache.manifest CACHE CACHE MANIFEST # Version: 8cf54be2 CACHE: /favicon.png /logo.png /site/page2.html explicitly cached resources
  • 21. cache.manifest NETWORK CACHE MANIFEST # Version: 8cf54be2 CACHE: /favicon.png ... NETWORK: * resources that require the user to be online usually just "*"
  • 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. ApplicationCache cached items are always served from the application cache the application cache will not update unless the cache manifest file content changes
  • 24. ApplicationCache CACHE MANIFEST # Version: 8cf54be2 CACHE: /script.js NETWORK: * text content has to be changed
  • 25. Pretty Simple, right? ... and you thought it'd be that easy ...
  • 26. Oops #1 Non-cached resources don't exist. Even when you're online. NETWORK: *
  • 27. Oops #2 The application cache works with the browser cache. Sort of. Cache-Control: max-age=9999999999
  • 28. Oops #3 Caching the cache manifest. It'll never update. Cache-Control: no-cache, no-store
  • 29. Clearing the ApplicationCache HTTP/1.0 410 Gone
  • 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. ApplicationCache API window.applicationCache.addEventListener( 'updateready', function( e ) { alert( 'New version downloaded. Application will now reload.' ); window.location.reload(); } ); window.applicationCache.update();
  • 32. ApplicationCache API window.applicationCache.addEventListener( 'updateready', function( e ) { alert( 'New version downloaded. Application will now reload.' ); window.applicationCache.swapCache(); } ); window.applicationCache.update();
  • 33. iframe is your friend <!-- iframe_js.html --> <html> <script type="application/javascript"> store large lookup data in iframes
  • 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. 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. Single Page Applications pre-cache static resources (speed!)
  • 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. What Else Can I Do With This? Come work for us! Software Developer User Experience Data Scientist
  • 39. Thank you! Questions? @pleckey | http://pleckey.com

×