How to clear cached versions of website on users Browsers?

Question

I have a very simple HTML/CSS/JS website. When ever I make changes to it, to see the updated version I have to manually clear my cache on mobile or hard reload on PC.

Is there a way of clearing cache for your site on users browsers? I have had a look around but I seem to only find of instances of clearing server cache and libraries that I don't know have to use yet. Many thanks in advance for your help!

I do not think a website can clear the users' browser cache. — evolutionxbox, Feb 03 '23 at 17:26
Does this answer your question? [Clear the cache in JavaScript](https://stackoverflow.com/questions/1011605/clear-the-cache-in-javascript) — evolutionxbox, Feb 03 '23 at 17:27
When you're planning on making changes, you should reduce the cache timeout. — Barmar, Feb 03 '23 at 17:29
I'm afraid that's not how caching is generally handled. If you open your browser developer console, head to the "Network" tab and inspect the response headers of requests, do you see anything like "Expires", "Cache-Control" or "Pragma"? — Álvaro González, Feb 03 '23 at 17:53

Alan P. · Answer 1 · 2023-02-03T18:53:25.500

Browsers will cache:

the html files
the JS files
the CSS files

It's probably best to do this on the server side, but you can first try doing it on the client side as described below.

To make sure the latest html file is used, you could try adding this within the <head> of your html files:

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>

To make sure the latest version of "mycode.js" is used, append a new value to the file (e.g. the timestamp it was last edited):

<script src="mycode.js?v=123456789"></script>

Same thing to make sure the latest "mystyle.css" file is used:

<link rel="stylesheet" type="text/css" href="mystyle.css?v=123456789">

How to clear cached versions of website on users Browsers?

1 Answers1