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

Offline rules (Full Frontal 2012)

Andrew Betts
November 09, 2012

Offline rules (Full Frontal 2012)

In the last couple of years a deluge of new offline storage technologies have appeared. I'll explain why they are all excellent and rubbish at the same time, why you need to use all of them, and walk through the techniques to consider when building a web application that can load and function with no network connectivity. But making use of client side storage is not just necessary to make an app that works offline - it can also hugely improve the user experience of your site when the user does have connectivity as well. The examples will feature real-life code from our FT and the Economist applications, so you know that the techniques here are applicable to large, complex problems and not just contrived examples.

Andrew Betts

November 09, 2012

More Decks by Andrew Betts

Other Decks in Technology


  1. Offline rules Making your eb app ork offline and be

    more aesome online ndre Betts (@triblondon) Director, FT Labs (@ftlabs)
  2. 1880 1900 1920 1940 1960 1980 2000 2020 e’ve been

    doing this for a hile.
  3. orks offline Portable Long battery life Can be read in

    bright sunlight Cheap Ubiquity Bookmarking Sharing Features (nesprint) Fast start up Clipping/saving Can be read in the dark Updates in real time Electronic delivery Search Personalisation Deep linking
  4. e need to care about supporting existing features as much

    as getting ne ones.
  5. orks offline Portable Long battery life Can be read in

    bright sunlight Cheap Ubiquity Bookmarking Sharing Features (HTML5?) Fast start up Clipping/saving Can be read in the dark Updates in real time Electronic delivery Search Personalisation Deep linking
  6. The FT eb app The FT eb app provides a

    touch optimised user experience ithout native code.
  7. …and the Economist app n HTML5 ebsite rapped in BlackBerry

    eborks for app orld distribution on the PlayBook.
  8. Offline vs dependency management Offline vs responsive images Offline vs

    media queries Offline vs analytics Offline vs login state
  9. Offline makes everything harder.

  10. Client side storage options Meet the family from hell.

  11. ppCache Teen localStorage Dad IndexedDB Mum Cookies Grandad

  12. None
  13. appCache indexedDB

  14. Speed: read/rite cycles 242   296   175   259

      6873   29897   1 10 100 1000 10000 100000 IDB Large IDB Small ebSQL Large ebSQL Small localStor Large localStor Small Operations per second (more is better) h,p://jsperf.com/indexeddb-­‐vs-­‐localstorage/13  
  15. Bootstrapping Start small and enhance

  16. CONTENT   adver   Ising   adverIsing   adverIsing  

    twaddle   crap   nonsense   tomfoolery   tripe   baloney   garbage   poppycock   trash   rubbish   filler   irrelevance   faff   hidden   unseen   ferreted   concealed   invisible   buried   latent   sequestered   shrouded   unrevealed   withheld  
  17. hy Bootstrap? •  Keep content clean •  Start ‘enhanced experience’

    on any URL – Need front-end router / front controller •  Handle errors •  Run only hat e need •  Mollify attention seeking app cache
  18. Main content Basic CSS / fonts Boot and error handling

    code JS modules CSS modules HTML fragments dditional content Initial pageload appCache/Netork Modules and dependencies Local storage / appCache / netork uthentication tokens Cookies Extra content and prefetching ebSQL / IndexedDB / netork uthentication token
  19. Taming the appCache Grump grump grump grump grump...

  20. CACHE MANIFEST # 14120120420 / /favicon.ico /lib/fonts/ofsnmd__.ttf /lib/imgs/sprite.png FALLBACK: /issues

    /fb/issues /api /fb/api NETWORK: * Manifest version Explicit caching llo stuff not in appcache Offline controllers
  21. 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.
  22. <html  manifest=‘manifest.appcache’>    

  23. Only cache one ‘master’ URL: ... <iframe src=‘/’></iframe> </body> </html>

  24. Internet Explorer ill not populate an appCache unless the manifest

    is cacheable. Firefox on’t store any resource if it’s served ith no-store, even if explicitly listed in the manifest.
  25. Cache-control: max-age=1, private; Prevent proxy caching

  26. hen the manifest is updated, every entry in it is

  27. CACHE MANIFEST # 14120120420 /js/mymodule1.js?v=1.15 /js/mymodule2.js?v=1.18 /js/mymodule3.js?v=1.1 /js/mymodule4.js?v=1.18 /js/mymodule5.js?v=1.19 FALLBACK:

    /issues /fb/issues?v=2.34 /api /fb/api?v=2.34 NETWORK: * Manifest version Far future cached resources
  28. ppCache HTTP Cache Server Updated manifest Donload just one

  29. On slo netorks a request must time out before the

    fallback is used.
  30. None
  31. None
  32. hat e put in app cache YES: •  Fonts • 

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

    e need to learn to live ith less.
  34. 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  automaIcally  when  you  try  to   store  more  than  the  lower  limit.    The  user  may  not  consent  to  more  than  the  upper  limit.  
  35. UTF-16 in JavaScript •  Provides great compatibility but halves precious

    quota! •  Can make compromises on compatibility to get more storage efficiency 00   48   00   45   00   4C   00   4C   00   4F   00   20   00   57   00   4F   00   52   00   4C   00   44   H   E   L   L   O   W   O   R   L   D  
  36. None
  37. Squeezing your bits 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   卩   浰   汥  
  38. SCII packed into UTF-16! Simple = 卩浰汥 6 chars 3

  39. None
  40. Connection state Taking online and offline events at face value

  41. Q: If the value of indo.navigator.onLine is true, hat does

    that mean? : The device might be online.
  42. None
  43. Tell hat you kno, not hat you assume.

  44. Donloading! Not sure. Still trying... Bah. e give up.

  45. None
  46. “Don’t build native apps, build eb apps” -­‐  Tim  Berners-­‐Lee

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

    stuff? Join in. [email protected]