How to build mobile apps that work offline? The code examples are available on github : https://github.com/creynaud/notes-iphone-app https://github.com/creynaud/notes-server A blog post on the same subject: https://www.clairereynaud.net/blog/adding-offline-mode-to-your-mobile-app/

1. Let's take this offline
How to build mobile apps that work offline?

2. @ClaireReynaud
https://github.com/creynaud
www.babelbytes.com

3. What about you?

4. Subject of this talk
General how-to for making your apps work
offline
Examples:
iOS
Couchdb REST API
Django REST Framework

5. What do I mean by
"work offline"?

6. No network or slow network
Users shouldn't have to wait to
read content if they already
accessed it

7. No network or slow network
Users should be able to post
content all the time

8. Why make mobile
apps work offline?

9. Facebook app one year ago

10. We want a better
user experience!

11. Now users expect content when
offline

12. Mobile networks are different
Latency is high
Speed is very inconsistent, which is bad in terms
of UX
Watch the "Faster Websites: Crash Course on
Frontend Performance (Part 1/2)" talk from
Devoxx 2012

13. Your app in the wild
Try your app with the Network Conditioner

14. Let's implement an
Evernote-like app
Well, the text notes part ;)

15. In 3 steps
1. Reading notes while offline
2. Creating notes while offline
3. Updating notes while offline and solving conflicts

16. Put a revision in your
note objects!

17. Typical mobile app architecture

18. 1. Reading notes
while offline

19. Reading notes while offline
Read JSON documents from a
local cache on the mobile device

20. Wait, HTTP has a
caching mechanism,
right?

21. You need a higher level cache
You may want to do offline search requests
You may want to do offline edition
You can use CoreData on top of SQLite, or
another storage mechanism.
Depending on your needs, storing the raw
JSON document in a key/value store may be
enough.

22. What to keep from HTTP caching
though?
For example, I don't want to re-download a given
version of a JSON document if I already have it in the
HTTP cache.
This is possible with HTTP caching headers:
Cache-Control
Etag and If-None-Match
or Last-Modified and If-Modified-Since

23. Let's see how it
works with Couchdb
REST API

24. What is Couchdb?
"A database for the web"
Couchdb is a NoSQL database
It stores JSON documents
It is schemaless

25. Why do I talk about Couchdb?
It is a great example for building a REST API
Spoiler alert: otherwise I don't use Couchdb

26. Time to play with
Couchdb

27. HTTP GET caching with ETAG
Blog post about NSURLCache, HTTP caching policies
and ETAG

28. 2. Creating notes
while offline

29. Creating notes while offline
1. Store (e.g in SQLite) the JSON document that
needs to be posted
2. Try to post the JSON document to the server in
the background
3. Mark the JSON document has successfully
posted only if POST succeeds
4. In case of failure, retry to post the
JSON document during next sync with the server

30. 3. Solving conflicts
on notes edition

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

32. Conflict detection
should be built in
your REST API!

33. Again, time to play
with Couchdb

34. What about Android
apps?

35. What about Android apps?
More or less the same:
Put a uuid and a revision on all your JSON
documents
Offline read: store your JSON Documents in
SQLite
Offline create: POST to the server in the
background and retry if needed
Offline update: handle conflicts
Try to leverage HTTP caching

36. What about
hybrid/web apps?

37. What about hybrid/web apps?
SQLite native storage: it may not be possible to
access SQLite depending on the framework you
use
HTML5 localstorage

38. What if I don't want
to use Couchdb?

39. You can use whatever you want
This is what I use, but it's really up to you

40. Let's see how it works with Django
REST framework
Put a uuid and a revision on your Note objects
Reject PUT or DELETE request if it does not
provide a revision (400 Bad request)
Reject PUT or DELETE request if the revision is
not the current one (409 Conflict)
Everything else comes out of the box!
https://github.com/creynaud/notes-server
https://awesomenotes.herokuapp.com/api/

41. Summary
Put a uuid and a revision on all your JSON
documents
Offline read: store your JSON Documents in
SQLite
Offline create: POST to the server in the
background and retry if needed
Offline update: handle conflicts
Try to leverage HTTP caching (Cache-Control,
Etag and If-None-Match headers)

42. Thanks! Questions?