Come forzare l'aggiornamento dei file JS e CSS

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 ^__^.