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 https://blog.vuestorefront.io/caching-on-production.

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

https://blog.vuestorefront.io/caching-on-production

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.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay