Offline rules (Full Frontal 2012)

Oﬄine rules Making your eb app ork oﬄine 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 oﬄine 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 oﬄine 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

Oﬄine makes everything harder.

Client side storage options Meet the family from hell.

ppCache Teen localStorage Dad IndexedDB Mum Cookies Grandad

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 ﬁller irrelevance faﬀ 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 stuﬀ not in appcache Oﬄine 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: ... <iframe src=‘/’></iframe> </body> </html>

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.

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 ﬁgures 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 eﬃciency 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

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

Connection state Taking online and oﬄine events at face value

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

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

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

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

Thanks andre@labs.ft.com @triblondon, @FTLabs Do you ant to build this
stuﬀ? Join in. [email protected]

Offline rules (Full Frontal 2012)

Offline rules (Full Frontal 2012)

More Decks by Andrew Betts

Other Decks in Technology

Featured

Transcript