Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
OFFLINE FIRST
Better UX, faster apps
Software Engineer
PhD in Computer Science
Codemotion speaker
Rollnext Co-founder
Salvatore A. Romeo
» The problem
» Our goals
» Some examples
» UX e DX
» Making an offline first app: dev techniques
» Shared Data VS User Da...
Something in common?
Goal
Make the user never break the experience
Some examples
UX: Why offline?
UX: Why offline?
1. Progressive enhancement
UX: Why offline?
1. Progressive enhancement
2. Fast / No lags
What about DX?
Is it really more complicated?
Making an app: a public news room
» The user can publish news with images
» The user sees the news published by all users
...
Making an offline app: the tools
1. The Html5 AppCache and Phonegap
2. Save the data, sync automatically: PouchDB
3. Savin...
Step 1: the app must work offline
Step 1: the app must work offline
=
Step 1: the app must work offline
=
Step 1: the app must work offline
=
The HTML5 AppCache
The HTML5 AppCache
Waiting for the ServiceWorker… a javascript module:
1. Enable/Disable the offline resources
2. Specify ...
The HTML5 AppCache
1. Enable/Disable the offline resources (iframe)
The HTML5 AppCache
1. Enable/Disable the offline resources (iframe)
The HTML5 AppCache
1. Enable/Disable the offline resources (server side)
The HTML5 AppCache
1. Enable/Disable the offline resources (server side)
The HTML5 AppCache
2. Specify the resources to save offline (cookies)
The HTML5 AppCache
2. Specify the resources to save offline (cookies)
The HTML5 AppCache
The HTML5 AppCache
3. Clean the manifest (iframe + cookies)
The HTML5 AppCache
3. Clean the manifest (server side)
The HTML5 AppCache
1.
2. The cookie _manifest is set with those resources
3. An iframe is set and points to the server
4. ...
Step 2: publishing the news
Step 2: publishing the news
Before:
Step 2: publishing the news
Before:
Now:
Step 2: publishing the news
Before:
Now:
Step 2: publishing the news
Before:
Now:
PouchDB
Somewhere in your code configuration:
PouchDB
Somewhere in your code configuration:
PouchDB
Somewhere in your code configuration:
PouchDB
Somewhere in your code configuration:
API:
Step 3: reading the news
Step 3: reading the news
Step 3: reading the news
Before:
Now:
Step 3: reading the news
Before:
Now:
Step 4: saving the images
Step 4: saving the images
Step 4: saving the images
We will use imgcache.js and a directive for img tags
https://github.com/chrisben/imgcache.js
Step 4: saving the images
We will use imgcache.js and a directive for img tags
https://github.com/chrisben/imgcache.js
Step 4: saving the images
We will use imgcache.js and a directive for img tags
https://github.com/chrisben/imgcache.js
Step 4: saving the images
We will use imgcache.js and a directive for img tags
https://github.com/chrisben/imgcache.js
The cache directive
The cache directive
The cache directive
The cache directive
The cache directive
The cache directive
Step 5: user private data
Step 5: user private data
PouchDB will sync everything with everyone!
Step 5: user private data
PouchDB will sync everything with everyone!
Step 5: user private data
PouchDB will sync everything with everyone!
Step 5: user private data
PouchDB will sync everything with everyone!
Step 5: user private data
PouchDB will sync everything with everyone!
For private data we use another approach: ydn-db
htt...
Step 5: user private data
PouchDB will sync everything with everyone!
For private data we use another approach: ydn-db
htt...
Step 5: user private data
Private data should be synchronized when online.
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://gith...
Step 5: user private data
Private data should be synchronized when online.
navigator.onLine is not trustable!
https://gith...
The Future
Internet everywhere?
References
https://github.com/plugback/angular/blob/master/manifest
http://pouchdb.com/
http://www.iriscouch.com/
https://...
github.com/salvatoreromeo
me@salvatoreromeo.com
@romeosalv
linkedin.com/in/salvatoreromeo
THANK YOU
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si sincronizzi automaticamente
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si sincronizzi automaticamente
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si sincronizzi automaticamente
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si sincronizzi automaticamente
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si sincronizzi automaticamente
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si sincronizzi automaticamente
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si sincronizzi automaticamente
Upcoming SlideShare
Loading in …5
×

Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si sincronizzi automaticamente

