1. Home
  2. Getting Started
  3. What is Caching Strategies in PWA and how to use it?

What is Caching Strategies in PWA and how to use it?

Cache is a great tool you can use when building your app, as long as the cache you use is appropriate for each resource. Several caching strategies are described in the PWA Caching Strategies

First, go to WordPress Dashboard -> Navigate to PWA -> Advanced -> “Caching Strategies” in this option we are providing four Caching Strategies and then click on the save changes button.

Scroll down little to see this option

Default caching strategy: In this default caching strategy four option will be displayed as per your requirement you can enable those options and then click on the “Save Changes” button.

  • Stale While Revalidate: The stale-while-revalidate pattern allows you to respond the request as quickly as possible with a cached response if available, falling back to the network request if it’s not cached. The network request is then used to update the cache.
  • Network First: By default, it will try and fetch the latest request from the network. If the request is successful, it’ll put the response in the cache. If the network fails to return a response, the cached response will be used.
  • Cache First: Cache First strategy is to check the cache before going to the network. This is great for caching on the fly and optimizing for repetitive asset requests since it only hits the network on ‘fresh’ assets.
  • Network Only: I find this strategy to be the ‘norm’ for most applications today. This is exactly how it sounds, network requests only with no cache. This is for assets where any cached version is unacceptable or too risky.

Caching strategy for CSS and JS Files: By using this option you can cache CSS and JS files In caching strategy for CSS and JS files four option will be displayed as per your requirement you can enable those options and then click on the “Save Changes” button.

Caching strategy for images: By using this option you can cache images
In caching strategy for images, four option will be displayed as per your requirement you can enable those options and then click on the “Save Changes” button.

Caching strategy for fonts: By using this option you can cache CSS and JS files In caching strategy for fonts four option will be displayed as per your requirement you can enable those options and then click on the “Save Changes” button.

That’s it for this tutorial!

We hope we’ve clear your doubts in case If you have any feedback or questions, Just contact us here and we are always available for you.

Updated on July 19, 2019

Was this article helpful?

Related Articles

Leave a Comment