Force Browser to Reload Cache From the Website

After updating a website, visitors see it as broken because their browser continues to reference the older JavaScript, JQuery and CSS files.

How to force the browsers of website visitors to make use of the newer updated support files?

Testing a website yourself its possible to refresh the browsers cache.

But for the visitor to your website this approach isn’t possible. What’s needed is for the website to tell the browser to forget the files which it has previously cached.

If its one or two files in the header or footer its possible to add an extension. But this is good for a one-off change, or at the end of a series of work, perhaps a major site update.

For example

<script type=’text/javascript’src’/jquery.js?ver=1.9.3’></script>

Note the added version number.

Changing the version number will cause the browser to get the revised file.

I’ve used this technique on images before where the image amendment, a rotation wasn’t being shown. On this occasion I added a parameter based on the edit time and date of the image.

For a website, such as WordPress, it may not be so easy to modify a file like this. If we have a child thime in use, is it worth copying the header file just to make this change?

Apache .htaccess file

For this method we’ll make use of mod_expires.

In the htaccess file make use of modexpires add the following to your .htaccess file located in the root of your website files.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 60 seconds"
ExpiresByType text/html "access plus 60 seconds"
ExpiresByType image/x-icon "access plus 60 seconds"
ExpiresByType image/gif "access plus 60 seconds"
ExpiresByType image/jpeg "access plus 60 seconds"
ExpiresByType image/png "access plus 60 seconds"
ExpiresByType text/css "access plus 60 seconds"
ExpiresByType text/javascript "access plus 60 seconds"
ExpiresByType application/x-javascript "access plus 60 seconds"
</IfModule>

Include as many entries as you deem necessary, and change the time out as appropriate. I used the above rather short value so my client’s browser would reload the files, having been used heavily viewing recent changes.

The time option is given as a number plus the type, which can be:

  • seconds
  • minutes
  • hours
  • days
  • weeks
  • months
  • years

Page Header Meta Entries

Also there are entries for the top of the page header.

These can be added to the <head> section of the website file.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

For a WordPress website I added them via the functions.php file. I didn’t want to go modifying the header.php file of the theme. The child theme didn’t have a copy, so why add one purely for this and also the theme had a header builder.

function vntweb_header_metadata() {
// Post object if needed
// global $post;
// Page conditional if needed
// if( is_page() ){}
?>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<?php
}
add_action( 'wp_head', 'vntweb_header_metadata' );

One advantage with the use of the functions.php file is that a date test could be added. After, for example a week the addition of the meta entries could be removed.

It’s also possible to create a functions.php file to be added to each website development ,with a number of functions, enabling those which are required on a given website.

Other Options

Another approach is to use regular expressions to amend files. But this may presuppose that extensions do already exist. also looking for a simple modificatin, which isn’t prone to misinterpretatin. can be easily copied and used without the risk of doing damage I prefer the two solutions given above.

References

Inmotion hosting – apache mod expires

Stackoverflow – control web page caching

Mozilla – headers cache cotnrol