How can I force users on to the latest version of a PWA?

Question

We have recently launched a progressive web app but have encountered issues when releasing updates to the PWA. When we push a new version of the app most of our distribution js files get renamed.

eg a file named '1.ChunkName. abc .js' might become '1.ChunkName. def .js'.

So any users who loaded the PWA before we sent out the update will be using an older version that is still looking for the old deleted file, which breaks most of the PWA's functionality. This issue is fixed if the user refreshes the page, but obviously we can't expect our users to refresh the page when they encounter an error.

Some solutions I can see are:

1. Don't delete old files to allow older versions to still work.
2. Use the service worker to check for updates.
3. Somehow use MQTT/WebSockets to get users to update to the latest version.

But I feel like all of these have major disadvantages.

So how can I make sure that a user has a seamless experience if an update is pushed out during their usage of the PWA?

Answer 1

The solution I used is to only store the common part of the filename, for example 1.Chunkname instead of 1.ChunkName.abc.js .

So when you fetch them from the cache, you can compare the first part with regex and only fallback to the full event.request.url network response when the cache is not available.

Storing all versions of content in your cache is definitely not a good strategy. The typical usage of the above is when you have different size of images (with the suffix like '-16_16', '-32_32'), you won't cache all of them. Instead, you only store one without the suffix.