This document discusses designing websites to work offline. It argues that offline experiences should not be treated as errors, and that offline capabilities provide benefits like privacy, security, performance and robustness. Modern techniques like service workers, app caching, CouchDB and PouchDB enable offline-first websites. The document proposes that Drupal 8 could provide a remote database backend using its REST API and modules like Relaxed and Replication, allowing frontend apps to access content offline using standard synchronization tools.

1. Let's Take Drupal Offline!

2. Dick Olsson
Twitter: @dickolsson
Drupal.org: dixon_

3. Agenda
1. How we think about users and connectivity
2. What's an “offline” website?
3. Reasons to design for offline
4. Are we there yet?
5. Where's Drupal 8?

4. 1. How we think about users and
connectivity
Attribution: https://www.flickr.com/photos/kansirnet/

5. Users on latest technology and robust connection
People are getting newer faster phones
Connectivity will solve itself over time

6. Wrong!

7. Non-negotiable
Geography (e.g. valleys, buildings)
Transportation (e.g. trains, tube)
Over-crowded places (e.g. DrupalCon)
Attribution: https://www.flickr.com/photos/footfun/

8. “Once out of bed, Internet and apps are used almost
constantly, peaking during the daily commute with
around 70 percent usage”
- Ericsson
Traffic and Market Report, June 2012
Attribution: https://www.flickr.com/photos/59949757@N06/

9. Offline is a part of normal life

10. 2. What's an “offline” website?

11. “We live in a disconnected & battery powered world,
but our technology and best practices are a leftover
from the always connected & steadily powered past.”
- offlinefirst.org

12. It's about putting the user first
and not think about her position or connectivity
as a state of error

14. Offline apps are not new,
but the “offline-first” mantra is

15. Examples
1. Download all pages in the main menu
on first visit
2. Download search results for popular queries
on first visit, like php.net

16. 3. Reasons to design for offline

17. Privacy
Users controll their own data, literally
Often no need to share preferences and personal data
with the central database
Decentralization is a good thing

18. Security
Do you really need all the data everywhere?
Minimizes the attack vector of your app

19. Performance
We put things on CDNs to get closer to the user
Put it in my pocket instead!

20. Robustness
In the Tube? Or server maintenance?
Your app doesn't care

21. So far
1. How we think about users and connectivity
2. What's an “offline” website?
3. Reasons to design for offline

22. 4. Are we there yet?

23. What's required?
A. The app itself (e.g. html, css, js)
B. Remote database (that syncs over HTTP)
C. Local database (that syncs over HTTP)
D. Runtime (e.g. web browser)

24. “Any application that can be written in JavaScript, will
eventually be written in JavaScript”
- Jeff Atwood
“Atwood's Law”

25. A. The app itself
Angular JS
Ember JS
React JS
Hood.ie
etc. etc...

26. B. Remote database
CouchDB
Remotestorage.io
both standardizes synchronization over HTTP

27. C. Local database
PouchDB (works with CouchDB)
Hood.ie (works with CouchDB)

28. “At some point in time recently, the browser
transformed from being an awesome interactive
document viewer into being the world's most advanced
and widely-distributed application runtime”
- Tom Dale
Progressive Enhancement is Dead

29. D. Runtime
HTML5
Appcache
Service Workers

30. Appcache
Cache manifest for assets (e.g. html, css, js, img etc)

31. Service Workers
A background process that can act like a proxy
between your app and databases (local and remote)
Not yet good browser support

32. 5. Where's Drupal 8 in all of this?
Attribution: https://www.flickr.com/photos/adamnewulm/

33. “Headless Drupal” is a step in the right direction
Attribution: https://www.flickr.com/photos/cgc76/

34. But “headless” misses the point
We should use the same technologies to build for
“offline-first” instead

35. Drupal 8 would be your remote DB

36. But the REST API in Drupal 8 core is missing
Revisioning
Synchronization
File attachments

37. Relaxed Web Services
http://drupal.org/project/relaxed
Replication Web Service
http://drupal.org/project/replication
These modules implement the same
HTTP and sync API as CouchDB

38. When we standardize the HTTP API
the frontend app can use standard tools, such as
PouchDB (works with CouchDB)
Hood.ie (works with CouchDB)

39. Reimagining best practices and patterns
will still be hard

40. Conclusions
Offline is a non-negotiable part of normal life
Don't treat offline as an error
Privacy, security, performance, robustness
Possible to build offline capable websites
with Drupal 8

41. Resources
http://offlinefirst.org
http://blog.hood.ie/2013/11/say-hello-to-offline-first
http://alistapart.com/article/offline-first

42. Thanks!
Questions?
Twitter: @dickolsson
Drupal.org: dixon_