Actualizar archivos CSS y JavaScript: Solución completa
Actualizar archivos CSS y JavaScript. Esta acción es necesaria cuando estemos desarrollando un sistema o página web ya que constantemente estamos modificando los estilos CSS y ficheros JavaScript.
Los actuales navegadores para acelerar los procesos de entrega de ficheros suelen almacenarlos en la caché y eso para los desarrolladores suele ser un dolor de cabeza. Por lo tanto, en lo personal me ha pasado que cuando edito un fichero JavaScript y esta enlazado a un fichero HTML deseo verlo en el navegador y me doy cuenta que los cambios no se ejecutan o no se muestran.
Entonces, para darle solución tenía que eliminar el historial y datos del navegador para poder apreciar los cambios.
En este articulo mostrare 3 formas de poder darle solución a este inconveniente.
¿Porque no se actualizan los estilos CSS?
El detalle radica en los navegadores, que para optimizar la carga de la web usan caché de archivos y obvio es muy bueno. Sin emabrgo, para los desarrolladores resulta un problema porque no se actualizar los archivos.
A los desarrolladores de sistema esto suele pasar a menudo. Y para pasar esta barrera se tiene que eliminar los datos de navegación, cookies, caché, y todo para que recién se actualice los estilos que modifique en el CSS o JavaScript.
¿Cuál sería la solución más adecuada?
Si estás desarrollando en el sitio web o sistemas y necesitas refrescar los cambios de CSS y JS sin que se almacenen en caché hay algunas opciones para evitar estos dolores de cabeza.
Actualizar archivos CSS y JavaScript: Tres formas
A) PRIMERA FORMA: Eliminar caché
Solución en HTML5
Dentro de la etiqueta HEAD puedes aplicar estos metas para eliminar la caché. Puedes agregar el siguiente código.
<head> <meta http-equiv="Expires" content="0"> <meta http-equiv="Last-Modified" content="0"> <meta http-equiv="Cache-Control" content="no-cache, mustrevalidate"> <meta http-equiv="Pragma" content="no-cache"> </head>
En PHP la solución es:
Si tu aplicación o sistema que estas desarrollando está corriendo con php puedes utilizar lo siguiente:
<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 1 Jul 2000 05:00:00 GMT"); // Fecha en el pasado
?>Ya tenemos la solución, el sistema te funcionará si estás editando los estilos o scripts y podrás ver resultados al momento y de manera real.
B) SEGUNDA FORMA: Usando función RAND
Otra solución quizá la más acertada es generar versiones de los estilos CSS o JavaScript utilizando "?12345" al final de la extensión del archivo. Sin embargo, generamos un número random en php y lo asignamos al fichero:
<link rel="stylesheet" href="/css/style.css?v=<?php echo(rand(1,500)); ?>" /> <script src="/js/script.js?v=<?php echo(rand(1,500)); ?>"></script>
C) TERCERA FORMA: Fecha en formato Unix
Hay esta opción más para corregir este error y seria agregar la fecha en formato Unix, después de la ruta del archivo, así:
<link rel="stylesheet" href="/css/estlos.css?v=<?php echo time(); ?>" /> <script src="/js/funciones.js?v=<?php echo time(); ?>"></script>
Con esta opción evitas que si se repite (casualmente) un número generado aleatoriamente con la función RAND, no cargaras una versión almacenada en la caché del navegador. Por lo tanto, la función time() no se repite porque trabaja con la fecha actual.
CONCLUSIÓN DEL ARTICULO
En este articulo hemos aprendido a dar solución a los problemas de la actualización de archivos JavaScript y CSS. este inconveniente suele presentarse en el desarrollo de un sistema o página web.
Además, hemos aplicado 3 formas para darle solución: en HTML5, PHP Rand, PHP Fecha Unix.
Si aplicamos correctamente cualquiera de las tres opciones ya no tendremos el problema de que no se actualiza los archivos JavaScript y CSS.
Deja una respuesta
OOOOhhhhh desconocía que se podía hacer esto, y además es REALMENTE UTIL ya que siempre estoy borrando la cache del navegador para poder visualizar cambios en CSS y Javascript, muy buen aporte!!!!