Persisting Data with IndexedDB
- Understand how to leverage IndexedDB to store offline data
- Provide a user experience that works regardless of network connectivity
a client-side storage mechanism for persisting data in a user's browser regardless of network availability
What other options do we have for storing data in the browser?
- Cookies: pre-HTML5, can't store much data
- LocalStorage & Sessionstorage: adheres to CORS, can store more information
- Cache Storage: built-in with the browser, expanded to support Service Workers and AppCache
Why so many options?
- increasing complexity of applications required more flexibility in storage
- each storage option varies in size limits, security, persistence and allowed data types
- the internet is terrible and we don't know what we're doing
What is IndexedDB good for?
- storing larger and more complex datasets (within reason)
- persisting data without expiration so it can be available offline
- robust querying
- the API is absolutely brutal
Fetch and checkout the 'before-db-lesson' branch of the offline news repo
- brought in webpack, updated SW cache to add `bundle.js`
- fetching articles from the server rather than hardcoding
- allowing users to click an article that will save it for offline reading (not implemented yet)
What Are Our Goals?
- Display a notification if we are online or not
- Listen for changes in our connection status and display an appropriate list of articles
- If we are online => fetch and display the latest articles from the server
- If we're not online => display any articles saved to indexedDB for offline reading