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
Slide 2
Slide 2 text
Jai Santhosh
@jaisanth
Slide 3
Slide 3 text
W I T H O U T I N T E R N E T…
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
L E T ’ S
G E T
A L I L
S E R I O U S
Slide 6
Slide 6 text
3.4 billion Internet users
5.6 hours per day
SOURCE: KLEINER PERKINS INTERNET TRENDS REPORT 2017
In India alone, 355 million users (~10%)
Slide 7
Slide 7 text
T H I N G S A R E N O T I D E A L …
Flaky Connections
Users switch off data!
Slide 8
Slide 8 text
O F F L I N E F I R S T ! !
Slide 9
Slide 9 text
Browser Internet
Some sort of cache
O F F L I N E F I R S T
Slide 10
Slide 10 text
S E R V I C E W O R K E R ! !
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
Slide 11
Slide 11 text
A S A T H U M B R U L E
• For URL addressable resources, Use Cache API
• For everything else, use IndexedDB
Slide 12
Slide 12 text
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?
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
Web App Internet
W I T H S E R V I C E W O R K E R . .
IndexedDB
Service Worker
Slide 15
Slide 15 text
Web App Internet
B E T T E R I F…
IndexedDB
Service Worker
Slide 16
Slide 16 text
More often than not
Write data
is
closer to your Data Model
Slide 17
Slide 17 text
P E R S I S T I N G D ATA S T O R E
Data Model
Data Store
Slide 18
Slide 18 text
P E R S I S T I N G D ATA S T O R E
Data Model
Redux Store
Slide 19
Slide 19 text
https://github.com/jevakallio/redux-offline
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
R E D U X O F F L I N E
https://github.com/jevakallio/redux-offline
Slide 22
Slide 22 text
R E D U X O F F L I N E
https://github.com/jevakallio/redux-offline
You can have more offline strategies..
Slide 23
Slide 23 text
This is in-memory…
You need to be careful!
Slide 24
Slide 24 text
For server-side persistence
and
a faster offline-online sync…
Slide 25
Slide 25 text
P O U C H D B
https://pouchdb.com/
One of the popular options is
Slide 26
Slide 26 text
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/
Slide 27
Slide 27 text
P O U C H D B
https://pouchdb.com/
Slide 28
Slide 28 text
P O U C H D B
• onChange is useful for better UX
• Design UX for offline mode & online mode
Slide 29
Slide 29 text
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!!
Slide 30
Slide 30 text
What about size limitations?
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
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