Force Browser to Refresh CSS, JavaScript, etc

Force browser to refresh CSS, JavaScript, etc

General solution

Pressing Ctrl + F5 (or Ctrl + Shift + R) to force a cache reload. I believe Macs use Cmd + Shift + R.

PHP

In PHP, you can disable the cache by setting the expiration date to a time in the past with headers:

header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Chrome

Chrome's cache can be disabled by opening the developer tools with F12, clicking on the gear icon in the lower right corner and selecting Disable cache in the settings dialog, like this:

^{Image taken from this answer.}

Firefox

Type about:config into the URL bar then find the entry titled network.http.use-cache. Set this to false.

Force browser cache refresh for multiple resources (CSS & Javascript)

Add a "cache buster" to the url i.e. - add a query string parameter.

<script src="foo.js"></script>

becomes

<script src="foo.js?v=1"></script>

If you are making staged releases, you can then just use the version of the release as the cache buster.

How to force Chrome browser to reload .css file while debugging in Visual Studio?

There are much more complicated solutions, but a very easy, simple one is just to add a random query string to your CSS include.

Such as src="/css/styles.css?v={random number/string}"

If you're using php or another server-side language, you can do this automatically with time(). So it would be styles.css?v=<?=time();?>

This way, the query string will be new every single time. Like I said, there are much more complicated solutions that are more dynamic, but in testing purposes this method is top (IMO).

How can I force clients to refresh JavaScript files?

As far as I know a common solution is to add a ?<version> to the script's src link.

For instance:

<script type="text/javascript" src="myfile.js?1500"></script>

---

I assume at this point that there isn't a better way than find-replace to increment these "version numbers" in all of the script tags?

You might have a version control system do that for you? Most version control systems have a way to automatically inject the revision number on check-in for instance.

It would look something like this:

<script type="text/javascript" src="myfile.js?$$REVISION$$"></script>

---

Of course, there are always better solutions like this one.

Why/When is it needed to hard refresh a webpage in a browser?

Short Answer

Browsers cache CSS, JS and other files to improve the loading time of web applications and their relevant pages. Depending on how the website is implemented when a new version of the JS, CSS is added and difference in a shape and form with the old version of the file. New part of the page are calling or interacting with an old version of the file that is cached in the browser. This results in the inconsistent behaviour.

Long Answer

In old days of web applications development, pages had smaller JavaScript and CSS files if there where cool enough to go beyond the basic HTML pages. Also pages stored in separate HTML files. And the browser would load a whole new page application as you clicked on a new link.

In modern web applications the shift was towards Single Page Applications. These are applications where you have a single page that is responsible for loading on the content. All modern websites (e.g. Facebook, Netflix, etc.) have been built using the new technique.

In Single Page Applications, the same page has large JS and CSS files attached to it. That means despite the massive improvement to our internet speed, it will be in inefficient for the browser to load the whole Single Page and all its JS, CSS, IMG files every time the user does a refresh. By caching these files that means the browser now only needs to load new data content on the page. This results in far better user experience.

The downside of this was when a new JS or CSS file was released and the browser was still using the old JS or CSS file. It would impact the business logic or the layout in unpredictable ways. That why browsers introduced a HARD PAGE REFRESH option to allow the load of a single page application be forced to load from the backend server rather than the cache.

If this topic interests you you can do further read on best practice on how to setup your single page application to ensure every time you release a new JS or CSS or even images it is guaranteed that the browsers reload the content and don't use the cached assets.

JavaScript hard refresh of current page

Try to use:

location.reload(true);

When this method receives a true value as argument, it will cause the page to always be reloaded from the server. If it is false or not specified, the browser may reload the page from its cache.

More info:

• The location object

---

Related Topics