Building Progressive Web Apps

Chapter 6. Storing Data Locally with IndexedDB

So far we used CacheStorage to store all of the files as well as the data our app needs. When we wanted to store a list of reservations, we simply cached an HTTP response containing a JSON file with that data in CacheStorage. We were then able to fetch that file from cache and parse it every time we wanted to access the list of reservations. But what happens when the user makes a new reservation or a reservation’s status changes? At this point, we had to resort to loading a new, up-to-date JSON file from the server.

While our app was fully operational regardless of the user’s connection, can it truly be called offline-first when it relies so heavily on the server for even the simplest data manipulation?

We need a better way to handle data persistently in the browser. One that allows us to store, read, and modify data locally, without relying on the network.

In this chapter, we will add this important tool to our toolset and learn how to use a local database called IndexedDB.

Just like server-side databases, IndexedDB allows us to store data in a structured way, query it, modify it, and more. Unlike server-side databases, IndexedDB can do all of this entirely in the browser.

The chapter begins with a general introduction to IndexedDB and its syntax, and the code we will experiment with here will be unrelated to the Gotham Imperial Hotel. Later, we will take the lessons we have learned and implement them in the Gotham Imperial Hotel ...