The document discusses building applications with an "offline first" approach. It outlines techniques for making apps work offline using tools like the HTML5 AppCache, PouchDB for syncing shared data, imgcache.js for saving images offline, and ydn-db for private user data. The goal is to provide a seamless experience for the user even when offline. Key aspects covered include publishing and reading news content offline, handling shared vs private data storage, and checking network connectivity.

1. OFFLINE FIRST
Better UX, faster apps

2. Software Engineer
PhD in Computer Science
Codemotion speaker
Rollnext Co-founder
Salvatore A. Romeo

3. » The problem
» Our goals
» Some examples
» UX e DX
» Making an offline first app: dev techniques
» Shared Data VS User Data
» The future

7. Something in common?

8. Goal
Make the user never break the experience

9. Some examples

14. UX: Why offline?

15. UX: Why offline?
1. Progressive enhancement

16. UX: Why offline?
1. Progressive enhancement
2. Fast / No lags

17. What about DX?
Is it really more complicated?

18. Making an app: a public news room
» The user can publish news with images
» The user sees the news published by all users
» The user has a private profile
» Syncing Shared data VS Syncing Private data

19. Making an offline app: the tools
1. The Html5 AppCache and Phonegap
2. Save the data, sync automatically: PouchDB
3. Saving images offline: imgcache.js
4. Saving Private Data: ydn-db
5. ‘Are we Online?’ check: OnlineJS

20. Step 1: the app must work offline

21. Step 1: the app must work offline
=

22. Step 1: the app must work offline
=

23. Step 1: the app must work offline
=

24. The HTML5 AppCache

25. The HTML5 AppCache
Waiting for the ServiceWorker… a javascript module:
1. Enable/Disable the offline resources
2. Specify the resources to save offline
3. Clean the manifest

26. The HTML5 AppCache
1. Enable/Disable the offline resources (iframe)

27. The HTML5 AppCache
1. Enable/Disable the offline resources (iframe)

28. The HTML5 AppCache
1. Enable/Disable the offline resources (server side)

29. The HTML5 AppCache
1. Enable/Disable the offline resources (server side)

30. The HTML5 AppCache
2. Specify the resources to save offline (cookies)

31. The HTML5 AppCache
2. Specify the resources to save offline (cookies)

32. The HTML5 AppCache

33. The HTML5 AppCache
3. Clean the manifest (iframe + cookies)

34. The HTML5 AppCache
3. Clean the manifest (server side)

35. The HTML5 AppCache
1.
2. The cookie _manifest is set with those resources
3. An iframe is set and points to the server
4. The server parsers the resources in the cookie and
returns the corresponding manifest file
5. Available as an angular service at
https://github.com/plugback/angular/blob/master/manifest

36. Step 2: publishing the news

37. Step 2: publishing the news
Before:

38. Step 2: publishing the news
Before:
Now:

39. Step 2: publishing the news
Before:
Now:

40. Step 2: publishing the news
Before:
Now:

41. PouchDB
Somewhere in your code configuration:

42. PouchDB
Somewhere in your code configuration:

43. PouchDB
Somewhere in your code configuration:

44. PouchDB
Somewhere in your code configuration:
API:

45. Step 3: reading the news

46. Step 3: reading the news

47. Step 3: reading the news
Before:
Now:

48. Step 3: reading the news
Before:
Now:

49. Step 4: saving the images

50. Step 4: saving the images

51. Step 4: saving the images
We will use imgcache.js and a directive for img tags
https://github.com/chrisben/imgcache.js

52. Step 4: saving the images
We will use imgcache.js and a directive for img tags
https://github.com/chrisben/imgcache.js

53. Step 4: saving the images
We will use imgcache.js and a directive for img tags
https://github.com/chrisben/imgcache.js

54. Step 4: saving the images
We will use imgcache.js and a directive for img tags
https://github.com/chrisben/imgcache.js

55. The cache directive

56. The cache directive

57. The cache directive

58. The cache directive

59. The cache directive

60. The cache directive

61. Step 5: user private data

62. Step 5: user private data
PouchDB will sync everything with everyone!

63. Step 5: user private data
PouchDB will sync everything with everyone!

64. Step 5: user private data
PouchDB will sync everything with everyone!

65. Step 5: user private data
PouchDB will sync everything with everyone!

66. Step 5: user private data
PouchDB will sync everything with everyone!
For private data we use another approach: ydn-db
https://github.com/yathit/ydn-db

67. Step 5: user private data
PouchDB will sync everything with everyone!
For private data we use another approach: ydn-db
https://github.com/yathit/ydn-db
API:

68. Step 5: user private data
Private data should be synchronized when online.

69. Step 5: user private data
Private data should be synchronized when online.
navigator.onLine is not trustable!

70. Step 5: user private data
Private data should be synchronized when online.
navigator.onLine is not trustable!
https://github.com/PixelsCommander/OnlineJS will set the variable
window.onLine to true when the user is really
online!

71. Step 5: user private data
Private data should be synchronized when online.
navigator.onLine is not trustable!
https://github.com/PixelsCommander/OnlineJS will set the variable
window.onLine to true when the user is really
online!
You can use it also for online only tasks (search, real
time data, chat, …)

72. The Future
Internet everywhere?

73. References
https://github.com/plugback/angular/blob/master/manifest
http://pouchdb.com/
http://www.iriscouch.com/
https://github.com/chrisben/imgcache.js
https://github.com/yathit/ydn-db
https://github.com/PixelsCommander/OnlineJS
http://www.html5rocks.com/en/features/offline
https://plus.google.com/+IlyaGrigorik/posts/WPZsWr4QGqR
http://www.theodo.fr/blog/2014/11/how-to-build-web-applications-work-offline-
pouchdb/
http://nolanlawson.com/2014/10/03/offline-first-is-people-first
http://www.lukew.com/ff/entry.asp?1902
https://github.com/pazguille/offline-first

74. github.com/salvatoreromeo
me@salvatoreromeo.com
@romeosalv
linkedin.com/in/salvatoreromeo
THANK YOU