Andrew Betts: Offline rules
Andrew Betts (@triblondon) was speaking at Full Frontal about client storage, these are my notes from his talk.
The Financial Times has been distributing content for 125 years. Their history can help us with our digital future. Every evening their presses start printing 600 pages a second and it is in people's hands the next morning. This is as efficient as it can be. HTML5 is a long way from efficient! We are in the primordial soup of HTML. Newspapers have a number of features that web can only dream of:
- offline
- portable
- long battery life
- etc.
The FT and Economist web apps are their first steps on the way to making things better for web. The specific challenge is making things work offline. When you go offline you lose a lot of traditional web best practices, it makes everything harder.
Client side storage options
- Cookies
- localStorage
- indexDB
- AppCache
Legal issues with the cookie directive - it's not just cookies. User attitude is typically: Whatever. Technical implementations differ - in Firefox AppCache and indexDB have different notification UIs with the same text!
Performance of each storage option varies wildly - orders of magnitude. Forces you to use inapropriate technologies for the task just to get performance.
95% of our page is the same from one page to the next but we're loading it all on every page. Serve a bootstrapper first then load in the relevant content, don't load what you don't need. Page acts as a front controller.
Taming the appCache
Write a manifest that lists the resources that you want to use offline.
- Any page with a manifest will get cached even if you don't add it to the manifest.
- Anything in the cache will be served from the cache, even if online.
- IE with not populate an appCache unless the manifest is cachable.
- FF won't store unless HTTP headers are correct.
- when you update the manifest, all all resources will be downloaded again.
- A request has to completely fail (i.e. timeout) before we use a fallback.
What to cache
- Fonts
- Sprites
- Images
- Fallback bootstrap
Be aware of storage limits, they are low. In iOS the max across all stores is 65 meg. Stores in UTF-16 which halves the amount of text you can store compared to ASCII. At the FT they hack this with character encoding. There is a blog post about this and it's not much code.
Connection state
How do we know if we are online or offline. (e.g. connnected to a mifi when it doesn't have a signal.) window.navigator.onLine === true means we might be online.
Convey what you know about the connection via the UI - not what the browser tells you. Offer users control over this, they might know better than you.
Where are we?
Web sockets started out as a pile of hacks and now they are in the spec. Hopefully we will be there in a couple of years but don't rely too heavily on the APIs just now.