Website html doesnt update for users because of cache

Question

I am making a website and am running into an issue with website cache for my users. I develop my website and have set chrome developer tools to disable cache for my website for development. The issue is when i release a new change to prod all my users don't get the update because of their browser cache. When i delete the cache for my website manually on a friends computer it works but i obviously cant expect everyone to do this to get the new updates. Is there anyway for me to get around this with versioning or something? i have looked around but cant seem to find anything.

edit: i know i can prevent caching at all but i don't want to completely prevent caching that seems like a bad design

Answer 1

What are the resources that are being cached? I suspect js/css files, a good way to handle this is to add a query param with a version to the path of those resources in order to force the browser to load the new file if the version changed, something like this:

<script type="text/javascript" src="your/js/path/file.js?v=1"></script>
<link href="/css/main.css?v=1" media="screen,print" rel="stylesheet" type="text/css">

And when you release a new update of your website, replace the version as follows:

<script type="text/javascript" src="your/js/path/file.js?v=2"></script>
<link href="/css/main.css?v=2" media="screen,print" rel="stylesheet" type="text/css">

The browser will thing that the file is a new file and it will update the cache. Hope this helps.

In order to disable html caching, you can add a metatag to your file as follows:

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

But this will entirely disable caching of html files that have this metatag, I don't think there is a way to handle this as easily as with js/css files, you can set the metatag to refresh the html in a future date though. Here is an article describing how to use that metatag if you need more info:

http://www.metatags.info/meta_http_equiv_cache_control

Answer 2

You can force the page to auto-reload after a certain amount of time or other condition.

<META HTTP-EQUIV="refresh" CONTENT="15">

Or make it more event driven:

<A HREF="javascript:history.go(0)">Click to refresh the page</A>

You should be able to manipulate either of these solutions to your specific need.

Answer 3

You can change the name of your CSS file. I usually add a number to the end. Then clear the cache on your server. Just make sure to change the link in all of your header links to your css file.

Answer 4

Make sure you haven't created multiple similar js or html files or have linked them wrongly.

Answer 5

Some developers inject code into their .htaccess file to cache images, .css, and .js files. If you've done something like that, considering removing those lines of code, or comment them out with a "#" in front of each line.

If you don't know what I'm talking about,

# CACHING FREQUENTLY USED FILES     (Commenting on an .htaccess file)

<filesMatch ".(ico|jpg|jpeg|png|webp|gif)$">
 Header set Cache-Control "max-age=2592000, public"
</filesMatch>

<filesMatch ".(css|js)$">
 Header set Cache-Control "max-age=2592000, public"
</filesMatch>

<filesMatch ".(woff|woff2)$">
 Header set Cache-Control "max-age=2592000, public"
</filesMatch>

Caching resources is a great way to prevent them from being repeatedly downloaded from the server. However, if you are making changes to the website, I would recommend caching only after the final version is out!