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.
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
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
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
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, …)