Let's take this offlineHow to build mobile apps that work offline?

www.babelbytes.com

@ClaireReynaudhttps://github.com/creynaud

What about you?

Subject of this talkGeneral how-to for making your apps workoffline

Examples:iOSCouchdb REST APIDjango REST Framework

What do I mean by"work offline"?

No network or slow network

Users shouldn't have to wait toread content if they already

accessed it

No network or slow network

Users should be able to postcontent all the time

Why make mobileapps work offline?

Facebook app one year ago

We want a betteruser experience!

Now users expect content whenoffline

Mobile networks are differentLatency is high

Speed is very inconsistent, which is bad in termsof UX

Watch the "Faster Websites: Crash Course onFrontend Performance (Part 1/2)" talk fromDevoxx 2012

Your app in the wildTry your app with the Network Conditioner

Let's implement anEvernote-like app

Well, the text notes part ;)

In 3 stepsReading notes while offline1.Creating notes while offline2.Updating notes while offline and solving conflicts3.

Put a revision in yournote objects!

Typical mobile app architecture

1. Reading noteswhile offline

Reading notes while offline

Read JSON documents from alocal cache on the mobile device

Wait, HTTP has acaching mechanism,

right?

You need a higher level cacheYou may want to do offline search requests

You may want to do offline edition

You can use CoreData on top of SQLite, oranother storage mechanism.

Depending on your needs, storing the rawJSON document in a key/value store may beenough.

What to keep from HTTP cachingthough?

For example, I don't want to re-download a givenversion of a JSON document if I already have it in theHTTP cache.

This is possible with HTTP caching headers:

Cache-Control

Etag and If-None-Match

or Last-Modified and If-Modified-Since

Let's see how itworks with Couchdb

REST API

What is Couchdb?"A database for the web"

Couchdb is a NoSQL database

It stores JSON documents

It is schemaless

Why do I talk about Couchdb?

It is a great example for building a REST API

Spoiler alert: otherwise I don't use Couchdb

Time to play withCouchdb

HTTP GET caching with ETAG

Blog post about NSURLCache, HTTP caching policiesand ETAG

2. Creating noteswhile offline

Creating notes while offlineStore (e.g in SQLite) the JSON document thatneeds to be posted

1.

Try to post the JSON document to the server inthe background

2.

Mark the JSON document has successfullyposted only if POST succeeds

3.

In case of failure, retry to post theJSON document during next sync with the server

4.

3. Solving conflictson notes edition

Solving conflicts on notes edition

When you let your user update notes while offline,conflicts will show up (even if there is no multi-useredition).

Conflict detectionshould be built in

your REST API!

Again, time to playwith Couchdb

What about Androidapps?

What about Android apps?More or less the same:

Put a uuid and a revision on all your JSONdocuments

Offline read: store your JSON Documents inSQLite

Offline create: POST to the server in thebackground and retry if needed

Offline update: handle conflicts

Try to leverage HTTP caching

What abouthybrid/web apps?

What about hybrid/web apps?SQLite native storage: it may not be possible toaccess SQLite depending on the framework youuse

HTML5 localstorage

What if I don't wantto use Couchdb?

You can use whatever you wantThis is what I use, but it's really up to you

Let's see how it works with DjangoREST framework

Put a uuid and a revision on your Note objects

Reject PUT or DELETE request if it does notprovide a revision (400 Bad request)

Reject PUT or DELETE request if the revision isnot the current one (409 Conflict)

Everything else comes out of the box!https://github.com/creynaud/notes-serverhttps://awesomenotes.herokuapp.com/api/

SummaryPut a uuid and a revision on all your JSONdocuments

Offline read: store your JSON Documents inSQLite

Offline create: POST to the server in thebackground and retry if needed

Offline update: handle conflicts

Try to leverage HTTP caching (Cache-Control,Etag and If-None-Match headers)

Thanks! Questions?