Persisting Data with IndexedDB

Goals:

  1. Understand how to leverage IndexedDB to store offline data
  2. Provide a user experience that works regardless of network connectivity

What is IndexedDB

a client-side storage mechanism for persisting data in a user's browser regardless of network availability

Client-Side Storage

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

Any Downsides?

  • the API is absolutely brutal

Let's Practice

Fetch and checkout the 'before-db-lesson' branch of the offline news repo

`npm install`

`webpack --watch`

`node server.js`

`http://localhost:3000`

What's Changed?

  • 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