• +34 - 607 571 659
  • info@oscarperez.es

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

    Oscar Pérez Gómez