Website html not refreshing for users due to cache
I am creating a website and I am having a problem with the website cache for my users. I am developing my site and installing Chrome tools to disable cache for my development website. The problem is when I release a new change so that all my users don't get the update because of their browser cache. When I delete the cache for my website manually on friends computer, it works, but I obviously don't expect everyone to do it in order to get new updates. Is there anyway for me to get around this with versioning or something? I looked around but didn't seem to find anything.
edit: I know I can prevent caching altogether, but I don't want to completely prevent bad design like caching
source to share
What are the resources that are cached? I suspect js / css files, a good way to deal with this is to add a request parameter with a version to the path of these resources to force the browser to download a new file if the version has 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 a new update of your site is released, replace the version with the following:
<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 think the file is a new file and will update the cache. Hope this helps.
To disable html caching, you can add a metafile to your file like this:
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
But this will completely disable caching of html files that have this meta tag, I don't think there is a way to deal with this as easily as with js / css files, you can set the meta tag to update the html in the future date. Here's an article describing how to use this metatag if you need more information:
source to share
You can force the page to reload after a certain 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 any of these solutions to suit your needs.
source to share