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?
Top Related