Cuando un usuario accede a una web, los elementos pueden ser almacenados o no en caché del navegador dependiendo de las instrucciones que se faciliten al navegador en las cabeceras de la respuesta, de esa forma conseguimos que elementos como imágenes, JS, CSS y similares que habitualmente no cambian, sean almacenados en la caché del navegador, de esa forma en cada nuevo acceso no se solicitará el contenido al servidor y la navegación será más fluida.
Pero puede suceder ante cambios de gran magnitud (por ejemplo el rediseño de una web) que los navegadores muestren versiones antiguas de los contenidos aún habiendo aplicado los cambios desde hace horas, dando preferencia a la información que tienen almacenada en su caché interna.
La solución pasa por instruir al navegador que debe vaciar todos los datos que tiene almacenados acerca de nuestro dominio en su base de datos interna para que los vuelva a descargar actualizados, esto lo conseguimos añadiendo las siguientes reglas al inicio del fichero .htaccess de nuestra web o app.
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</IfModule>
<FilesMatch "\.(css|flv|gif|htm|html|ico|jpe|jpeg|jpg|js|mp3|mp4|png|pdf|swf|txt)$">
<IfModule mod_expires.c>
ExpiresActive Off
</IfModule>
<IfModule mod_headers.c>
FileETag None
Header unset ETag
Header unset Pragma
Header unset Cache-Control
Header unset Last-Modified
Header set Pragma "no-cache"
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Expires "jue, 1 Jan 1970 00:00:00 GMT"
</IfModule>
</FilesMatch>
Normalmente, no recomendamos mantener estas reglas en el largo plazo, solo durante un periodo de tiempo prudente (varias semanas) para limpiar el grueso de los navegadores que puedan tener algún contenido antiguo almacenado, si se mantiene en el largo plazo se incurriría en un peor rendimiento dado que nunca se almacenará nada en la caché del navegador, lo que no es una práctica recomendada.