How to force load JS and CSS files with each new published version?

Question

Every time I publish a new version of my web application (a multienterprise system) that has changes in JS and CSS files, some clients complain of errors and I end up finding that is the cache of the browser and I have to instruct the client to update the page with CtrlF5.

I wonder if there’s a way I can force the browser to fetch the JS and CSS files on the server every time I publish a new version (maybe saving a cookie on the client informing the system version the last time it was accessed and compare each load).

I searched Google and couldn’t find any information that really helped me. My application is in C#. Net.

Answer 1

Concatene some random number that varies with each upload, at the end of the file extension.

EX: style.css? v=1651516151;

Answer 2

In PHP using the timestamp of the file you know if it has undergone any changes, forcing a new upload, if it is not changed it still takes what is already in the browser cache.

With php do so, but you can use the same idea for your language.

example:

<link rel="stylesheet" href="css/style.css?v=<?php echo filemtime('css/style.css'); ?>">

In the browser will appear like this:

<link rel="stylesheet" href="/css/estilo.css?v=1429015974" />

In JS it would be using a function to generate a number (data > timestamp) to be added at the end of the file.

Example:

<script type="text/javascript">

    function addcss(css){
        var d = new Date();
        var n = d.getTime();
        var head = document.getElementsByTagName('head')[0];
        var s = document.createElement('link');
        s.setAttribute('rel', 'stylesheet');
        s.setAttribute('href', css+'?v='+n)
        head.appendChild(s);
    }   

    //chame a função passando o caminho do CSS ou JS 
    addcss('css/style.css');
</script>

The exit will be:

<link rel="stylesheet" href="css/style.css?v=1457636631802">

Answer 3

As I work with Wordpress I do so without the need to create a . JS:

<link href="<?php bloginfo('stylesheet_url');?>?v=<?php echo time(); ?>" rel="stylesheet">

That’s the way out:

<link href="https://www.o_site_com_br/wp-content/themes/tema_2020/style.css?v=1594856278" rel="stylesheet">