7,097 views

Published on

Salvatore Romeo ci spiega come realizzare un'app completa che funzioni offline e sincronizzi automaticamente le informazioni quando la rete è disponibile, utilizzando Phonegap, AngularJS e PouchDB.

Iscriviti qui per partecipare ad altri Tech Webinar gratuiti: http://goo.gl/iW81VD

Scrivici a: training@codemotion.it
Tw: http://twitter.com/CodemotionTR

Published in: Mobile, Technology
  • Do you want a longer and thicker penis without expensive surgery, extenders or suction devices that just don't work? Introducing the Penis Enlargement Bible, a 94 page downloadable e-book that has an exclusive two step system that can growth your penis by between 2 and 4 inches within 89 days using safe natural methods  https://tinyurl.com/getpebible2019
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Unlock Her Legs - How to Turn a Girl On In 10 Minutes or Less... ■■■ https://tinyurl.com/unlockherlegss
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si sincronizzi automaticamente

  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
  4. Something in common?
  5. Goal Make the user never break the experience
  6. Some examples
  7. UX: Why offline?
  8. UX: Why offline? 1. Progressive enhancement
  9. UX: Why offline? 1. Progressive enhancement 2. Fast / No lags
  10. What about DX? Is it really more complicated?
  11. 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
  12. 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
  13. Step 1: the app must work offline
  14. Step 1: the app must work offline =
  15. Step 1: the app must work offline =
  16. Step 1: the app must work offline =
  17. The HTML5 AppCache
  18. 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
  19. The HTML5 AppCache 1. Enable/Disable the offline resources (iframe)
  20. The HTML5 AppCache 1. Enable/Disable the offline resources (iframe)
  21. The HTML5 AppCache 1. Enable/Disable the offline resources (server side)
  22. The HTML5 AppCache 1. Enable/Disable the offline resources (server side)
  23. The HTML5 AppCache 2. Specify the resources to save offline (cookies)
  24. The HTML5 AppCache 2. Specify the resources to save offline (cookies)
  25. The HTML5 AppCache
  26. The HTML5 AppCache 3. Clean the manifest (iframe + cookies)
  27. The HTML5 AppCache 3. Clean the manifest (server side)
  28. 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
  29. Step 2: publishing the news
  30. Step 2: publishing the news Before:
  31. Step 2: publishing the news Before: Now:
  32. Step 2: publishing the news Before: Now:
  33. Step 2: publishing the news Before: Now:
  34. PouchDB Somewhere in your code configuration:
  35. PouchDB Somewhere in your code configuration:
  36. PouchDB Somewhere in your code configuration:
  37. PouchDB Somewhere in your code configuration: API:
  38. Step 3: reading the news
  39. Step 3: reading the news
  40. Step 3: reading the news Before: Now:
  41. Step 3: reading the news Before: Now:
  42. Step 4: saving the images
  43. Step 4: saving the images
  44. Step 4: saving the images We will use imgcache.js and a directive for img tags https://github.com/chrisben/imgcache.js
  45. Step 4: saving the images We will use imgcache.js and a directive for img tags https://github.com/chrisben/imgcache.js
  46. Step 4: saving the images We will use imgcache.js and a directive for img tags https://github.com/chrisben/imgcache.js
  47. Step 4: saving the images We will use imgcache.js and a directive for img tags https://github.com/chrisben/imgcache.js
  48. The cache directive
  49. The cache directive
  50. The cache directive
  51. The cache directive
  52. The cache directive
  53. The cache directive
  54. Step 5: user private data
  55. Step 5: user private data PouchDB will sync everything with everyone!
  56. Step 5: user private data PouchDB will sync everything with everyone!
  57. Step 5: user private data PouchDB will sync everything with everyone!
  58. Step 5: user private data PouchDB will sync everything with everyone!
  59. 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
  60. 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:
  61. Step 5: user private data Private data should be synchronized when online.
  62. Step 5: user private data Private data should be synchronized when online. navigator.onLine is not trustable!
  63. 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!
  64. 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, …)
  65. The Future Internet everywhere?
  66. 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
  67. github.com/salvatoreromeo me@salvatoreromeo.com @romeosalv linkedin.com/in/salvatoreromeo THANK YOU

×