DEV Community

Cover image for Caching and local storage in PWA
Mati Andreas
Mati Andreas

Posted on

Caching and local storage in PWA

Image from

Base technologies like Vue.js, Vuex, and SSR, Service Workers are used in or team to build modern e-commerce frontends. The Vue Storefront framework PWA will be used as the application skeleton for starting a new project.

Whenever it's possible, the service worker cache is in use. For easier service worker cache management, Google provided Workbox is in use.
Service worker cache is used mainly for catalog (category, product, and attribute list and detail) and CMS (pages, blocks, banners).

The Service Workers cache works like we're consistently executing the backend requests to invalidate the local cache. It's the NetworkFirst mode. That means there is virtually no risk of stale / non-invalidated data served from the local cache

LocalStorage or IndexedDB (depending on browser support, abstracted with LocalForage library) are mainly used for storing user-based data like cart, login token, made orders, personal data, other choices (like favorite products).
The user-based cache is updated on demand (on login, viewing order list) and has no end-of-life by default. End-of-life is added case-by-case depending on the business needs.

Top comments (0)