JavaScript

How to use IndexedDB to build Progressive Web Apps

In this previous post, I talked about implementation of IndexedDB inside Service Workers. If you don’t understand that part, please read that article to clear up some concepts about service workers.

Getting started

Single page applications (SPAs) demand data to be loaded from a web service. This data then gets injected into the DOM by the controller. Angular, React and other front-end libraries follow the same approach.

You can cache static web pages and assets, but that won’t be enough. You also need to store some data for online viewing. When a web app makes an HTTP request for some data and the user doesn’t have internet connectivity, we can serve this data from the local database cache.

IndexedDB is an alternative to the Web SQL (deprecated) database. It is a key-value pair NoSQL database and supports large scale storage (up to 20%–50% of hard drive capacity). It supports many data types like number, string, JSON, blob, and so on.

IndexedDB adheres to a same-origin policy. That means any other applications running on different origins cannot access the data of other origins. It is event (DOM) driven, transactional (atomic operations) and its API is mostly asynchronous. It is supported in all major…