Ventajas y desventajas de utilizar una lógica de caducidad diferente o coherente en la caché del trabajador de servicio y las capas de caché HTTP.
Confiabilidad de la red
Si bien los trabajadores de servicios y las PWA se están convirtiendo en estándares de las aplicaciones web modernas, el almacenamiento en caché de recursos se ha vuelto más complejo que nunca. Este artículo cubre el panorama general del almacenamiento en caché del navegador, que incluye:
- Los casos de uso y las diferencias entre el almacenamiento en caché del trabajador de servicio y el almacenamiento en caché HTTP.
- Ventajas y desventajas de las diferentes estrategias de caducidad del almacenamiento en caché de los trabajadores de servicios en comparación con las estrategias de almacenamiento en caché HTTP habituales
Descripción general del flujo de almacenamiento en caché
En un nivel alto, un navegador sigue el siguiente orden de almacenamiento en caché cuando solicita un recurso:
- Caché de trabajador de servicio: El trabajador del servicio comprueba si el recurso está en su caché y decide si devolver el recurso en sí en función de sus estrategias de almacenamiento en caché programadas. Tenga en cuenta que esto no sucede automáticamente. Debe crear un controlador de eventos de recuperación en su trabajador del servicio e interceptar las solicitudes de red para que las solicitudes se atiendan desde la caché del trabajador del servicio en lugar de la red.
- Caché HTTP (también conocido como caché del navegador): Si el recurso se encuentra en la caché HTTP y aún no ha caducado, el navegador utiliza automáticamente el recurso de la caché HTTP.
- Lado del servidor: Si no se encuentra nada en la caché del trabajador del servicio o la caché HTTP, el navegador va a la red para solicitar el recurso. Si el recurso no se almacena en caché en una CDN, la solicitud debe volver al servidor de origen.
Tenga en cuenta que algunos navegadores como Chrome tienen una Memoria caché capa delante de la caché del trabajador del servicio. Los detalles de la memoria caché dependen de la implementación de cada navegador. Desafortunadamente, todavía no hay una especificación clara para esta parte.
Capas de almacenamiento en caché
Almacenamiento en caché de trabajador de servicio
Un trabajador de servicio intercepta solicitudes HTTP de tipo de red y utiliza un
estrategia de almacenamiento en caché
para determinar qué recursos deben devolverse al navegador. La caché del trabajador del servicio y la caché HTTP tienen el mismo propósito general, pero la caché del trabajador del servicio ofrece más capacidades de almacenamiento en caché, como un control detallado sobre exactamente lo que se almacena en caché y cómo se realiza el almacenamiento en caché.
Controlar la caché del trabajador del servicio
Un trabajador de servicio intercepta solicitudes HTTP con oyentes de eventos (generalmente el fetch evento). Esta
fragmento de código demuestra la lógica de un
Caché primero
estrategia de almacenamiento en caché.
Es muy recomendable usar Neceser de costura para evitar reinventar la rueda. Por ejemplo, puedes
registrar rutas de URL de recursos con una sola línea de código regex.
import {registerRoute} from 'workbox-routing';registerRoute(new RegExp('styles/.*.css'), callbackHandler);
Estrategias de almacenamiento en caché y casos de uso del trabajador de servicios
La siguiente tabla describe las estrategias comunes de almacenamiento en caché de los trabajadores de servicios y cuándo es útil cada estrategia.
| Estrategias | Justificación de la frescura | Casos de uso |
|---|---|---|
| Solo red | El contenido tiene que estar actualizado en todo momento. |
|
| Red recurriendo al caché | Es preferible servir el contenido fresco. Sin embargo, si la red falla o es inestable, es aceptable ofrecer contenido un poco antiguo. |
|
| Pasado mientras se revalida | Está bien publicar contenido en caché de inmediato, pero el contenido en caché actualizado debe usarse en el futuro. |
|
| Caché primero, recurra a la red | El contenido no es crítico y se puede servir desde la caché para mejorar el rendimiento, pero el trabajador del servicio debe buscar actualizaciones ocasionalmente. |
|
| Solo caché | El contenido rara vez cambia. |
Beneficios adicionales del almacenamiento en caché del trabajador de servicio
Además del control detallado de la lógica de almacenamiento en caché, el almacenamiento en caché del trabajador de servicio también proporciona:
- Más memoria y espacio de almacenamiento para su origen: El navegador asigna recursos de caché HTTP por origen. En otras palabras, si tiene varios subdominios, todos comparten la misma caché HTTP. No hay garantía de que el contenido de su origen / dominio permanezca en la caché HTTP durante mucho tiempo. Por ejemplo, un usuario puede purgar la caché limpiando manualmente desde la interfaz de usuario de configuración de un navegador o activando una recarga completa en una página. Con una caché de trabajador de servicio, tiene una probabilidad mucho mayor de que su contenido almacenado en caché permanezca en caché. Ver Almacenamiento persistente aprender más.
- Mayor flexibilidad con redes inestables o experiencias fuera de línea: Con la caché HTTP solo tiene una opción binaria: el recurso se almacena en caché o no. Con el almacenamiento en caché del trabajador del servicio, puede mitigar los pequeños «contratiempos» mucho más fácilmente (con la estrategia «obsoleto mientras se revalida»), ofrecer una experiencia completa sin conexión (con la estrategia «Solo caché») o incluso algo intermedio, como IU personalizadas con partes de la página que provienen de la caché del trabajador de servicio y algunas partes excluidas (con la estrategia «Establecer controlador de captura») cuando corresponda.
Almacenamiento en caché HTTP
La primera vez que un navegador carga una página web y recursos relacionados, almacena estos recursos en su caché HTTP. La caché HTTP generalmente se habilita automáticamente por los navegadores, a menos que el usuario final la haya deshabilitado explícitamente.
Usar el almacenamiento en caché HTTP significa confiar en el servidor para determinar cuándo almacenar en caché un recurso y por cuánto tiempo.
Cuando un servidor responde a una solicitud del navegador de un recurso, el servidor usa encabezados de respuesta HTTP para decirle al navegador cuánto tiempo debe almacenar en caché el recurso. Consulte Encabezados de respuesta: configure su servidor web para obtener más información.
Estrategias de almacenamiento en caché HTTP y casos de uso
El almacenamiento en caché HTTP es mucho más simple que el almacenamiento en caché del trabajador de servicio, porque el almacenamiento en caché HTTP solo se ocupa de la lógica de caducidad de recursos basada en el tiempo (TTL). Consulte ¿Qué valores de encabezado de respuesta debería usar? y Resumen para obtener más información sobre las estrategias de almacenamiento en caché HTTP.
Diseñando la lógica de caducidad de su caché
En esta sección se explican los pros y los contras de utilizar una lógica de caducidad coherente en la caché del trabajador de servicio y las capas de caché HTTP, así como los pros y los contras de la lógica de caducidad separada en estas capas.
El siguiente error demuestra cómo el almacenamiento en caché del trabajador de servicio y el almacenamiento en caché HTTP funcionan en acción en diferentes escenarios:
Lógica de caducidad consistente para todas las capas de caché
Para demostrar los pros y los contras, veremos 3 escenarios: a largo plazo, a medio plazo y a corto plazo.
| Escenarios | Almacenamiento en caché a largo plazo | Almacenamiento en caché a medio plazo | Almacenamiento en caché a corto plazo |
|---|---|---|---|
| Estrategia de almacenamiento en caché del trabajador de servicios | Caché, recurriendo a la red | Pasado mientras se revalida | Red recurriendo al caché |
| TTL de caché de trabajador de servicio | 30 dias | 1 día | 10 minutos |
| Edad máxima de caché HTTP | 30 dias | 1 día | 10 minutos |
Escenario: almacenamiento en caché a largo plazo (caché, recurrir a la red)
- Cuando un recurso almacenado en caché es válido (<= 30 días): el trabajador del servicio devuelve el recurso almacenado en caché inmediatamente sin ir a la red.
- Cuando un recurso almacenado en caché caduca (> 30 días): el trabajador del servicio va a la red para buscar el recurso. El navegador no tiene una copia del recurso en su caché HTTP, por lo que pasa al lado del servidor para el recurso.
Con: En este escenario, el almacenamiento en caché HTTP proporciona menos valor porque el navegador siempre pasará la solicitud al lado del servidor cuando el caché expire en el trabajador del servicio.
Escenario: almacenamiento en caché a medio plazo (obsoleto mientras se revalida)
- Cuando un recurso en caché es válido (<= 1 día): el trabajador del servicio devuelve el recurso en caché inmediatamente y va a la red para buscar el recurso. El navegador tiene una copia del recurso en su caché HTTP, por lo que devuelve esa copia al trabajador del servicio.
- Cuando un recurso en caché caduca (> 1 día): el trabajador del servicio devuelve el recurso en caché inmediatamente y va a la red para buscar el recurso. El navegador no tiene una copia del recurso en su caché HTTP, por lo que va del lado del servidor para buscar el recurso.
Desventaja: el trabajador del servicio requiere una eliminación de caché adicional para anular la caché HTTP con el fin de aprovechar al máximo el paso de «revalidación».
Escenario: almacenamiento en caché a corto plazo (la red recurre a la caché)
- Cuando un recurso almacenado en caché es válido (<= 10 minutos): el trabajador del servicio va a la red para buscar el recurso. El navegador tiene una copia del recurso en su caché HTTP, por lo que se lo devuelve al trabajador del servicio sin pasar al lado del servidor.
- Cuando caduca un recurso en caché (> 10 minutos): el trabajador del servicio devuelve el recurso en caché inmediatamente y va a la red para buscar el recurso. El navegador no tiene una copia del recurso en su caché HTTP, por lo que va del lado del servidor para buscar el recurso.
Desventaja: similar al escenario de almacenamiento en caché a mediano plazo, el trabajador del servicio requiere una lógica adicional de eliminación de caché para anular la caché HTTP con el fin de obtener el último recurso del lado del servidor.
Trabajador de servicios en todos los escenarios
En todos los escenarios, la caché del trabajador del servicio aún puede devolver recursos almacenados en caché cuando la red es inestable. Por otro lado, la caché HTTP no es confiable cuando la red es inestable o inactiva.
Diferente lógica de caducidad de caché en la caché del trabajador de servicio y las capas HTTP
Para demostrar los pros y los contras, analizaremos nuevamente los escenarios a largo, mediano y corto plazo.
| Escenarios | Almacenamiento en caché a largo plazo | Almacenamiento en caché a medio plazo | Almacenamiento en caché a corto plazo |
|---|---|---|---|
| Estrategia de almacenamiento en caché del trabajador de servicios | Caché, recurriendo a la red | Pasado mientras se revalida | Red recurriendo al caché |
| TTL de caché de trabajador de servicio | 90 dias | 30 dias | 1 día |
| Edad máxima de caché HTTP | 30 dias | 1 día | 10 minutos |
Escenario: almacenamiento en caché a largo plazo (caché, recurrir a la red)
- Cuando un recurso almacenado en caché es válido en el caché del trabajador del servicio (<= 90 días): el trabajador del servicio devuelve el recurso almacenado en caché inmediatamente.
- Cuando un recurso almacenado en caché caduca en el caché del trabajador del servicio (> 90 días): el trabajador del servicio va a la red para buscar el recurso. El navegador no tiene una copia del recurso en su caché HTTP, por lo que pasa al lado del servidor.
Pros y contras:
- Ventaja: los usuarios experimentan una respuesta instantánea ya que el trabajador del servicio devuelve los recursos almacenados en caché de inmediato.
- Ventaja: el trabajador del servicio tiene un control más detallado de cuándo usar su caché y cuándo solicitar nuevas versiones de recursos.
- Desventaja: se requiere una estrategia de almacenamiento en caché de trabajadores de servicios bien definida.
Escenario: almacenamiento en caché a medio plazo (obsoleto mientras se revalida)
- Cuando un recurso almacenado en caché es válido en el caché del trabajador del servicio (<= 30 días): el trabajador del servicio devuelve el recurso almacenado en caché inmediatamente.
- Cuando un recurso almacenado en caché caduca en el caché del trabajador del servicio (> 30 días): el trabajador del servicio va a la red en busca del recurso. El navegador no tiene una copia del recurso en su caché HTTP, por lo que pasa al lado del servidor.
Pros y contras:
- Ventaja: los usuarios experimentan una respuesta instantánea ya que el trabajador del servicio devuelve los recursos almacenados en caché de inmediato.
- Ventaja: el trabajador del servicio puede asegurarse de que siguiente La solicitud de una URL determinada utiliza una nueva respuesta de la red, gracias a la revalidación que ocurre «en segundo plano».
- Desventaja: se requiere una estrategia de almacenamiento en caché de trabajadores de servicios bien definida.
Escenario: almacenamiento en caché a corto plazo (red recurriendo a caché)
- Cuando un recurso almacenado en caché es válido en la memoria caché del trabajador del servicio (<= 1 día): el trabajador del servicio va a la red en busca del recurso. El navegador devuelve el recurso de la caché HTTP si está allí. Si la red no funciona, el trabajador del servicio devuelve el recurso de la caché del trabajador del servicio.
- Cuando un recurso almacenado en caché caduca en el caché del trabajador del servicio (> 1 día): el trabajador del servicio va a la red para buscar el recurso. El navegador recupera los recursos a través de la red cuando la versión almacenada en caché en su caché HTTP ha caducado.
Pros y contras:
- Ventaja: cuando la red es inestable o inactiva, el trabajador del servicio devuelve los recursos almacenados en caché de inmediato.
- Desventaja: el trabajador del servicio requiere una eliminación de caché adicional para anular la caché HTTP y realizar solicitudes de «Red primero».
Conclusión
Dada la complejidad de la combinación de escenarios de almacenamiento en caché, no es posible diseñar una regla que cubra todos los casos. Sin embargo, según los resultados de las secciones anteriores, hay algunas sugerencias para tener en cuenta al diseñar sus estrategias de caché:
- La lógica de almacenamiento en caché del trabajador de servicio no necesita ser coherente con la lógica de caducidad del almacenamiento en caché HTTP. Si es posible, utilice una lógica de caducidad más larga en el trabajador del servicio para otorgarle más control al trabajador del servicio.
- El almacenamiento en caché HTTP todavía juega un papel importante, pero no es confiable cuando la red es inestable o está inactiva.
- Revise sus estrategias de almacenamiento en caché para cada recurso para asegurarse de que su estrategia de almacenamiento en caché del trabajador de servicios proporcione su valor, sin entrar en conflicto con la caché HTTP.
Aprende más
