Updating WebCLient does not force the browser to clear old cache

[the-hotmann]

This happens for every version.

I updated to the new version (2.5.0 => 2.5.1) and when I open it in the Browser it first shows v2.5.1, but hitting normal reload will call the cached version offline and shows 2.5.0.

This should be prevented by forcing the browser to update its cache or to overwrite it with the newer version. But TTL of the Cache should not get touched as this woulod result in not having it offline available for long time.

[acelaya]

It's actually a bit more complex than that.

On the one hand, every new release includes new assets with a unique hash calculated at build time. That should, in theory, prevent cache issues when a new version is released.

However, that depends on the index.html to not be cached, as having an outdated version pointing to the old assets will make the browser continue using the old ones.

Usually you solve that by disabling any caching on html files. These kind of SPAs only have one, so it's usually ok. I think this needs to be adjusted on app.shlink.io

But that's not it. The app also includes a service worker, which introduces yet another caching layer and extra complexity.

It is required to be able to add the app to mobile devices as a PWA (this is actually not true. You can still add the app as a PWA, but it won't work without internet, which is ok in this case, as the app would be uselsess anyway), and to enable offline capabilities.

The service worker loads data locally, and reloads it offline, so you always get an outdated version on first load. It's a trade-off.

So, long story short, all that combined makes it a bit unpredictable. I have tried to solve caching issues in the past, but it's not there yet.

I'll try to spend a bit more time trying to get it smooth.

[acelaya]

Hey @Martinh0

I have done some changes that should mitigate this issue.

One the one hand, I have removed the service worker completely. It used to be the default for react apps, but it is not anymore. I was still dragging it from the day I created the project a couple of years ago.

That should solve the first issue you were describing, in which after updating, refreshing was taking you back to previous version.

On the other hand, I have added proper HTTP cache to the nginx inside the official docker image. This config does the next:

• Never cache html/json/manifest files. The app only includes 3 or 4 of these. One of them is the index.html file, which is the app's entry point. Not caching this file will ensure you always get the latest assets at a very low cost.
• It adds 1 month caching for images and similar assets, as they don't change that frequently.
• It adds 1 year caching to JS and CSS files, which is where most of the app's code lives. Having them cached for 1 year will ensure they are loaded just once. When you update the app, the new index.html file will point to the new JS/CSS files (as they always contain a unique hash in the name).

This config will apply either if you use the official docker image, or app.shlink.io (since the latter also uses the official docker image).

If you use other mechanisms to serve the web client, you will have to take care of setting up this caching config.