Dealing with Data Offline in Web Apps

This talk explores and help us understand how we can elevate your apps with a Service Worker and explore various options of data management when you are offline. Some suggestions include redux-offline, pouchdb, a simple IndexedDB.

The talk also addresses into how can you wire your application such that heavy offline data can be seamlessly sync-ed once the user gets online and few approaches of how to manage the behaviour of your APIs to help you with this aspect.

Transcript

1. D E A L I N G W I T H D ATA O F F L I N E I N W E B A P P S
2. Jai Santhosh @jaisanth
3. W I T H O U T I N T E R N E T…
5. L E T ’ S G E T A L I L S E R I O U S
6. 3.4 billion Internet users 5.6 hours per day SOURCE: KLEINER PERKINS INTERNET TRENDS REPORT 2017 In India alone, 355 million users (~10%)
7. T H I N G S A R E N O T I D E A L … Flaky Connections Users switch off data!
8. O F F L I N E F I R S T ! !
9. Browser Internet Some sort of cache O F F L I N E F I R S T
10. S E R V I C E W O R K E R ! ! https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
11. A S A T H U M B R U L E • For URL addressable resources, Use Cache API • For everything else, use IndexedDB
12. S E R V I C E W O R K E R Straightforward for Read-only offline mode What about if its write heavy?
13. S E R V I C E W O R K E R C A C H E A P I Browser Browser IndexedDB Service Worker new Response( ) localForage, idb-keyval, ydn-db, etc. For URL addressable resources IndexedDB with a Promise wrapper
14. Web App Internet W I T H S E R V I C E W O R K E R . . IndexedDB Service Worker
15. Web App Internet B E T T E R I F… IndexedDB Service Worker
16. More often than not Write data is closer to your Data Model
17. P E R S I S T I N G D ATA S T O R E Data Model Data Store
18. P E R S I S T I N G D ATA S T O R E Data Model Redux Store
19. https://github.com/jevakallio/redux-offline
20. R E D U X O F F L I N E • Uses redux-persist • Persists redux store to disk on every change • Reload automatically on startup • Redux Offline creates an offline subtree • Manages an array of an Outbox
21. R E D U X O F F L I N E https://github.com/jevakallio/redux-offline
22. R E D U X O F F L I N E https://github.com/jevakallio/redux-offline You can have more offline strategies..
23. This is in-memory… You need to be careful!
24. For server-side persistence and a faster offline-online sync…
25. P O U C H D B https://pouchdb.com/ One of the popular options is
26. P O U C H D B • Enables you to store data locally while offline • Synchronizes with CouchDB-like servers once online • 46kb (gzipped) • Works on all browsers and Node.js https://pouchdb.com/
27. P O U C H D B https://pouchdb.com/
28. P O U C H D B • onChange is useful for better UX • Design UX for offline mode & online mode
29. H A N D L I N G D ATA O F F L I N E • Data Validations • Concurrent Data Edits • Managing offline <-> online sync-ing better Always have versions for your data!!
30. What about size limitations?
31. H O W M U C H C A N Y O U S T O R E ? https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa
32. Q U O TA M A N A G E M E N T A P I https://developer.mozilla.org/en-US/docs/Web/API/StorageQuota
33. T H A N K S ! @jaisanth