HTMLWordpress

How to Force a Browser to Clear Cache in Web Code

By March 17, 2018 No Comments

While developing and making updates to a website you sometimes cannot see the changes in real-time.  Even if you’re not running any caching mechanisms the browser itself will still cache items such as CSS stylesheets and JavaScript/jQuery files.

Today we had a client that was using no caching plugins within WordPress or any caching tools on the server.  Yet after our upgrade of the WordPress core and several plugins the site would not show these updates unless we forced the desktop browser to hard dump the cache.  This really isn’t a viable option as users that may have already visited the website wouldn’t know how to do this and you wouldn’t expect them to.  Mobile devices seem to cache even longer so waiting on the normal cache expiration time just wasn’t an issue.

Short of looking through all plugins and how they load these files and then versioning them manually, which they should already be doing in our opinion, the next best option was to add some HTML meta data to the header of the website.

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

We tried all of the above, but it was still not working.  If you didn’t have this code in your header previously then chances are it’s already cached and it will not force the cache dump.  That when we stumbled upon Busted!.  It’s a WordPress plugin that forces your browser to dump it’s cache when enabled.

It hasn’t been updated in the past three years, but it still works with the most recent version of WordPress, tested on WordPress version 4.9.4.  Right after installing we checked some mobile devices such as iOS Safari and the site loaded showing the new changes.

 

Leave a Reply