Quando un file CSS o JS viene aggiornato è necessario che questo cambiamento sia percepito anche dagli utenti, soprattutto da quelli che hanno nella cache del browser la versione precendente dei file, per contro possono verificarsi importanti disfunzionalità a livello logico o di rendering.
Una delle tecniche che uso è quella di apporre un id di versione al file nel HTML della pagina.
<script type="text/javascript" value="/js/common.js?v3.4"></script>
Questa soluzione ha però il limite di richiedere un aggiornamento del sorgente HTML, cosa che in alcune realtà è scomodo o non possibile. Da qualche tempo quindi applico una tecnica più sofisticata, scrivendo una volta per tutte un HTML/PHP apposito e generando dinamicamente un nome file univoco contenente il timestamp dell'ultima modifica al file, infine uso .htaccess per accedere al file fisico sul server.
Ecco il codice HTML/PHP necessario:
<link rel="stylesheet" type="text/css" href="/css/main.<?php echo filemtime('/server/path/css/main.css'); ?>.css" />
<script language="javascript" src="/js/common.<?php echo filemtime('/server/path/js/common.js'); ?>.js"></script>
che produce nomi di file tipo:
/css/main.1269466887.css /js/common.1269467087.js
In questo modo, ogni volta che il sorgente JS o CSS viene aggiornato verrà generato un nome file univoco che il browser dell'utente sarà "costretto" a scaricare.
Ovviamente, il file main.1269466887.css non esiste sul server ed è necessario reindirizzare questo percorso verso il file originale main.css con alcune semplici regole di rewrite da inserire nel nostro file .htaccess
RewriteEngine On RewriteRule ^css/(.*)\.[0-9]+\.css /css/$1.css [L] RewriteRule ^js/(.*)\.[0-9]+\.js /js/$1.js [L]
È tutto e speriamo questo eviti la tipica telefonata (isterica) 4 minuti dopo ogni deploy ^__^.
