Website html doesnt update for users because of ca

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.