How to Force Clients to Refresh JavaScript Files

How do I force the refresh of javascript files in a browser?

Different dev's do different things. The official way is to play nicley and use HTTP headers. Google for http heads and caching issues and you should be fine to continue on your own way.

However some browsers just ignore you so if im developing in a live environment, i use version numbers to ensure everyone gets the latest file. So you might call your original "something.js?v=1.0". Make a small change then change it to "?v=1.1".. you get the idea. Because the link is different, it should completely ignore caching in most cases.

I tend to use both methods just to be as sure as possible

How to force refresh client js from server side?

You can use HTTP's cache-control mechanisms to control the browser's caching.

When serving a copy of your JS file, include an ETag and/or Last-Modified header in the response. Also include a "Cache-Control: must-revalidate" header. This tells the browser that it must check back with the server every time, and it can send an If-None-Match and/or If-Modified-Since header in future requests to ask the server to send the file only if it's changed.

If you'd like to avoid the load of browsers checking with the server every time, and it's OK for the changes to not take effect immediately, you can also include a Date header with the current time and an Expires header set to some point in the future — maybe 12 or 24 hours. That allows the browser to use its cached copy for the specified amount of time before it has to check back with your server again.

HTTP's cache-control features are pretty robust, but there are plenty of nuances, such as controls for intermediate caches (e.g. other systems between your server and the user's browser). You'll want to read about caching in HTTP overall, not just the specific header fields that I've mentioned.

How can I force SPA clients to hard refresh if there is a new build?

As this question has been tagged with progressive-web-apps I'm going to assume that it's installing a service-worker, which is what is aggressively caching the resources.

This post runs though showing a "new version available" popup for PWAs - even if it's not the particular behaviour you want, it explains a lot about how service-workers get updated.

This question/answer also goes over how often the service-worker is checked for updates.

This question/answer goes over pros/cons of always using skipWaiting to keep the client immediately up to date.

Edit: If you're just dealing with regular HTTP Cache, try using location.reload(true) (reload with the forcedReload flag set) when you detect that there's a newer version on the server. In the past I've done this by putting the release number into the js code at build/release time, and having the server add its release number to every response as a header. A simple compare of the values after an ajax call can confirm whether the ui and server release numbers match and take action when they don't.

Force refresh of client browser

You can rename the file, or just add a random parameter when loading the file:

<script src="/javascripts/application.js?version=4" type="text/javascript"></script>

---

Related Topics