Client-side caching is the storage of network data to a local cache for future re-use.
Client-server communication is slow and expensive. Performance is an important feature for any Progressive Web Application (PWA), so requests to the server should be minimized.
Offline mode is also a required feature for a PWA. In offline mode, the application must be able to serve pages that have been recently viewed.
Applications implement these features with the help of a client-side cache. After the application fetches network data, it stores that resource in a local cache. Once a resource has been cached, the service worker uses the cache on future requests for that resource to boost performance.
Service Worker caching#
Venia service worker#
You do not need to use Workbox to define service worker behavior, but Workbox makes this task easier by removing boilerplate code that is always used when working with service workers.
Venia uses the following caching strategies with its service worker:
The stale-while-revalidate strategy tells the service worker to use a cached response if it exists. A separate network request is made for that resource and the cache is updated for future requests.
This strategy is used when the most up to date version of a resource is not necessary for an application.
|/||The application root|
|/\/media\/catalog.*.(?:png|gif|jpg|jpeg|svg)$/||Catalog image files|
The network first strategy tells the service worker to get a resource from the network first. If a network connection cannot be made, the service worker uses the cache as a fallback.
This strategy is used for data that may change frequently on the server.
The cache first strategy tells the service worker to use the data from the cache. Unlike the stale-while-revalidate strategy, no network call is made to update the cache.
If a response is not found in the cache, a network call is made to get the resource and cache the response.
This strategy is used for non-critical assets that do not get updated very often.
|images||Image files served from the application|
When using service workers, you should add a width parameter to your images so that the correct image is returned from the cache. If an image does not have a width parameter, a cached image with the same name but an incorrect size could be returned.
Caching in the Apollo GraphQL client#
The Venia implementation storefront uses the Apollo GraphQL client to make requests to the Adobe Commerce or Magento Open Source GraphQL endpoint. It also incorporates the default InMemoryCache implementation to add caching abilities to the client.
The cache is persisted between browser sessions in
window.localstorage using the apollo-cache-persist module.
This lets the Apollo client maintain its cached data even when the user closes the application.
By default, InMemoryCache uses a cache first strategy for all queries.
This strategy is set using the
fetchPolicy prop on the
Caching for Apollo is set up in the src/drivers/adapter.js file.