Offline rules (Full Frontal 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.

Fd1af6cc88403788ae1e5710871bbf62?s=128

Andrew Betts

November 09, 2012
Tweet

Transcript

  1. 1.

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

    more aesome online ndre Betts (@triblondon) Director, FT Labs (@ftlabs)
  2. 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
  3. 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
  4. 6.

    The FT eb app The FT eb app provides a

    touch optimised user experience ithout native code.
  5. 7.

    …and the Economist app n HTML5 ebsite rapped in BlackBerry

    eborks for app orld distribution on the PlayBook.
  6. 8.

    Offline vs dependency management Offline vs responsive images Offline vs

    media queries Offline vs analytics Offline vs login state
  7. 12.
  8. 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  
  9. 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  
  10. 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
  11. 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
  12. 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
  13. 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.
  14. 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.
  15. 27.
  16. 30.
  17. 31.
  18. 32.

    hat e put in app cache YES: •  Fonts • 

    Splash image •  pp icon •  Entry page •  Fallback bootstrap NO: •  CSS •  HTML •  JavaScript Local Storage
  19. 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.  
  20. 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  
  21. 36.
  22. 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   卩   浰   汥  
  23. 39.
  24. 41.

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

    that mean? : The device might be online.
  25. 42.
  26. 45.