Search code examples
htmlcachingbrowser-cache

clear cache of clients browsers when making changes


When developing a website using HTML/CSS, during the development phase it makes sense to prevent caching as people viewing the website would otherwise see old versions. Ive seen threads on this before using meta tags ie:

<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />enter code here

However this dosent seem to work with HTML5 and similarly I only want to clear clients cache to empty once Ive made an update.

For example if I have an image in index.html and update this image (same filename different content) then clients would see the previous image

Is there a way I can version html pages such that the clients browser would cache version 1 then on reloading If I change the html to version 2 the cache would be emptied and the new website with all changes would be loaded?

Seems this would need to be the case in most web developments otherwise clients would never see changes


Solution

  • You have the possibility to edit the <link> file in the index page (or wherever you load in the file in. After the .css you need to enter a query like ?v=...

    So like this:

    OLD FILE: <link href="/css/TestFile.css" rel="stylesheet">

    After editing it to refresh the cache: <link href="/css/TestFile.css?v=1" rel="stylesheet"> v standing for version, you can use any character.

    This resets the cache for everyone visiting the website and make them see the new version instead of the old version