Tenho uma aplicação web feita em PHP, e queria forçar que, sempre que fizesse deploy de uma nova versão da aplicação o cliente fosse "obrigado" a atualizar tudo que tivesse mudado, como imagens, CSS, JS, etc.
Como posso fazer isso?
Em uma época remota, eu até criei uma biblioteca para poder gerenciar os meus scripts e folhas de estilo adicionadas ao site.
O ponto principal que me fez querer criar a biblioteca foi ter um parâmetro que eu definisse em um lugar e que afetaria todos os scripts, imagens e folhas de estilo que tivesse em meu site.
Meu objetivo não é fazer propaganda da biblioteca aqui (até porque eu acho que hoje em dia tentaria resolver de outras formas), mas pensando no caso onde você tem um site com seus scripts, imagens e folhas de estilo, sem utilização de ferramentas modernas como gulp
, webpack
e afins.
Eu acho que você poderia criar uma função que receberia normalmente como parâmetro o nome do seu asset. E dentro dessa função, ele montaria o nome para seu asset
baseando-se em alguma flag, que faria com que forçasse uma atualização em todos seus clientes.
Mais ou menos assim:
em algum lugar você define:
define('APP_VERSION', '1.0.0');
Você cria uma pequena função.
function asset($url) {
return sprintf('%s?version=%s', $url, APP_VERSION);
}
Aí, ao invés de declarar seus scripts e imagens assim:
<img src="/img/futebol.jpg">
<script src="/js/app.js">
Você declararia assim:
<img src="<?= asset('/img/futebol.jpg') ?>">
<script src="<?= asset('/js/app.js') ?>"></script>
Isso faria com que a url gerada acima fosse:
/img/futebol.jpg?version=1.0.0
/js/app.js?version=1.0.0
Aí, caso você fizesse alguma publicação de uma nova versão no sistema, você apenas trocaria sua constante APP_VERSION
.
define('APP_VERSION', '1.0.1')
Isso faria com que seus assets tivessem um ?version=1.0.1
adicionados, forçando, portanto, o navegador do cliente a pegar as informações novas do servidor.
Vantagens do método acima:
Desvantagens:
?version=VERSÃO
diferente.src
ou href
do seu asset diretamenteA segunda técnica que eu tinha pensado visa atualizar cada asset individualmente. Mas, para fazer isso, é necessário conhecer o caminho físico do asset, através do PHP.
A ideia é a mesma da função acima, com uma pequena modificação:
function asset($path)
{
// exemplo : 'c:\window\xampp\htdocs\project\assets/img/futebol.jpg'
$fullpath = __DIR__ . '/assets/' . $path;
return sprintf('%s?last_modified=%d', $path, filemtime($fullpath));
}
No caso acima, a função filemtime
é responsável por ler um arquivo no disco e informar, através de um unixtimestamp, a última data de modificação.
Ao fazer isso, você estaria gerando algo parecido com isso:
/img/futebol.png?last_modified=1535132483
/js/app.js?last_modified=1535632483
Vantagens
Desvantagens:
filemtime
. Algumas pessoas minimalistas gostariam de evitar tantas chamadas a essa função.Mas ainda sim, é possível contornar o problema da opção 1, descrito nas desvantagens do segundo método. Basta verificar se o arquivo existe, para aplicar a verificação da data de modificação. Caso não exista, use a opção 1 apresentada!
Exemplo:
define('APP_VERSION', '1.0.1');
function asset($path)
{
$fullpath = __DIR__ . '/assets/' . $path;
// Se existir, coloca a data de modificação
if (file_exists($fullpath)) {
return sprintf('%s?last_modified=%d', $path, filemtime($fullpath));
}
return sprintf('%s?version=%d', $path, APP_VERSION);
}
#
ao invés de ?
. Daria certo??
Commented
24/08/2018 às 18:27
APP_VERSION
poderia vir de um arquivo estático, e no caso eu recomendaria um tipos de assets terem versões diferentes, mas todo o resto, incluindo o filemtime acho que resolve muito.
A melhor maneira de fazer isso é utilizar um parâmetro único no link que force a atualização dos seus scripts. Exemplo, dentro da tag head
da sua página carregue os scripts dessa maneira:
<script src="script.js?v=<?php echo $version; ?>"></script>
<link href="style.css?v=<?php echo $version; ?>" rel="stylesheet">
Sendo $version
alguma string que consiga ser única em função de cada deploy. Eu normalmente coloco a versão do último deploy via Git.
timestamp
. Ex:https://www.example.com/images/icons.png?v=1519330900