Update page automatically?

Question

I have a web site, and I constantly update.

However after these updates on the server, the site does not update alone on devices/desktop, need to press CTRL + F5 to update.

The problem is that not everyone will give CTRL + F5 before using the site, I wonder if there is any way to fix this problem.

Example:

I have a GREEN layout on the web.

I switch css(local) to RED and send this update to the server.

If I DO NOT press CTRL+F5 after performing the change, my web site will continue with the GREEN layout.

Answer 1

<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">

Answer 2

If you cannot avoid the CACHE you can do with PHP (I imagine it is what you use in your hosting) to generate a number that never repeats, I advise using DATE and TIME so that the browser interprets as different Urls through a variable.

The format will not be noticed as date and time, I put in the example only up to minutes and not seconds to not generate an unnecessary load of access to your hosting.

Harvest this at the beginning of the code.

<?php
$nc = "?".date('YmdHi'); //Exemplo do resultado 201802061040
?>

Examples:

<script src="seuscript.js<?php echo $nc ?>"></script>

<img src="imagem.jpg<?php echo $nc ?>" />

This will only affect content placed in HTML, if the visitor accesses urls of/db text files (*.TXT, *.LOG, *.JSON) or images directly typed in the browser bar will only see the first version of the file until the CACHE expires.

In this case I advise you to modify the HTACESS of your hosting, it will make any code dispensable:

<filesMatch "\.(html|htm|js|css|png|gif|jpg|jpeg|json)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>

Answer 3

A while ago I had created a function that basically takes the local time on the machine and updates the script/css to use the version of that time.

Follows the function

    function getStringDate() {
    var data = (+new Date());

        horario= ('?_='+ data),
        str = $('.c').attr('href'),
        fimstr = str+horario;
        console.log(fimstr);
        $('.s').attr('href',fimstr);
}

On your ready Document make the call

setInterval(getStringDate,10000);

In this case the script is checking every 10 seconds and adding the time at the end of the href of your css. To use, add the "c" class to the links you need, and if you need to use in script, simply change from href to src in the script.