11

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?

12
  • 7
    Pede para o usuário apertar CTRL+SHIFT+R! Commented 22/02/2018 às 19:59
  • 2
    Utilize um parâmetro como versão com um timestamp. Ex: https://www.example.com/images/icons.png?v=1519330900 Commented 22/02/2018 às 20:21
  • eu geralmente faço o que o Valdeir falou, mas estou trabalhando numa mudança que vou avisar pros clients conectados via socket que o site mudou e forçar o reload Commented 22/02/2018 às 22:09
  • 1
    Você pode versionar seu assets (CSS, JS, etc), usando ferramentas como o webpack. Ferramentas como essa, permitem entre outras coisas adicionar um número de versão ao final do nome original do arquivo como o Valdeir Psr disse. Assim o browser vai ignorar o cache do asset versionado anteriormente e carregar o mais novo. Commented 3/07/2018 às 15:08
  • 1
    @WallaceMaxters não estou usando nenhuma ferramenta. Poderá ser viável usar se não implicar muito tempo/trabalho.
    – Jorge B.
    Commented 27/08/2018 às 12:04

2 Respostas 2

3

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.

Técnica 1: Forçando a atualização de todos os assets

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:

  • Você altera em um lugar e tudo é atualizado.
  • Não precisa alterar estrutura de pastas ou usar bibliotecas para fazer o trabalho

Desvantagens:

  • Se você quiser apenas atualizar um arquivo, não seria possível, pois com a mudança da versão, todos os assets receberiam o acréscimo de um ?version=VERSÃO diferente.
  • Você tem que chamar uma função ao invés de simplesmente declarar o src ou href do seu asset diretamente

Técnica 2: Forçando a atualização individual

A 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

  • Atualiza cada arquivo individualmente
  • Não precisa de alterar nenhum valor manualmente. Se o arquivo for modificado, então sempre será atualizado no navegador

Desvantagens:

  • Impossibilita a utilização de url absoluta na função, já que usamos parte do path para construir o caminho físico do arquivo para obter a data de modificação.
  • A cada asset adicionado, vai chamar a função 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);
}
2
  • Comentem aí, fiquei me perguntando se daria pra usar # ao invés de ?. Daria certo?? Commented 24/08/2018 às 18:27
  • 1
    Cara, sensacional! Só mudaria uma coisa, o 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.
    – Syzoth
    Commented 24/08/2018 às 19:10
3

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .