Configura el comportamiento del almacenamiento en caché de HTTP

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.

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.

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}\\.').

  • 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

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 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:

Configura Herramientas para desarrolladores Panel de red.

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:

Columnas del panel de red.

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.

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)".

Un estado de respuesta de red de 200.

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.