Under the hood, PWAs really work like websites. So just like with any website, resources are fetched from the network (and therefore updated) when they're requested by the browser.

Browsers use the HTTP cache mechanism to automatically cache these resources. So sometimes, browsers may serve an outdated version of the resource instead of the updated version from the network.

In this article, we'll walk you through different methods you can use to ensure that this doesn't happen and that resources stay fresh when you need them to be.

Append any parameter to the URL of the resource whenever you update it. For example add ?v=2 to turn https://example.com/image.jpg into https://example.com/image.jpg?v=2. Browsers consider these two URLs completely different resources. They won't serve a cached version of the former when you purposely request the latter in your code. Some apps append a version number to resources automatically as part of their build process.

When a resource is requested from a server, the server responds with the resource itself (image data, a JSON file, an audio file...) but also with a bunch of headers, which instruct the browser what it can or can't do with it.

One of these headers is the Cache-Control header, which lets you give the browser directives about how a particular resource must be cached and revalidated. There are a bunch of different directives you can set — provided that you also control the server that responds to the request.

To avoid caching altogether, simply set the Cache-Control header to no-cache. There are other possible values you can look into, but for most of them, you're better off using the Cache API available in service workers (more on that below).

The HTTP Cache mechanism doesn't give you much control over how resources are fetched and cache. Nowadays, you're better off using the Cache API available in service workers. The Progressier caching strategy builder takes advantage of that API and lets you configure strategies without writing any code.

To prevent caching completely, create a new Network First strategy and use a Method is GET filter to target all resources.

With that strategy, resources will always be fetched from the network first and never from the cache. You can also be more specific and target only specific resources.

With all the previous methods, resources will be updated when the page is reloaded. But what happens when someone has your PWA installed and open. When they open the app from their homescreen, it won't necessarily reload the page. How do you force the PWA to reload the page then?

When I built The Coronavirus App, I had to do just that. And rather than actually trying to listen for resource updates, I used a simple trick: force a reload of the page when the user has spent more than 30 minutes on it.

Display a full screen model with a Tap to refresh button — which, when clicked, reloads the page and re-fetches all resources. There may or may not be actual resources to update, but it gives the illusion that it does.