Solución al problema de caché en móviles con archivos CSS y Javascript

David López | 452 palabras | 3-4 min

Durante las modificaciones de mi web pinayu.com he tenido que retocar la hoja de estilos CSS y el archivo principal de Javascript donde guardo todas las funciones que uso en la web, me di cuenta que en el teléfono móvil no se reproducían los cambios.

¿A qué se debe que no se actualicen los cambios?

Cuando en tu ordenador son visibles los cambios, pero en tu teléfono móvil no, puedes pensar que hay algún problema de compatibilidad con tu terminal. Nada de eso. Lo que ocurre es que el navegador de tu móvil carga el archivo CSS y JS de la caché y no descarga los archivos con las nuevas modificación del el servidor.

Puedes cambiar las opciones del navegador para que no recurra a la caché, pero has de preguntarte... ¿Y los demás usuarios que visitan tu web? No puedes pedirles eso, así que investigando por internet, descubrí una forma sencilla de solucionar la problemática.

¿Cómo solucionar el problema de la caché en CSS y JS?

Cuando vinculas los archivos CSS y JS en tu página web dentro de la etiqueta head, debes añadir lo siguiente al final de cada archivo:

• style.css?version=100
• funciones.js?version=100

En resumen, le colocamos una variable con un valor numérico ?version=100 para que el navegador piense que es otro archivo diferente. Así entonces descargará de nuevo los archivos CSS y JS y los guardará en la caché. Eso significa que cada vez que realices cambios significativos deberás cambiarlo de nuevo. Por ejemplo, la sigueinte vez terminarán así:

• style.css?version=101
• funciones.js?version=101

¿Son obligatorios ese nombre de variable y esos valores?

No, realmente puedes cambiar la variable version por ver, o por el nombre que te parezca más adecuado. Al igual que 100 puedes cambiarlo por 10, por 1 o incluso por letras. Es irrelevante ya que el objetivo se basa en que el navegador detecte otra ruta, una ruta que no la tenga ya registrada en la carpeta de caché. Lo siguiente que hará el navegador será descargar de nuevo los archivos del servidor. Ese es el plan, ¿no? :)

Un modo cómodo de cambiar todos los valores de todas las páginas

En mi caso y en el caso de la gran mayoría de webs se incluye al principio de cada web un archivo .php con los datos de la base de datos y la función PHP para conectar con la base de datos. Aquí podemos guardar una variable con el valor de la versión (100, 101, 102, etc).

Por ejemplo: $version = 100;

Lo siguiente es que en vez de escribir 100, escribir:

?version=<?php echo $version; ?>.

El dato PHP $version lo tendremos accesible en todas las páginas y solo tendremos que modificar su valor en el archivo de conexión de la base de datos para que se actualice automáticamente en todas las webs.

Comentarios del post

Pinayu no tiene qué leer...
¿Le animamos con un mensaje?
¡Aporta con tu valiosa opinión!

* Nombre

* Comentario

* Introduce el código Anti Spam aquí: