Evitando que os browsers utilizem cache antigo de arquivos CSS e JS

Cache de navegador é muito útil quando o usuário baixar o mesmo arquivo CSS e JS várias vezes. Alguns navegadores, no entanto, usam os velho arquivos CSS e JS do cache, mesmo que eles já tenham sido atualizados. Isso pode levar a situações desagradáveis​​ como quando as páginas são exibidas para o usuário com os estilos ou páginas erradas.
Felizmente, estas situações desagradáveis ​​são fáceis de evitar. Veja como.

Exemplo básico com páginas HTML estáticas

<link type="text/css" rel="stylesheet" media="all" href="/css/test1.css" />
<link type="text/css" rel="stylesheet" media="all" href="/css/test2.css" />
<link type="text/css" rel="stylesheet" media="all" href="/css/test3.css" />
<link type="text/css" rel="stylesheet" media="all" href="/css/test4.css" />
<script type="text/javascript" src="/js/test1.js"></script>
<script type="text/javascript" src="/js/test2.js"></script>
<script type="text/javascript" src="/js/test3.js"></script>

Nomes dos CSS e JS alterados.

<link type="text/css" rel="stylesheet" media="all" href="/css/test1.css?20091105" />
<link type="text/css" rel="stylesheet" media="all" href="/css/test2.css?20091105" />
<link type="text/css" rel="stylesheet" media="all" href="/css/test3.css?20091105" />
<link type="text/css" rel="stylesheet" media="all" href="/css/test4.css?20091105" />
<script type="text/javascript" src="/js/test1.js?20091105"></script>
<script type="text/javascript" src="/js/test2.js?20091105"></script>
<script type="text/javascript" src="/js/test3.js?20091105"></script>

Mesmo exemplo com PHP e adicionando a data da última modificação no final do nome do arquivo

<?php
...
echo '<link type="text/css" rel="stylesheet" media="all" href="/css/test1.css?' . date("YmdHis", filemtime("css/test1.css")) . '" />';
echo '<link type="text/css" rel="stylesheet" media="all" href="/css/test2.css?' . date("YmdHis", filemtime("css/test2.css")) . '" />';
echo '<link type="text/css" rel="stylesheet" media="all" href="/css/test3.css?' . date("YmdHis", filemtime("css/test3.css")) . '" />';
echo '<link type="text/css" rel="stylesheet" media="all" href="/css/test4.css?' . date("YmdHis", filemtime("css/test4.css")) . '" />';
echo '<script type="text/javascript" src="/js/test1.js?' . date("YmdHis", filemtime("js/test1.js")) . '"></script>';
echo '<script type="text/javascript" src="/js/test2.js?' . date("YmdHis", filemtime("js/test2.js")) . '"></script>';
echo '<script type="text/javascript" src="/js/test3.js?' . date("YmdHis", filemtime("js/test3.js")) . '"></script>';
...
?>

Resultado da execução do script:

<link type="text/css" rel="stylesheet" media="all" href="/css/test1.css?20091105110212" />
<link type="text/css" rel="stylesheet" media="all" href="/css/test2.css?20091105110212" />
<link type="text/css" rel="stylesheet" media="all" href="/css/test3.css?20091105110212" />
<link type="text/css" rel="stylesheet" media="all" href="/css/test4.css?20091105110212" />
<script type="text/javascript" src="/js/test1.js?20091105110212"></script>
<script type="text/javascript" src="/js/test2.js?20091105110212"></script>
<script type="text/javascript" src="/js/test3.js?20091105110212"></script>

Marcos de P. Muniz

Graduado em Sistemas de Informação pela UEMG, é Pós Graduado em Segurança da Informação pela Faculdade Pitágoras, é desenvolvedor PHP desde 2006, trabalha como Analista / Desenvolvedor em uma empresa que atua na área de ensino a distância, faz freelancer criando sites, sistemas e portais utilizando PHP, MySQL e jQuery.

Você pode gostar...

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *