Sí ya sabía lo que era la memoria caché (por lo menos en líneas generales), gracias a las respuestas de todos y algunas cosas que pregunté por separado haría esto...
Como ya dijeron, tendría que...
<script src="[...]/x.js?v0.0.1></script>
mi duda igualmente viene siendo ¿Qué es lo que hago con las imágenes?, creo que las imágenes también son guardadas en la memoria caché ¿no es así?
¿debería...?
<img src="[...]/x.jpg?v0.0.1>
¿Qué otra etiqueta o nose como se dirá... ¿src=""? debería aplicarle esto de concatenar un dato? (en este caso la versión)
Gracias.
No entiendo tu pregunta.
src es un atributo.
<script>, <img> son etiquetas.
script, img son elementos (en concreto elementos html).
/x.jpg es una url relativa.
https://example.com/x.jpg es una url absoluta.
En src="/x.jpg", /x.jpg es el valor del atributo src.
v0.0.1 es un query string(cadena de consulta en español, aunque nunca vi utilizar este término en español)
? es un separador para indicar el comienzo del query string en el protocolo http
El query string está compuesto de key/value pairs (en español parejas de claves (identificadores) y valores. Normalmente se utiliza tipo /x.jpg?ancho=400
Te explico como funciona añadir la version o cualquier otra cosa en la url:
Cuando tu introduces un src="example.com/miFoto.jpg" en tu código html, estás definiendo donde se encuentra el recurso.
En la fase de parseo del navegador(cuando cargas la página el navegador lee el texto (codigo html) y lo interpreta para generar la página a partir de él. Al encontrar un <img src="/miFoto.jpg"> añadirá el base url para transformar el valor del atributo src de una ruta/url relativa a una absoluta.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/basePor defecto la ruta se obtiene del método href del objeto location. (location.href)
Una vez convertido quedará <img src="
https://example.com/miFoto.jpg">En el siguiente paso que realiza el navegador se obtiene el recurso(miFoto.jpg en este caso) realizando una petición HTTP con el método GET.
La petición que hace el navegador podría ser:
GET /miFoto.jpg HTTP/1.1
Host: example.com
Accept: */*
Entonces el servidor web de example.com recive esta petición y la procesa/parsea para comprenderla y responder en consecuencia.
El servidor web pongamos de ejemplo Apache comprueba el archivo .htaccess (si existe) en la carpeta de la web, donde puede haber unas directivas tal que:
<filesMatch ".(ico|jpg|jpeg|png|gif)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
Aquí se indica que se incluya una cabecera HTTP(header) en la respuesta HTTP que se le dará al navegador en caso de que el recurso solicitado exista y su nombre cumpla con lo indicado en la expresión regular. En este caso se cumplirá para una serie de archivos cuyo nombre acabe por alguna de las extensiones de la expresión.
Entonces se incluye Cache-Control: max-age=2592000, public como cabecera de respuesta.
El navegador recive la imagen en el cuerpo de la petición junto al caché control y en base a el hashea la url del recurso y lo almacena en el caché.
Cuando se vuelve a solicitar la misma imagen, el navegador comprueba si la url que se está solicitando coincide con la que está almacenada en caché. Cuando le añades el ?v0.0.1 la url no coincide, por lo que el navegador entiende que la imagen que tiene en caché no coincide con la que se está solicitando actualmente y entiende como que es una imagen distinta. Se solicita la nueva imagen y se repite todo el proceso.
El efecto de añadir ?v0.0.1 es casi el mismo que si le cambias el nombre a la imagen cada vez que la actualices.
miFoto_v0.0.1.jpg.
PD: De todas formas esto de añadir la versión es un apaño rápido. Una solución para salir del paso de forma rápida y sencilla. Está bien para algún recurso concreto o páginas muy pequeñas y con pocas actualizaciones.
Qué pasa si mañana decides hacer una remodelación de la web? Tendrás que ir url por url y archivo por archivo cambiando las versiones. Si cambias todo de forma global puede que cambies la versión de algún archivo que no ha cambiado y obligas al cliente a descargarlo de nuevo a pesar de tener copia actual en caché.
La solución correcta/recomendada/óptima, es configurar el caché según tus necesidades. Normalmente en el servidor. Como puedes ver en uno de los ejemplos, se pueden usar expresiones regulares para cambiar el caché en archivos concretos. Para el problema que tienes, que creo que es algo más de fase de desarrollo que de producción, te recomiendo configurar el caché de tu servidor como en el ejemplo que te comenté anteriormente (en otra respuesta) de Netlify. Usando el etag para que el navegador compruebe automáticamente si el archivo cambió o no (utilizando e-tag). A parte de que es una solución más robusta, también es más cómoda para ti, ya que no tienes que andar cambiando las url para nada.
Autor
En línea
