Force Reload Javascript CSS In Browsers

CHANGE THE SCRIPT NAME

<!-- OLD 
<link rel="stylesheet" type="text/css" href="STYLE.css">
<script src="SCRIPT.js"></script> 
-->

<!-- NEW -->
<link rel="stylesheet" type="text/css" href="STYLE-VERSION-2.css">
<script src="SCRIPT-VERSION-2.js"></script>

This is one of the easiest and most reliable ways to ensure that everyone is getting the latest version of the scripts – Simply change the file name, add a trailing version number behind the file name. It is also a good practice to adopt versioning anyway. We can quickly fall back to the older versions should something goes wrong, and check back on what has been changed over time.

 

 

APPEND A DUMMY TIMESTAMP

<link rel="stylesheet" type="text/css" href="STYLE.css?t=5566">
<script src="SCRIPT.js?t=123456"></script>

Yep, this is an old trick that we use – Just append a dummy timestamp behind the URL SCRIPT.JS?t=123456. It really doesn’t do anything but fool the browsers into loading the script from the server every time.

But please take note that this is not a recommended practice in the long run, as browsers will not cache files with parameters. It slows down the performance of your websites, just stick with changing the file name if possible.

 

 

OUTPUT CACHE CONTROL HEADERS WITH PHP

On the page that you want to send the updated scripts, output the following HTTP headers:

<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP 1.1
header("Pragma: no-cache"); // HTTP 1.0
header("Expires: Wed, 1 Jan 2020 00:00:00 GMT"); // Anytime in the past

// REST OF THE PAGE AS USUAL ?>
<!DOCTYPE html>
...

Very important note – This page is now set to “no-cache, always reload”. This will most likely cause the browser to reload everything on the page itself. For the sake of performance, you might want to turn off these headers after some time, after most of the users have gotten the updated page.

 

 

APACHE MOD EXPIRE

If the above is too funky for you, or there are too many pages to push at once – The next alternative is to enable the mod_expire extension in Apache. Just add a small snippet in the .htaccess file.

<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresByType text/css "access"
  ExpiresByType text/js "access"
  ExpiresByType text/javascript "access" 
</IfModule>

That will pretty much expire all CSS and Javascript files the moment users access them, and encourage browsers to reload them. I will somewhat recommend this method if you roll out updates on a regular basis, mass controls using this Apache module is much more flexible and powerful.