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.

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