sw-toolbox or indexedDB

Question

What is the best strategy to store an api response that contains a list of data while building a PWA?

1. to cache the response using sw-toolbox
   or
2. to save it in indexedDB and return from it when offline.

Answer 1

IndexedDB is a browser standard (browsers native API), that is widely supported by all major browsers and Google's recommendation for storing offline API kind of data.

As explained here, Service Worker Toolbox (or SW-Toolbox) provides some simple helpers for use in creating your own service workers. It uses IndexedDB internally. You can refer to the code here. Think of it like a jQuery solutions, which simplifies things which is otherwise still possible with added effort.

Note that sw-toolbox is on its way to retire, in favor of Workbox. SW-Toolbox non-critical bugs are unlikely to be addressed per Chrome team and its been 8 months since any feature added to it. So you have all reason to not choose SW-toolbox and consider Workbox, if you are looking for a helper library to implement Offline store to your web app.

Answer 2

You may refer with this Offline Storage for Progressive Web Apps documentation. Here are some recommendations for storing data offline:

• For the network resources necessary to load your app while offline, use the Cache API (part of service workers).
• For all other data, use IndexedDB (with a promises wrapper).

You may also check this page for the difference between Storing data with IndexedDB and Storing assets in the Cache interface.