Going offline Offline caching for a more responsive, more reliable eb for everybody ndre Betts (@triblondon) Director, FT Labs (@ftlabs)

1880 1900 1920 1940 1960 1980 2000 2020

No content

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

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

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

e need to care about supporting existing features as much as getting ne ones.

elcome back to the eb The FT eb app provides a touch optimised user experience ithout native code.

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

Learn ho the creates offline eb apps ith scale, performance and reliabilty.

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.

hat is an app?

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.

‘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.

‘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.

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.

genda •  The client-side storage family •  Example techniques and challenges – Bootstrapping – Storage optimisation – Connection state detection

The client-side storage family •  HTML5 application cache •  localStorage and sessionStorage •  ebSQL and IndexedDB •  Cookies

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.

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

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.

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.

Bootstrapping

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

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.

   

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

 good bootstrap •  Snippet of JS at the end of every page •  dd resources based on capabilities •  Special bootstrap-only page for fallback router

Let’s boot.

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

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

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...

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.

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  

hat to put in app cache YES: •  Fonts •  Splash image •  pp icon •  Fallback bootstrap NO: •  CSS •  HTML •  JavaScript

Storage optimisation ll storage technologies are limited by tiny quotas. e need to learn to live ith less.

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.  

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.

n analogy.

No content

No content

No content

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   卩   浰   汥  

eird. Not your father’s compression algorithm, that’s for sure.

Connection state Or hy online and offline events should not be trusted to anser the question ‘are e online?’

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

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

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

.  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

navigator.onLine is meaningless hen true, and only mostly meaningless hen false.

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.”

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

HTML5 is not finished, and it’s getting murkier: •  HTG maintains the ‘living standard’ •  3C creates frozen snapshot CUTION

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

Thanks andre@labs.ft.com @triblondon, @FTLabs Do you ant to build this stuff? Join in. [email protected] 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