Obligar a cargar los ficheros js y css siempre que se visite la página

Obligar a cargar los ficheros js y css siempre que se visite la página

A veces, cuando desarrollo un nuevo proyecto, y sabemos que va a seguir creciendo con el tiempo, me encuentro con el problema que los archivos js y css, el navegador los «cachea» y no carga los nuevos que han sido modificados. Si el desarrollo lo fuera a usar únicamente yo, con hacer Ctrl-F5 en el navegador ya estoy obligando al navegador a «forzar» la carga desde el servidor, pero lo más normal es que este desarrollo lo use un cliente, y no estaría bien decirle que cada vez que entre en la web haga Ctrl-F5.

Cómo pasa siempre cuando hay dudas, lo mejor es acudir a los que saben. Puse esta pregunta en stackoverflow.com y enseguida me dieron varias respuestas. Ver hilo

De las opciones que me dieron, las que mas me gustaron fueron:

• Añadir a la URL un timestamp o número random para forzar a que se considere una URL distinta y que el navegador crea que no la ha visitado antes
• Modificar tu fichero  .htaccess para prevenir el caché

De estas dos opciones, pues que cada uno elija la que más le guste, le resulte fácil o accesible.

1. Añadir a la URL un timestamp o número random para forzar a que se considere una URL distinta y que el navegador crea que no la ha visitado antes.

Por ejemplo: http://my-server/my-script.js?ts=123412341 o http://my-server/my-stylesheet.css?ts=54352435

Para ello, si estas programando en php el código que puedes usar es:

 ?ts=<?php getTimestamp())?>

2. Modificar tu .htaccess para prevenir el caché.

Si puedes acceder a tu servidor, modifica el .htacces; si no puedes acceder a tu servidor, añade un timestamp a las url de tus ficheros js, css.

Si eliges la opción de modificar el .htaccess, tienes que añadir en el fichero lo siguiente:

# DISABLE CACHING
<IfModule mod_headers.c>
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</IfModule>

#listado de extensión de ficheros que no queresmos que se cachée
<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 "Thu, 1 Jan 1970 00:00:00 GMT"
    </IfModule>
</FilesMatch>

Espero que os sirva