Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si sincronizzi automaticamente
25 likes8,791 views
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.
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
- 8. Goal Make the user never break the experience
- 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 =
- 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)
- 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
- 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, …)