Forçar carregamento de arquivos JS e CSS a cada nova alteração ou versão publicada

Fernando Valler 30/12/2019 Java Script, PHP


Você pode pegar o timestamp do arquivo para sabe se ele sofreu alguma alteração, caso tenha mudado use o valor para forçar um novo carregamento, caso não ele não seja alterado continua a pega o que já está no cache do navegador.

Exemplo em PHP

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

No navegador vai aparecer assim:

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

Assim quando o timestamp do arquivo mudar força o navegador fazer a requisição do novo arquivo evitando pegar diretamente do cache. Note que se o nome fosse apenas estilo.css o navegador não saberia que o arquivo foi mudado.

 

Em Java Script seria usando uma função para gerar um número (data > timestamp) a ser adicionado no final do arquivo.

Exemplo em JS

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

A saida será:

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


Fernando Valler - Programador Web
Fernando Valler

Sou programador web, motivado por desafios e sempre buscando aprender algo novo. Aqui você pode encontrar alguns projetos.