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.
Use Version Numbers
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.
Use Headers
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.
Force Page Reload
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?
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.
