Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Going offline

Going offline

HTML5 already includes features that allow the creation of web applications that function while offline. Features including application and resource caching along with local storage are widely implemented in mobile browsers. Work done at FT Labs clearly demonstrate this capability and provide a good user experience in conditions of intermittent or no network access. This talk will explore how to make the best use of these storage technologies available to web apps.

Fd1af6cc88403788ae1e5710871bbf62?s=128

Andrew Betts

July 31, 2012
Tweet

More Decks by Andrew Betts

Other Decks in Technology

Transcript

  1. Going offline Offline caching for a more responsive, more reliable

    eb for everybody ndre Betts (@triblondon) Director, FT Labs (@ftlabs)
  2. 1880 1900 1920 1940 1960 1980 2000 2020

  3. None
  4. orks offline Portable Long battery life Can be read in

    bright sunlight Cheap Ubiquity Bookmarking Sharing Nesprint Fast start up Clipping/saving Can be read in the dark Updates in real time Electronic delivery Search Personalisation Deep linking
  5. orks offline Portable Long battery life Can be read in

    bright sunlight Cheap Ubiquity Bookmarking Sharing ‘Traditional’ eb Fast start up Clipping/saving Can be read in the dark Updates in real time Electronic delivery Search Personalisation Deep linking
  6. orks offline Portable Long battery life Can be read in

    bright sunlight Cheap Ubiquity Bookmarking Sharing pps Fast start up Clipping/saving Can be read in the dark Updates in real time Electronic delivery Search Personalisation Deep linking
  7. e need to care about supporting existing features as much

    as getting ne ones.
  8. elcome back to the eb The FT eb app provides

    a touch optimised user experience ithout native code.
  9. orks offline Portable Long battery life Can be read in

    bright sunlight Cheap Ubiquity Bookmarking Sharing Ne eb Fast start up Clipping/saving Can be read in the dark Updates in real time Electronic delivery Search Personalisation Deep linking
  10. Learn ho the creates offline eb apps ith scale, performance

    and reliabilty.
  11. Sometimes it’s hat e’ve done But e’ve learned a lot,

    so to be honest sometimes it’s hat e ould do if e did it again.
  12. hat is an app?

  13. Objective C vs JavaScript pps are ritten in platform specific,

    proprietary stack. If it’s ritten just using eb technologies, it’s not an app.
  14. ‘Do stuff’ vs ‘Get stuff’ pps allo you to ‘do’

    things, alloing you to take control of your environment in some ay. Things that don’t, aren’t apps.
  15. ‘Interface’ vs ‘document’ n app has an control interface that

    isn’t based on a page metaphor. ebsites aren’t apps because they deliver interfaces using pages.
  16. Made for me. n app is an experience that feels

    like it as designed for you, to use in the ay you ant it to ork. It fits you like your favourite pair of shoes.
  17. genda •  The client-side storage family •  Example techniques and

    challenges – Bootstrapping – Storage optimisation – Connection state detection
  18. The client-side storage family •  HTML5 application cache •  localStorage

    and sessionStorage •  ebSQL and IndexedDB •  Cookies
  19. HTML5 application cache •  ttention seeker –  Used even hen

    online •  Non-conformist –  Ne unfamiliar manifest syntax •  Refuses to change –  Cached files only update hen manifest changes •  Ignores instructions –  Caches the page it as referenced from even though you didn’t ask it to. •  Does something ne and ingenious –  Caches HTTP responses, so can serve first page request, before JS PIs are available.
  20. localStorage •  Easy to talk to, but not good at

    detail –  Simple key/value store •  Can’t multi-task –  Synchronous PI blocks JS execution for I/O •  Quick off the mark –  Typically lookups by key are much quicker than ebSQL or IndexedDB •  Only functions ell in familiar surroundings –  JavaScript PI requires a page already loaded
  21. IndexedDB / ebSQL •  Good at complex things –  Flexible,

    indexed, structured data store •  Great memory –  Storage limits typically higher than localStorage •  Can multi-task –  I/O on database is asynchronous •  Takes a hile to make decisions –  Sloer than localStorage for simple lookups •  Prefers a familiar environment –  Like localStorage, a JS PI that requires a page to have loaded already.
  22. Cookies •  Tiny memory –  Max 4KB per domain • 

    Insists on telling hat it does remember to anyone that’ll listen –  Cookie data sent to server in every request •  Tends to offend Government –  Regulators in ashington and Brussels have legislated to make cookies more akard to use.
  23. Bootstrapping

  24. hy Bootstrap? •  Many URLs, not all in app cache

    •  Need front-end router / front controller •  Handle errors •  pply capability-based behaviours •  Mollify attention seeking app cache
  25. ny page ith manifest attribute ill get cached, like it

    or not. ny cached page ill be used in preference to fetching a fresh copy, even hen online.
  26. <html  manifest=‘manifest.appcache’>    

  27. pp cache orkaround •  Only cache one ‘master’ URL:  

     ...   <iframe  src=‘/appcache-­‐loader.html’></iframe>   </body>   </html>    
  28.  good bootstrap •  Snippet of JS at the end

    of every page •  dd resources based on capabilities •  Special bootstrap-only page for fallback router
  29. Let’s boot.

  30. Online Request  page   Is  there  an  appcache   associated

     with  this   origin?   Is  URL  in   appcache?   Is  URL  in     NETWORK?     Matching   FALLBACK?   Make  request.   Did  it  work?   Is  it  HTML?   Does  it  have  a     manifest  aIribute?   In  browser   cache?   Request  from   network.   For  each     subresource...   Make  request.   In  browser   cache?   Request  from   network.   Yes No No Yes Okay No Righto Yup Yes No ay Uh oh... On it. Did  it  work?   Is  it  HTML?   Ok, Ok. Yup Manifest?   In  browser   cache?   Different  from   exisMng  manifest?   No Er... no, obviously. The IFRME is Yes... Request   manifest.   ilco. Yes! Run JS
  31. Online Is  browser  capable   of  supporMng   advanced  experience?

      Are  advanced  experience   resources  available  in   localStorage?   Load  resources   from  localStorage   Add  resources   to  page   Fire  init   process   You’re  all  set   Does  page   have  content?   Does  content   match  URL?   Fabulous. Yes Yes Okay Yes Yes On it. Done
  32. Offline Request  page   Is  there  an  appcache   associated

     with  this   origin?   Is  URL  in   appcache?   Is  URL  in     NETWORK?     Matching   FALLBACK?   Make  request.   Did  it  work?   Use  fallback.   Does  it  have  a     manifest  aIribute?   In  browser   cache?   Request  from   network.   For  each     subresource...   Start  again.   Yes No No Yes Er... No But... NO! Oh, OK. No ay Uh oh...
  33. Is  browser  capable   of  supporMng   advanced  experience?  

    Are  advanced  experience   resources  available  in   localStorage?   Load  resources   from  localStorage   Add  resources   to  page   Fire  init   process   You’re  all  set   Does  page   have  content?   Examine  URL  and   dispatch  controller   DOMDOMDOM.... Yes Yes Okay Oh, right. No! Panic! On it. Offline Done. Populate  page   content   Fabulous.
  34. Splash  screen   Basic  CSS   Error  msgs  /  support

     info   Boot  code   Main  app  code   Main  app  CSS   App  HTML  templates   natomy of a fallback: •  Just-in-case content –  Remove after boot •  Bootstrap JS •  dditional resources added by bootstrap •  dditional content added by main app code Content  
  35. hat to put in app cache YES: •  Fonts • 

    Splash image •  pp icon •  Fallback bootstrap NO: •  CSS •  HTML •  JavaScript
  36. Storage optimisation ll storage technologies are limited by tiny quotas.

    e need to learn to live ith less.
  37. ebSQL () / IndexedDB (i) ppcache localStorage Cookies iOS (5.1)

    : 5MB / 50MB 10MB 5MB 4KB total Up to 50 per domain ndroid (4) ? Unlimited 5MB Safari (5.2) : 5MB / Unlimited Unlimited 5MB Chrome (18) : Unlimited 5MB 5MB IE (10) i: 500MB 50MB 10MB Opera (11) : 5MB / Unlimited 50MB / Unlimited 5MB / Unlimited Firefox (11) i: 50MB / Unlimited Unlimited 10MB Storage limits Two  figures  separated  by  /  indicate  limit  with  and  without  user  consent  prompt,  which  appears  automaMcally  when  you  try  to   store  more  than  the  lower  limit.    The  user  may  not  consent  to  more  than  the  upper  limit.  
  38. Text encoding ‘compression’ •  JavaScript internally uses UTF-16 for text

    encoding •  Great idea for processing: fast string operations, full support for Unicode BMP •  Terrible idea for storage of English text or base-64 encoded images.
  39. n analogy.

  40. None
  41. None
  42. None
  43. SCII packed into UTF-16 Text   S   i  

    m   p   l   e   Decimal   83   105   109   112   108   101   As  binary   01010011   01101001   01101101   01110000   01101100   01100101   Shi^ed   01010011  01101001   01101101  01110000   01101100  01100101   As  hex   53  69   6D  70   6C  65   UTF-­‐16   卩   浰   汥  
  44. eird. Not your father’s compression algorithm, that’s for sure.

  45. Connection state Or hy online and offline events should not

    be trusted to anser the question ‘are e online?’
  46. Question ccording to cycling proficiency instructors, hat is a driver

    signaling if he or she extends their arm straight out of their car indo?
  47. Question ccording to cycling proficiency instructors, hat is a driver

    signaling if he or she extends their arm straight out of their car indo? The indo is open
  48. Q: If the value of indo.navigator.onLine is true, hat does

    that mean?
  49. .  ny request made by the broser ill succeed. B. 

    The connection is nice and fast. C.  ll ebsites ill load equally ell D.  The device has sync ith the ISP E.  The last netork request succeeded
  50. navigator.onLine is meaningless hen true, and only mostly meaningless hen

    false.
  51. Better connection state data •  Lobby for better device PIs

    – Meanhile, polyfills using phonegap, BB eborks, Metro •  Test it in the background •  Buffer requests to send, and keep retrying. •  Be honest. – “It didn’t ork. e have no idea hy. Sorry.”
  52. Summary •  The ne eb is finally the potential print

    successor e’ve been aiting for. •  User experience is key across varied platforms •  The ne eb can deliver reliable offline apps today. •  You don’t have to sacrifice features •  ith good optimisations you can get a great app experience
  53. HTML5 is not finished, and it’s getting murkier: •  HTG

    maintains the ‘living standard’ •  3C creates frozen snapshot CUTION
  54. “Don’t build native apps, build eb apps” -­‐  Tim  Berners-­‐Lee

     
  55. Thanks andre@labs.ft.com @triblondon, @FTLabs Do you ant to build this

    stuff? Join in. jobs@labs.ft.com Image  credits::     hIp://cdn3.worldcarfans.co/2008/2/medium/9080214.017.Mini1L.jpg,    hIp://www.netbasic.com/blog/2008/10/mini-­‐car-­‐parking-­‐fail,  hIp://runningstopsigns.files.wordpress.com/ 2011/04/smart-­‐car.jpg