Progressive Web Apps By Example: Part 3

We explore caching data for offline use.

This article is part of the series that starts with Progressive Web Apps By Example: Part 1.

Sidebar into Cache API Quota

Before we dive into storing data for offline usage, we first explore the quota for the Cache API for a particular origin (essentially the web application). Cache API is used under the hood by service workers (for caching the application’s code and resources).

For browser’s except iOS Safari, the quota depends on the device’s volume size; ranging from 50 MB to 20 GB. For iOS Safari it is 50 MB. Additional details on this are available from the article: What is the Service Worker — Cache Storage Limit? How Much Your Progressive Web App (PWA) Can Store.

With this in mind, the practical quota is 50 MB for a cross-platform web application.

For reference, our simple application used 434 KB; the vast majority of which is third-party libraries.

note: Spent a bit of time trying to track down precisely how we used up 434 KB (as reported by Chrome) as the bulk of the application is a single JavaScript bundle that is only 118 KB as reported by GitHub pages. Did not come to a satisfactory answer.

note: Another concern, currently with an unsatisfactory answer, is how much memory a browser can safely consume; especially on mobile where resources are tighter. Given that a Progressive Web Application is likely a longer-lived web application, this is something to be concerned about.

Offline Data Storage Options

Now to the focus of this article; storage of data. Today, there are three universally available options for web applications:

• Cookies: Old school and prone to security issues; use Web Storage API instead
• Web Storage API: Available in two flavors; sessionStorage (temporary) and localStorage (persistent). Available on virtually all browsers. Practical quota limited to 5 MB of data. Synchronous access to key / value pairs of strings
• IndexedDB: Available on virtually all browsers. Practical quota limited to 50 MB of data. Asynchronous API for client-side storage of significant amounts of structured data, including files/blobs

Observations:

• One might come across Web SQL. It is depreciated and is not universally available; use IndexDB instead
• The Web Storage API and IndexedDB storage options are not limited to Progressive Web Applications. At the same time, they are particularly useful for storing data for offline usage with them

Web Storage API Example

In this example, we update our example to persist a single value to and from a form input using localStorage.

The implementation is provided by a component; src/components/LocalStorage.js:

Using Chrome Developer Tools, we can inspect the stored value in localStorage.

IndexedDB Example

In this example, we fetch data from a REST API (a list of Todos), store it in IndexedDB for offline use, and display it.

Rather than directly interfacing with IndexedDB (a bit complicated), we use a third-party library (Dexie.js) to simplify the process.

The core functionality is provided in src/apis/todos.js:

We then call fetchTodos in src/components/IndexedDB to display the Todos:

Using Chrome Developer Tools, we can inspect the IndexedDB data:

Next Steps

In the next article, Progressive Web Apps By Example: Part 4, we continue our exploration by turning our web application into a Progressive Web Application.