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.
These features are implemented with the help of a client-side cache. This local cache stores data from resources as they are fetched. Once a resource has been cached, the service worker may consult the cache on subsequent 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|
||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.
||Image files served from the application|
Caching in the Apollo GraphQL client
The Venia implementation storefront uses the Apollo GraphQL client to make requests to the Magento 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
This lets the Apollo client maintain its cached data even when the user closes the application.
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