Las ventajas y desventajas de usar una lógica de vencimiento coherente o diferente en la caché del service worker y las capas de caché HTTP
Si bien los service workers y las AWP 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. En este artículo, se aborda el panorama general de la caché del navegador, lo que incluye lo siguiente:
- Los casos de uso y las diferencias entre el almacenamiento en caché de los trabajadores del servicio y el almacenamiento en caché de HTTP.
- Las ventajas y desventajas de las distintas estrategias de vencimiento del almacenamiento en caché de los service workers en comparación con las habituales estrategias de almacenamiento en caché HTTP.
Descripción general del flujo de almacenamiento en caché
En un nivel alto, un navegador sigue el orden de almacenamiento en caché que se muestra a continuación cuando solicita un recurso:
- Caché del service worker: El service worker verifica si el recurso está en su caché. decide si devolver el recurso en sí según sus estrategias de almacenamiento en caché programadas. Ten en cuenta que esto no sucede automáticamente. Debes crear un controlador de eventos de recuperación en tu service worker e interceptar solicitudes de red para que las solicitudes se entreguen desde el servicio en la caché del trabajador, en lugar de la red.
- Caché de HTTP (también conocida como caché del navegador): si el recurso se encuentra en la carpeta HTTP en caché y aún no ha caducado, el navegador usa automáticamente el recurso de la caché HTTP.
- Del lado del servidor: si no se encuentra nada en la caché del service worker ni en la caché HTTP, navegador va a la red para solicitar el recurso. Si el recurso no está almacenado en caché en una CDN, la solicitud debe volver al servidor de origen.
Capas de almacenamiento en caché
Almacenamiento en caché de service worker
Un service worker intercepta las solicitudes HTTP de tipo red y usa un estrategia de almacenamiento en caché para determinar qué recursos deben mostrarse al navegador. La caché del service worker y la caché HTTP tienen el mismo propósito general, pero la caché del service worker ofrece más capacidades de almacenamiento en caché, como un control detallado sobre qué se almacena en caché y cómo se realiza el almacenamiento en caché.
Controla la caché del trabajador de servicio
Un service worker intercepta las solicitudes HTTP con el evento event
objetos de escucha (por lo general, el evento fetch). En este fragmento de código, se demuestra la lógica de una estrategia de almacenamiento en caché Cache-First.
Te recomendamos que uses Workbox para evitar reinventar la rueda. Por ejemplo, puedes registrar las rutas de URL de los recursos con una sola línea de código de regex.
import {registerRoute} from 'workbox-routing';
registerRoute(new RegExp('styles/.*\\.css'), callbackHandler);
Estrategias y casos de uso de almacenamiento en caché de los trabajadores del servicio
En la siguiente tabla, se describen las estrategias comunes de almacenamiento en caché del trabajador de servicio y cuándo es útil cada una.
| Estrategias | Rationale de actualización | Casos de uso |
|---|---|---|
| Red solo | El contenido debe estar actualizado en todo momento. |
|
| Red recurrir a la caché | Es preferible publicar el contenido actualizado. Sin embargo, si la red falla o es inestable, aceptable para publicar contenido un poco antiguo. |
|
| Stale-while-revalidate | Está bien publicar contenido almacenado en caché de inmediato, pero se debe usar contenido actualizado en el futuro. |
|
| Primero la caché, luego la red | El contenido no es fundamental y se puede entregar desde la caché para obtener mejoras de rendimiento, pero el trabajador de servicio debe verificar si hay actualizaciones de vez en cuando. |
|
| Solo caché | El contenido rara vez cambia. |
|
Beneficios adicionales del almacenamiento en caché de service worker
Además del control detallado de la lógica de almacenamiento en caché, el almacenamiento en caché del trabajador del servicio también proporciona lo siguiente:
- Más memoria y espacio de almacenamiento para el origen: El navegador asigna la caché HTTP. recursos por origen. En otro palabras, si tienes varios subdominios, todos comparten la misma caché HTTP. No hay garantía de que el contenido de tu origen o dominio permanezca en la caché HTTP durante mucho tiempo. Por ejemplo, un usuario puede purgar la caché limpiando manualmente la IU de configuración de un navegador o activando una recarga forzada en una página. Con una caché de trabajador de servicio, es mucho más probable que tu contenido almacenado en caché permanezca en caché. Consulta Almacenamiento persistente para obtener más información.
- Mayor flexibilidad con redes inestables o experiencias sin conexión: Con la caché HTTP, solo tienes una opción binaria: el recurso se almacena en caché o no. Con almacenamiento en caché de service worker puedes mitigar pequeños “trampas” sea mucho más fácil (con la estrategia "inactivo durante la revalidación"), ofrecer una experiencia sin conexión completa (con la estrategia "Solo caché") o incluso algo en en el medio, como IUs personalizadas con partes de la página que provienen de la caché del service worker y Se excluyen algunas partes (con la estrategia "Configurar controlador de captura") cuando corresponda.
Almacenamiento en caché de HTTP
La primera vez que un navegador carga una página web y los recursos relacionados, los almacena en su caché HTTP. Por lo general, los navegadores habilitan automáticamente la caché HTTP, a menos que el usuario final la inhabilite de forma explícita.
El uso del almacenamiento en caché HTTP implica depender del servidor para determinar cuándo almacenar en caché un recurso y durante cuánto tiempo.
Controla el vencimiento de la caché HTTP con encabezados de respuesta HTTP
Cuando un servidor responde a una solicitud del navegador para un recurso, el servidor usa encabezados de respuesta HTTP para le indica al navegador por cuánto tiempo debe almacenar en caché el recurso. Consulta Encabezados de respuesta: configura tu servidor web para obtener más información.
Estrategias de almacenamiento en caché de HTTP y casos de uso
El almacenamiento en caché de HTTP es mucho más simple que el de service worker, ya que solo lidia con lógica de vencimiento de recursos basada en el tiempo (TTL). Consulta ¿Qué valores de encabezado de respuesta deberías usar? y Resumen para obtener más información sobre las estrategias de almacenamiento en caché de HTTP.
Cómo diseñar tu lógica de vencimiento de la caché
En esta sección, se explican las ventajas y desventajas de usar una lógica de vencimiento coherente en el service worker capas de caché y HTTP, así como los pros y los contras de la lógica de vencimiento separada capas.
En el siguiente Glitch, se muestra cómo funcionan la caché de service worker y la caché HTTP en diferentes situaciones:
Lógica de vencimiento coherente para todas las capas de caché
Para demostrar las ventajas y desventajas, analizaremos 3 situaciones: a largo plazo, mediano plazo y a corto plazo.
| Situaciones | Almacenamiento en caché a largo plazo | Almacenamiento en caché a mediano plazo | Almacenamiento en caché a corto plazo |
|---|---|---|---|
| Estrategia de almacenamiento en caché del service worker | Caché y recurrir a la red | Inactiva durante la revalidación | Red y recurrir a la caché |
| TTL del almacenamiento en caché del servicio de trabajo | 30 días | 1 día | 10 min |
| Antigüedad máxima de la caché HTTP | 30 días | 1 día | 10 min |
Situación: Almacenamiento en caché a largo plazo (caché y recurrir a la red)
- Cuando un recurso almacenado en caché es válido (<= 30 días): el service worker muestra el recurso de inmediato sin ir a la red.
- Cuando un recurso almacenado en caché vence (> 30 días): El trabajador de servicio se dirige a la red para recuperar el recurso. El navegador no tiene una copia del recurso en su caché HTTP, por lo que se dirige al servidor para obtenerlo.
Desventaja: En este caso, el almacenamiento en caché HTTP proporciona menos valor porque el navegador siempre pasar la solicitud al servidor cuando la caché caduque en el service worker.
Situación: Almacenamiento en caché a mediano plazo (Stale-while-revalidate)
- Cuando un recurso almacenado en caché es válido (<= 1 día): el service worker muestra el el recurso inmediatamente y va a la red para recuperarlo. El navegador tiene una copia del recurso en su caché HTTP, por lo que muestra esa copia al trabajador del servicio.
- Cuando un recurso almacenado en caché vence (más de 1 día): el service worker muestra el el recurso inmediatamente y va a la red para recuperarlo. El navegador no tiene una copia del recurso en su caché HTTP, por lo que va al servidor para recuperarlo.
Contras: El trabajador del servicio requiere un bloqueo adicional de la caché para anular la caché HTTP con el fin de aprovechar al máximo el paso "volver a validar".
Situación: Almacenamiento en caché a corto plazo (red y recurrir a la caché)
- Cuando un recurso almacenado en caché es válido (<= 10 min): El trabajador de servicio va a la red para recuperar el recurso. El navegador tiene una copia del recurso en su caché HTTP, por lo que se la muestra al service worker sin ir al servidor.
- Cuando un recurso almacenado en caché caduca (más de 10 minutos): El service worker muestra el el recurso inmediatamente y va a la red para recuperarlo. El navegador no tiene un del recurso en su caché HTTP, por lo que se va del servidor a recuperar el recurso.
Desventaja: Al igual que en el caso de almacenamiento en caché a mediano plazo, el service worker requiere de invalidación de caché para anular la caché HTTP a fin de recuperar el último recurso del del servidor.
Trabajador de servicio en todas las situaciones
En todas las situaciones, la caché del service worker aún puede devolver recursos almacenados en caché cuando la red sean inestables. Por otro lado, la caché HTTP no es confiable cuando la red es inestable o inactiva.
Diferente lógica de vencimiento de la caché en las capas HTTP y la caché del service worker
Para demostrar los pros y los contras, volveremos a analizar las situaciones a largo, mediano y corto plazo.
| Situaciones | Almacenamiento en caché a largo plazo | Almacenamiento en caché a mediano plazo | Almacenamiento en caché a corto plazo |
|---|---|---|---|
| Estrategia de almacenamiento en caché del service worker | Caché y recurrir a la red | Inactiva durante la revalidación | Red y recurrir a la caché |
| TTL del almacenamiento en caché del servicio de trabajo | 90 días | 30 días | 1 día |
| HTTP cache max-age | 30 días | 1 día | 10 min |
Situación: Almacenamiento en caché a largo plazo (caché y recurrir a la red)
- Cuando un recurso almacenado en caché es válido en la caché del service worker (<= 90 días): El service worker muestra el recurso almacenado en caché de inmediato.
- Cuando un recurso almacenado en caché caduca en la memoria caché del service worker (más de 90 días), el servicio trabajador va a la red para recuperar el recurso. El navegador no tiene una copia del en su caché HTTP, por lo que se pone del lado del servidor.
Ventajas y desventajas:
- Ventaja: Los usuarios experimentan una respuesta instantánea a medida que el service worker muestra recursos almacenados en caché. de inmediato.
- Ventaja: El service worker tiene un control más preciso sobre cuándo usar su caché y cuándo. solicitar nuevas versiones de los recursos.
- Contras: Se requiere una estrategia de almacenamiento en caché del trabajador de servicio bien definida.
Situación: Almacenamiento en caché a medio plazo (inactivo durante la revalidación)
- Cuando un recurso almacenado en caché es válido en la caché del trabajador de servicio (<= 30 días): El trabajador de servicio muestra el recurso almacenado en caché de inmediato.
- Cuando un recurso almacenado en caché vence en la caché del service worker (más de 30 días), el servicio trabajador va a la red para obtener el recurso. El navegador no tiene una copia del recurso en a su caché HTTP, por lo que va del servidor.
Ventajas y desventajas:
- Ventaja: Los usuarios experimentan una respuesta instantánea, ya que el trabajador del servicio muestra los recursos almacenados en caché de inmediato.
- Ventaja: El trabajador del servicio puede garantizar que la próxima solicitud de una URL determinada use una respuesta actualizada de la red, gracias a la nueva validación que se realiza "en segundo plano".
- Contras: Se requiere una estrategia de almacenamiento en caché del trabajador de servicio bien definida.
Situación: Almacenamiento en caché a corto plazo (red y recurrir a la caché)
- Cuando un recurso almacenado en caché es válido en la memoria caché del service worker (<= 1 día), el servicio trabajador va a la red para obtener el recurso. El navegador muestra el recurso de la caché HTTP si está allí. Si la red no está disponible, el service worker muestra el recurso de la caché del service worker.
- Cuando un recurso almacenado en caché caduca en la memoria caché del service worker (más de 1 día): el servicio trabajador va a la red para recuperar el recurso. El navegador recupera los recursos a través de la red, ya que la versión almacenada en caché en su caché HTTP caducó.
Ventajas y desventajas:
- Ventaja: Cuando la red es inestable o está inactiva, el service worker muestra el almacenamiento en caché. los recursos de inmediato.
- Desventaja: El service worker requiere protección contra la memoria caché adicional para anular la caché HTTP y Marca la opción "Primero la red" solicitudes.
Conclusión
Dada la complejidad de la combinación de situaciones de almacenamiento en caché, no es posible diseñar una sola regla que cubra todos los casos. Sin embargo, en función de los hallazgos de las secciones anteriores, hay algunas sugerencias que debes tener en cuenta cuando diseñes tus estrategias de caché:
- La lógica de almacenamiento en caché del trabajador de servicio no tiene que ser coherente con la lógica de vencimiento del almacenamiento en caché HTTP. Si es posible, usa una lógica de vencimiento más larga en el trabajador de servicio para otorgarle más control.
- El almacenamiento en caché HTTP sigue desempeñando un rol importante, pero no es confiable cuando la red se sea inestable o baja.
- Revisa las estrategias de almacenamiento en caché de cada recurso para asegurarte de que tu service worker se almacene en caché proporciona su valor, sin entrar en conflicto con la caché HTTP.