HTML5 and Offline<br />David Orchard<br />Mobile Architect<br />
Outline<br />Easy stuff<br />Web Storage<br />App Cache<br />Web SQL<br />Hard stuff<br />Naming<br />Cache invalidation<b...
HTML5<br />
Web Storage<br />Aka HTML5 Storage<br />SessionStorage<br />Scoped to session<br />No sharing across windows<br />LocalSto...
Web storage API	<br />setItem(key, value)<br />sessionStorage.setItem(key, value)<br />sessionStorage.key=value<br />sessi...
WebStorage data types<br />String<br />That’s it.<br />Use JSON to serialize/deserialize structures<br />Json.org/json2.js...
Web storage tips/references<br />try {<br />    return 'localStorage' in window && window['localStorage'] !== null;<br />}...
HTML5 Cache Manifest<br />Central resource for html5 caching<br /><!DOCTYPE HTML><br /><html manifest=“/appcache.manifest”...
Serving Cache Manifest<br />Must be content-type text/cache-manifest<br />Document name must end in .manifest<br />Watch o...
Cache Manifest	<br />CACHE MANIFEST<br />#version 13<br />#equivalent to CACHE: section<br />/index.html<br />/wickedjslib...
Browser behavior<br />User may be offered option of saving data to app cache<br />Set size of App Cache<br />Clear the app...
Cache Manifest loading process<br />HTTP load .manifest file<br />Previously mentioned HTTP Caching issue<br />Determine i...
Cache events<br />checking<br />downloading<br />progress with how many files downloaded, to go<br />noupdate<br />updater...
Tips/Reference<br />Modernizr.applicationcache<br />Charles Proxy<br />http://jonathanstark.com/blog/2009/09/27/debugging-...
Web SQL<br />OpenDatabase(name, version, descr, size)<br />var db = openDatabase(‘mdb’,’1.0’,’hello world db’, 1*1024*1024...
Tips<br />Modernizr.websqldatabase<br />Async FTW<br />Reset db method on device<br />DOM ERROR 11 means db broken<br />
Other Offline<br />Device specific libraries<br />Calendar<br />Contacts<br />W3C Device APIs WG<br />Sure, let’s call it ...
Products<br />Sencha’s Ext, io<br />jQuery offline<br />GWT<br />MagicPref<br />
Hard stuff<br />Naming<br />Cache invalidation<br />thx Phil Karlton<br />
Naming<br />Web arch anyone?<br />http://www.w3.org/TR/webarch/<br />Also Roy’s thesis<br />
Representations<br />http://lists.w3.org/Archives/Public/www-tag/2002Oct/0079.html<br />So, then, how do you bend a spoon?...
Cache Invalidation aka bending the spoon<br />How about client-side write?<br />Phases<br />0. No client side write<br />1...
Deltas<br />Client actions stored as deltas in command queue<br />Server responds with absolute or delta?<br />Combine wit...
Offline detection<br />navigator.onLine is usually just wrong<br />Maybe message fails<br />Or even worse, slow connection...
The joy that is reliable messaging<br />Asynchronous messaging<br />Never do synchronous for writes<br />No response could...
But wait, there’s more: multi-party rm scenario<br />User buys in-app purchase<br />Apple send back confirmation with rece...
Security<br />none<br />Good luck doing crypto in js<br />Oh, right, export laws.<br />That’s why apple asks you every tim...
Outline<br />Easy stuff<br />Web Storage<br />App Cache<br />Web SQL<br />Hard stuff<br />Naming<br />Cache invalidation<b...
Upcoming SlideShare
Loading in …5
×

Dave Orchard - Offline Web Apps with HTML5

5,386 views

Published on

There’s an old expression, that there are only 2 hard problems in computing: naming, cache invalidation and off-​​by-​​one errors. Building offline web apps is all about those hard problems. There are some different ways of storing stuff — such as html5 caching, html5 storage, sqllite, and even native stores such as contacts and calendars — and we’ll sing their praises. But the really hard problems are knowing what to store, whether the stuff is still good or needs refreshing, how much to store, how to resolve conflicts between the client and server, how to integrate with data-​​specific stores, all in a bewildering cacophony of network and storage limited devices. We’ll spend the bulk of our time on these hard problems, which is probably more useful than api description and sample code.



Dave Orchard is Mobile Architect at Salesforce​.com and located in Vancouver, Canada. This means being involved in many mobile platforms, architectures, tools, technologies and APIs. Prior to that, he was a co-​​founder of Ayogo Games and focused on iPhone and ruby/​merb/​mysql based casual social games. Back further in the mists of time, he was the Web standards lead for BEA Systems for 7 years, including being elected three times to 2 year terms on the W3C Technical Architecture Group chaired by Sir Tim Berners-​​Lee.

Follow Dave on Twitter: @DaveO

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

No Downloads
Views
Total views
5,386
On SlideShare
0
From Embeds
0
Number of Embeds
591
Actions
Shares
0
Downloads
74
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Dave Orchard - Offline Web Apps with HTML5

  1. 1. HTML5 and Offline<br />David Orchard<br />Mobile Architect<br />
  2. 2. Outline<br />Easy stuff<br />Web Storage<br />App Cache<br />Web SQL<br />Hard stuff<br />Naming<br />Cache invalidation<br />Writing<br />Oh, and security<br />
  3. 3. HTML5<br />
  4. 4. Web Storage<br />Aka HTML5 Storage<br />SessionStorage<br />Scoped to session<br />No sharing across windows<br />LocalStorage<br />Persistent<br />Shared across windows<br />Size: 5M, 10M, expandable<br />
  5. 5. Web storage API <br />setItem(key, value)<br />sessionStorage.setItem(key, value)<br />sessionStorage.key=value<br />sessionStorage[‘key’]=value<br />getItem(key)<br />removeItem(key)<br />length<br />key(index)<br />clear<br />
  6. 6. WebStorage data types<br />String<br />That’s it.<br />Use JSON to serialize/deserialize structures<br />Json.org/json2.js<br />Careful of serializing too much<br />
  7. 7. Web storage tips/references<br />try {<br /> return 'localStorage' in window && window['localStorage'] !== null;<br />} catch (e) {<br /> return false;<br /> }<br />}<br />Modernizr.sessionstorage<br />Modernizr.localstorage<br />http://diveintohtml5.org/storage.html<br />
  8. 8. HTML5 Cache Manifest<br />Central resource for html5 caching<br /><!DOCTYPE HTML><br /><html manifest=“/appcache.manifest”><br /><body><br /></body><br /></html><br />Every page in your app must refer to the manifest<br />
  9. 9. Serving Cache Manifest<br />Must be content-type text/cache-manifest<br />Document name must end in .manifest<br />Watch out for HTTP caching the manifest<br />Make sure cache file gets refreshed when you refresh<br />Can tell if clearing the cache works<br />Or just the checking event fired (events coming up)<br />Configure server to tell browser to not cache manifest<br />
  10. 10. Cache Manifest <br />CACHE MANIFEST<br />#version 13<br />#equivalent to CACHE: section<br />/index.html<br />/wickedjslib.js<br />/awesomestyle.css<br />NETWORK:<br />*<br />FALLBACK:<br />/ /fallback.html<br />
  11. 11. Browser behavior<br />User may be offered option of saving data to app cache<br />Set size of App Cache<br />Clear the app cache by clearing cache<br />Can also view app caches:<br /><ul><li>chrome://appcache-internals/</li></ul>Private Browsing disables app cache<br />Mobile <br />
  12. 12. Cache Manifest loading process<br />HTTP load .manifest file<br />Previously mentioned HTTP Caching issue<br />Determine if new version of cache manifest<br />Uses HTTP last-modified<br />Change manifest file every time file changes<br />Automate!<br />Download<br />
  13. 13. Cache events<br />checking<br />downloading<br />progress with how many files downloaded, to go<br />noupdate<br />updateready<br />then do window.applicationCache.swapCache()<br />
  14. 14. Tips/Reference<br />Modernizr.applicationcache<br />Charles Proxy<br />http://jonathanstark.com/blog/2009/09/27/debugging-html-5-offline-application-cache/<br />Oh, not in iOS for webkit<br />http://stackoverflow.com/questions/4361948/offline-ios-web-app-loads-my-manifest-but-doesnt-work-offline<br />Well, maybe from 4.3.2<br />http://diveintohtml5.org/offline.html<br />
  15. 15. Web SQL<br />OpenDatabase(name, version, descr, size)<br />var db = openDatabase(‘mdb’,’1.0’,’hello world db’, 1*1024*1024)<br />Version # is magic<br />db.transaction(function(tx){<br />tx.executeSQL(‘CREATE TABLE test(id,text)’);<br />tx.executeSQL(‘INSERT INTO test VALUES(1,”hello”)’);<br />tx.executeSQL(‘SELECT * FROM foo’, [], callback);<br />});<br />function(tx, results){// results.rows.items(i).text}<br />
  16. 16. Tips<br />Modernizr.websqldatabase<br />Async FTW<br />Reset db method on device<br />DOM ERROR 11 means db broken<br />
  17. 17. Other Offline<br />Device specific libraries<br />Calendar<br />Contacts<br />W3C Device APIs WG<br />Sure, let’s call it HTML5<br />
  18. 18. Products<br />Sencha’s Ext, io<br />jQuery offline<br />GWT<br />MagicPref<br />
  19. 19. Hard stuff<br />Naming<br />Cache invalidation<br />thx Phil Karlton<br />
  20. 20. Naming<br />Web arch anyone?<br />http://www.w3.org/TR/webarch/<br />Also Roy’s thesis<br />
  21. 21.
  22. 22. Representations<br />http://lists.w3.org/Archives/Public/www-tag/2002Oct/0079.html<br />So, then, how do you bend a spoon? Simple. Drop a graphics processor onto the interface such that the representations are morphed. The spoon appears to bend because you have no way of distinguishing one implementation from another, unless you happen to be the One in control of the implementation. And, because of that, bending the representations is sufficient for other observers to think that you have actually bended the spoon.<br />
  23. 23. Cache Invalidation aka bending the spoon<br />How about client-side write?<br />Phases<br />0. No client side write<br />1. Write to server, refresh cache<br />2. Write to cache, then server<br />Sync everything<br />Deltas<br />Choices depend upon latency<br />What if network breaks or device shuts off partway?<br />When to update UI?<br />
  24. 24. Deltas<br />Client actions stored as deltas in command queue<br />Server responds with absolute or delta?<br />Combine with Server updates<br />If server responds with invalid state or denies command<br />have to drain the queue and stop<br />Hold off on UI updates if many pending requests<br />http://googlecode.blogspot.com/2009/06/gmail-for-mobile-html5-series-cache.html<br />
  25. 25. Offline detection<br />navigator.onLine is usually just wrong<br />Maybe message fails<br />Or even worse, slow connection with partial message<br />Need a ping service<br />Tip: provide a config that you can turn on/off during app<br />
  26. 26. The joy that is reliable messaging<br />Asynchronous messaging<br />Never do synchronous for writes<br />No response could mean:<br />Outbound message lost<br />Failure on server<br />Where on server processing?<br />Inbound message lost<br />Retry synchronous could mean dup messages<br />Duplicate detection<br />Try for idempotency<br />
  27. 27. But wait, there’s more: multi-party rm scenario<br />User buys in-app purchase<br />Apple send back confirmation with receipt<br />Verify receipt with your server<br />Server talks to apple<br />Respond to device<br />
  28. 28. Security<br />none<br />Good luck doing crypto in js<br />Oh, right, export laws.<br />That’s why apple asks you every time<br />PIN/Password to access crypto item. <br />Where to store the key?<br />Need native store for security<br />Even better, use native code for crypto<br />
  29. 29. Outline<br />Easy stuff<br />Web Storage<br />App Cache<br />Web SQL<br />Hard stuff<br />Naming<br />Cache invalidation<br />Writing<br />Oh, and security<br />

×