Configura el comportamiento del almacenamiento en caché de HTTP

Jeff Posnick

Para seguir este codelab, abre este error en una segunda pestaña.

Nota: En este codelab, se usan las Herramientas para desarrolladores de Chrome. Si aún no lo tienes, descarga Chrome.

En este codelab, se muestra cómo cambiar los encabezados de almacenamiento en caché HTTP que muestra una Servidor web basado en Node.js, que ejecuta la entrega Express en un framework de aplicaciones. También te mostrará cómo confirmar que el comportamiento de almacenamiento en caché que esperas se está aplicando mediante el panel Network en Herramientas para desarrolladores de Chrome.

Nota: Si bien las instrucciones específicas se adaptan a Express, los principios generales para elegir los encabezados correctos de almacenamiento en caché se aplican a cualquier entorno de servidor web.

Familiarízate con el proyecto de muestra

Estos son los archivos clave con los que trabajarás en el proyecto de muestra:

• server.js contiene el código de Node.js que entrega la interfaz de la app web. contenido. Usa Express para controlar las solicitudes HTTP y respuestas. En particular, express.static() se usa para entregar los archivos locales del directorio público, por lo que serve-static documentación serán útiles.
• public/index.html es el HTML de la aplicación web. Como la mayoría de los archivos HTML, no contener información sobre el control de versiones como parte de su URL.
• public/app.15261a07.js y public/style.391484cf.css son el JavaScript de la app web y los recursos de los CSS. Cada uno de estos archivos contiene un hash en sus URLs en relación con su contenido. El index.html es responsable de mantener realizar un seguimiento de qué URL con versión específica cargar.

Nota: En el “mundo real”, el proceso de asignar hashes y actualizar los archivos HTML para incluir referencias a la URL con la versión más reciente se controlaría con una herramienta de compilación como webpack. Para los fines de este codelab, imagina que los hashes se generaron como parte de un proceso de compilación que ya ocurrió.

Configura los encabezados de almacenamiento en caché para nuestro código HTML

Cuando respondas solicitudes de URLs que no contienen información sobre el control de versiones, haz lo siguiente: asegúrate de agregar Cache-Control: no-cache a tus mensajes de respuesta. Junto con se recomienda configurar uno de dos encabezados de respuesta adicionales: Last-Modified o ETag. El index.html pertenece a esta categoría. Puedes dividir esto en dos pasos.

Primero, los encabezados Last-Modified y ETag son controlados por el etag y lastModified opciones de configuración. En realidad, ambas opciones están predeterminadas en true para todas las HTTP, por lo que en esta configuración actual, no tienes que habilitar esta opción el comportamiento de los usuarios. De todos modos, puedes ser explícito en tu configuración.

En segundo lugar, debes poder agregar el encabezado Cache-Control: no-cache, pero solo para tus documentos HTML (en este caso, index.html). La forma más fácil de configurar este encabezado condicionalmente es escribir un setHeaders function: y, en su interior, comprueba si la solicitud entrante es para un documento HTML.

• Haz clic en Remix para editar para que el proyecto se pueda editar.

La configuración de entrega estática en server.js comienza de la siguiente manera:

app.use(express.static('public'));

• Realiza los cambios descritos anteriormente y deberías tener algo que se ve así:

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    }
  },
}));

Configura los encabezados de almacenamiento en caché para las URLs con versión

Al responder solicitudes de URLs que contienen "huella digital" o información sobre el control de versiones y cuyo contenido nunca esté destinado a cambiar, agrega Cache-Control: max-age=31536000 a tus respuestas. Los operadores app.15261a07.js y style.391484cf.css corresponden a esta categoría.

A partir del setHeaders function en el último paso, puedes agregar lógica adicional para verificar si un determinado es para una URL con control de versiones y, de ser así, agrega el encabezado Cache-Control: max-age=31536000.

La forma más sólida de hacerlo es usar un expresión regular para ver si el recurso solicitado coincide con algún patrón específico saber en qué consisten los hashes. En el caso de este proyecto de muestra, siempre es ocho caracteres del conjunto de dígitos 0-9 y las letras en minúscula a-f (es decir, caracteres hexadecimales). El hash siempre está separada por un carácter . a cada lado.

Una expresión regular que coinciden con esas reglas generales se puede expresar como new RegExp('\\.[0-9a-f]{8}\\.').

Nota: Procura ser lo más específico posible cuando creas estas reglas para protegerte de problemas futuros. Una coincidencia más general, como comprobar la extensión de archivo .js o .css, podría generar un problema en el futuro si agregas más recursos de JavaScript o CSS sin versiones a tu proyecto.

• Modifica la función setHeaders para que se vea de la siguiente manera:

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');

    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    } else if (hashRegExp.test(path)) {
      // If the RegExp matched, then we have a versioned URL.
      res.setHeader('Cache-Control', 'max-age=31536000');
    }
  },
}));

Confirma el comportamiento nuevo con las Herramientas para desarrolladores

Nota: Para familiarizarte con el panel Network de las Herramientas para desarrolladores de Chrome, realiza este codelab.

Una vez implementadas las modificaciones en el servidor de archivos estáticos, puedes comprobar Asegúrate de que los encabezados correctos estén estableciendo. Para ello, obtén una vista previa de la app activa con el panel Network de Herramientas para desarrolladores abierto.

• Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa

• Personaliza las columnas que se que se muestran en el panel Network para incluir la información que sea más relevante. Para ello, haz clic con el botón derecho en el encabezado de la columna:

Aquí, las columnas a las que debes prestar atención son Name, Status, Cache-Control, ETag y Last-Modified.

• Con las Herramientas para desarrolladores abiertas en el panel Network, actualiza la página.

Después de cargar la página, deberías ver entradas en el panel Network que se ven de la siguiente manera:

La primera fila es para el documento HTML al que navegaste. Está correctamente publicado con Cache-Control: no-cache. El estado de la respuesta HTTP para esa solicitud es un 304. Esta significa que el navegador supo que no debía usar el HTML almacenado en caché de inmediato, sino que realizó una solicitud HTTP al servidor web mediante Last-Modified y ETag para ver si hubo alguna actualización en el código HTML que ya tenía. su caché. La respuesta HTTP 304 indica que no hay HTML actualizado.

Nota: Cache-Control: no-cache no significa "nunca se usó la copia almacenada en caché". Significa que “siempre verifica primero con el servidor y usa la copia almacenada en caché si hay una respuesta HTTP 304”.

Las dos filas siguientes son para los recursos de JavaScript y CSS con versión. Deberías verás que se entregan con Cache-Control: max-age=31536000, y el estado HTTP para cada una es 200. Debido a la configuración utilizada, no se hace ninguna solicitud real al en el servidor Node.js y, si haces clic en la entrada, verás más detalles y la respuesta es "(de la memoria caché del disco)".

Los valores reales para las columnas ETag y Last-Modified no son muy importantes. El lo importante es confirmar que se están configurando.

En resumen

Una vez que recorriste los pasos de este codelab, ya sabes cómo configurar los encabezados de respuesta HTTP en un servidor web basado en Node.js mediante Express, para un uso óptimo de la caché HTTP. También tienes los pasos que debes confirmar que se está utilizando el comportamiento esperado del almacenamiento en caché, a través del panel Network en Herramientas para desarrolladores de Chrome.