viernes, 28 de octubre de 2016

Tener siempre la ultima versión de mis archivos JavaScript y CSS en la maquina del usuario

Ya hemos analizado en una entrada anterior, como construir un buen sitio web dinamico. Eso muchas veces, incluirá el usar archivos .PHP, .JS y .CSS.

Recordando un poco lo aprendido, los archivos .php estan en el servidor, y no tenemos acceso a ellos en código fuente desde la máquina local. Eso es una enorme ventaja en terminos de mantenibilidad. Si haces un cambio en un archivo PHP en automático todas las máquinas que se conecten a tu sitio tendrán la nueva versión, ya que los archivos PHP siempre son enviados cada que se piden por la máquina (en demanda). Es decir cada que solcicitas un archivo PHP este es ejecutado en el servidor.

Recordemos que Javascript, se encarga de controlar los eventos que pasan en el navegador, y CSS de controlar el aspecto visual que tendrá la página web en pantalla.

Los navegadores actuales, suelen hacer todo lo posible para que las páginas se carguen lo más rápido posible. Eso incluye el uso del caché, que no es otra cosa que guardar la mayor parte de los elementos posibles de una página cuando se abre por primera vez, en disco duro local. De esa manera si vuelves a entrar a la misma página, el navegador solo debe checar los cambios y no descarga toda la informacion completa. Esto es múy util en el caso de imagenes y recursos multimedia, de esa manera se acelera la carga de las pagnas web.

Los navegadores acuales tienen la manía de guardar los archivos JS y CSS en cache. Esto tiene sus ventajas y desventajas. Ventaja, que Javascript actua directamente sobre el navegador, y CSS sobre la presentación de la web, asi que al estar en caché la carga de la página es más rápida.

Pero como desarrolladores, no nos agrada esa idea. Cada que yo hago un cambio a mi JavaScript o CSS, en teoría el navegador debería reconocerlo y cargar la nueva versión. Pero no es así. La memoria del navegador es algo persistente. Una solución a nivel de usuario es pulsar F5 ya que manda un comando de refescar y trae de nuevo los archivos. A veces, ni eso funciona y será necesario borrar el historial del navegador, que es donde se guarda el cache. 

Pero no podemos decirle a todos nuestros usarios, "oye hice un cambio en mi JavaScript, por favor vacia tu historial". No es practico.

¿Hay alguna solución?

Claro. Aqui apelamos  a las propiedades de nuestro PHP. Recordemos, que este si se refresca cada que se abre la página, es indispensable pues se ejecuta en el servidor.

¿Donde mandamos llamar nuestros archivos JS y CSS? En el PHP precisamente, como ya hemos visto.

Ua técnica muy usada en muchos sitios web, es tener una página llamada header.php y otro footer.php. Por cuestiones de diseño, muchas veces queremos tener un header y un footer comun, para todo nuestro sitio.

Así nuestras páginas tendrían la siguiente estrcutura:

<?php
require("common/header.php");
?>

//codigo de mi pagina


<?php require("common/footer.php");?>

¿Por que mencionamos esto? Por que por lo general, todas las invocaciones a archivos JS y CSS se hacen en el hedaer, de esa manera, no es necesario repetir el codigo en cada página.

De esta manera cada página invocada, debe llamar al header. El header controlara las invocaciones a recursos externos como los archivos JS y CSS.

Veamos ahora un ejemplo:

<link rel="stylesheet" href="<?=$urlSitio;?>/includes/css/MiCSS.css?version=1.0" type="text/css" media="all" />

<script type="text/javascript" src="<?=$urlSitio;?>/includes/js/MiJS.js?version=1.0"></script>

Notemos la diferencia con otros ejemplos usados anteriormente. Al invocar tanto el archivo CSS, como el JS, añadimos al final lo siguiente : ?version=1.0.

Como si estuvieramos mandando la version como un parámetro. Dentro de nuestros archivos, no tenemos que hacer ningun cambio relativo a esto. Simplemente le estamos diciendo al navegador, que busque una nueva versión del archivo, es decir, que no será un resurso estático.

¿Que pasará si hago un cambio a mi Javascript y deseo que todas las máquinas clientes carguen la nueva versión? Simplemente, en el archivo PHP donde lo llamo, cambio el parametro version a 1.1. Y si hago otro a 1.2. Y así sucesivamente.

De esta forma al cargar el PHP, el navegador sabra en automatico que la versión que tiene en cache del Javascript no le sirve, y cargará la nueva desde el servidor.

Pero, mientras yo no modifique el parametro versión trabajará con la copia local, lo que es bueno pues ayuda al rendimiento de la página.

¿Sencillo no?

Por eso es mas sencillo si agrupo todas las llamadas a recursos externos,si las tengo todas en mi archivo header, será muy sencillo, cambio una línea, y en automatico todas las páginas cargaran la nueva versión.

De esta manera con PHP, controlo la subida de nuevos recurso JS y CSS al navegador, independientemente de la memoria cache.








No hay comentarios.:

Publicar un comentario