Offline rules Making your eb app ork offline and be more aesome online ndre Betts (@triblondon) Director, FT Labs (@ftlabs)

1880 1900 1920 1940 1960 1980 2000 2020 e’ve been doing this for a hile.

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

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

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

The FT eb app The FT eb app provides a touch optimised user experience ithout native code.

…and the Economist app n HTML5 ebsite rapped in BlackBerry eborks for app orld distribution on the PlayBook.

Offline vs dependency management Offline vs responsive images Offline vs media queries Offline vs analytics Offline vs login state

Offline makes everything harder.

Client side storage options Meet the family from hell.

ppCache Teen localStorage Dad IndexedDB Mum Cookies Grandad

No content

appCache indexedDB

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  

Bootstrapping Start small and enhance

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  

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

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

Taming the appCache Grump grump grump grump grump...

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

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

   

Only cache one ‘master’ URL: ...

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.

Cache-control: max-age=1, private; Prevent proxy caching

hen the manifest is updated, every entry in it is redonloaded

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

ppCache HTTP Cache Server Updated manifest Donload just one

On slo netorks a request must time out before the fallback is used.

No content

No content

hat e put in app cache YES: •  Fonts •  Splash image •  pp icon •  Entry page •  Fallback bootstrap NO: •  CSS •  HTML •  JavaScript Local Storage

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  automaIcally  when  you  try  to   store  more  than  the  lower  limit.    The  user  may  not  consent  to  more  than  the  upper  limit.  

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  

No content

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

SCII packed into UTF-16! Simple = 卩浰汥 6 chars 3 chars

No content

Connection state Taking online and offline events at face value

Q: If the value of indo.navigator.onLine is true, hat does that mean? : The device might be online.

No content

Tell hat you kno, not hat you assume.

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

No content

“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]