Image

progressive-web-apps-vue-3

3 min read
Last update: December 19, 2021

Offline Databases with IndexedDB

While we can do a lot of amazing things with applications, one of the key functionality that users have come to expect is to save data after entering data. Speaking from personal experience, there’s nothing more frustrating than filling out a form only to have the page accidentally refresh and lose all the data. So in the case of our TodoMVC app, users expect that if they’ve taken the time to enter their data into the app, it will be there when they re-open the app or refresh the page.

What is IndexedDB?

Officially speaking, IndexedDB is a “NoSQL storage system.” And while this might make sense for people with backend experience, for this course, we’ll be assuming that you have no background knowledge of databases to keep things as simple as possible.

So, once again from the top, IndexedDB (i.e., Indexed Database), is essentially a native database that is built-in to the browser. What this means is that it allows you store data, get data, and update data as you need!

How does it relate to PWAs?

Since Progressive Web Apps (PWAs) are powered by browser technology, IndexedDB is one of the most common solutions for managing offline data since it is built right into the platform!

How do I see what’s in my IndexedDB instance?

Normally, you might expect to download a database client in order to interact with your database. However, because IndexedDB is built into the browser, this means that you can access your IndexedDB instance inside of the DevTools!

Screen Shot 2021-09-22 at 11.41.52 AM.png

When IndexedDB is not being used, it’s kind of boring. So let’s go ahead and show you what it looks like when we populate some data!

Screen Shot 2021-09-22 at 11.34.37 AM.png

As we can see in this view, when populated, IndexedDB allows you to navigate through your database and see what items are in there!

The Basic Anatomy of an IndexedDB Database

At a high level, an IndexedDB database consists of three main parts:

  • Database - Which in this case is called todomvcdb
  • Object Store - Which essentially contains our data which are JavaScript objects. In the example above, our todomvcdb database has a single object store called todos. And in case you’re wondering, a database can have multiple object stores!
  • Transaction - This is what we call the actions we take with the database (i.e., getting data, saving data, etc.) which we’ll dive into more in future lessons

Can other applications access IndexedDB from other apps?

The short answer is no! Every IndexedDB database is unique to the apps origin. This is typically the site domain or subdomain.

Next Steps

IndexedDB can be a complex topic, but hopefully this served as a good primer for those who are new to databases. The key thing to remember is that IndexedDB is a way for us to manage storing data using native browser technology. With that said, in the next lessons, we’ll take a look at how we interact with IndexedDB in our app!