Upload
codemotion
View
1.566
Download
1
Tags:
Embed Size (px)
Citation preview
» The problem
» Our goals
» Some examples
» UX e DX
» Making an offline first app: dev techniques
» Shared Data VS User Data
» The future
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
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
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
The HTML5 AppCache1.
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
Step 4: saving the images
We will use imgcache.js and a directive for img tagshttps://github.com/chrisben/imgcache.js
Step 4: saving the images
We will use imgcache.js and a directive for img tagshttps://github.com/chrisben/imgcache.js
Step 4: saving the images
We will use imgcache.js and a directive for img tagshttps://github.com/chrisben/imgcache.js
Step 4: saving the images
We will use imgcache.js and a directive for img tagshttps://github.com/chrisben/imgcache.js
Step 5: user private data
PouchDB will sync everything with everyone!
For private data we use another approach: ydn-dbhttps://github.com/yathit/ydn-db
Step 5: user private data
PouchDB will sync everything with everyone!
For private data we use another approach: ydn-dbhttps://github.com/yathit/ydn-db
API:
Step 5: user private data
Private data should be synchronized when online.
navigator.onLine is not trustable!
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!
Step 5: user private dataPrivate 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, …)
Referenceshttps://github.com/plugback/angular/blob/master/manifesthttp://pouchdb.com/http://www.iriscouch.com/https://github.com/chrisben/imgcache.jshttps://github.com/yathit/ydn-dbhttps://github.com/PixelsCommander/OnlineJShttp://www.html5rocks.com/en/features/offlinehttps://plus.google.com/+IlyaGrigorik/posts/WPZsWr4QGqRhttp://www.theodo.fr/blog/2014/11/how-to-build-web-applications-work-offline-pouchdb/http://nolanlawson.com/2014/10/03/offline-first-is-people-firsthttp://www.lukew.com/ff/entry.asp?1902https://github.com/pazguille/offline-first