Entender cómo Angular gestiona el caché de archivos estáticos es fundamental para optimizar el rendimiento de una Progressive Web App. Aunque el framework ofrece una configuración por defecto funcional, conocer cada opción te permite tomar decisiones informadas sobre la experiencia de carga de tus usuarios.
¿Cómo se estructura el archivo ngsw-config para el caché de assets?
El archivo ngsw-config es el centro de control del service worker en Angular. Su estructura por defecto enlaza el archivo index.html y define grupos de caché llamados asset groups [0:15]. Estos grupos organizan los archivos estáticos en categorías con reglas específicas de almacenamiento.
Angular genera dos grupos por defecto:
- app: incluye archivos con hash automático como CSS, JS, HTML, el ícono y el web manifest [1:05].
- assets: contiene recursos estáticos sin hash, como imágenes, banners y logos [2:25].
Cada grupo tiene dos propiedades clave: install mode y update mode, que determinan cuándo y cómo se almacenan los recursos en caché.
¿Cuál es la diferencia entre prefetch y lazy en el install mode?
El install mode define la estrategia de caché inicial y tiene dos valores posibles: prefetch y lazy [0:35].
¿Qué hace el modo prefetch?
Con prefetch, el service worker descarga y guarda en caché todos los archivos del grupo de forma inmediata en la primera visita [0:42]. El navegador detecta los archivos CSS, JS y HTML disponibles, y los almacena sin esperar a que el usuario los solicite.
- Ventaja: tras la primera carga, el usuario no necesita volver a descargarlos.
- Desventaja: consume más ancho de banda en la carga inicial, lo cual puede afectar a usuarios con datos móviles limitados [1:00].
Esta estrategia es ideal para archivos que incluyen un hash único generado por webpack durante la compilación [1:35]. Cada vez que envías un nuevo release, el identificador del archivo cambia automáticamente. El service worker detecta que es una versión nueva y la descarga, sin riesgo de servir archivos desactualizados [1:55].
¿Cómo funciona el modo lazy?
El modo lazy no almacena los archivos de inmediato. En su lugar, espera a que el usuario acceda al recurso para guardarlo en caché [2:35]. Es una estrategia bajo demanda: a medida que el usuario solicita una imagen o cualquier archivo dentro de la carpeta assets, el service worker lo intercepta y lo almacena.
Esta técnica resulta más eficiente para archivos que no tienen hash, como imágenes estáticas, ya que evita descargas innecesarias de recursos que quizás el usuario nunca visite [2:55].
¿Qué ocurre con el update mode cuando se lanza una nueva versión?
El parámetro update mode controla qué sucede cuando existe una actualización disponible [3:15]. Se configura en modo prefetch para que, si los archivos ya están en caché, el service worker descargue automáticamente la versión más reciente y reemplace el contenido almacenado.
En la carpeta dist puedes ver cómo cada archivo compilado genera dos versiones: una para ES2015 y otra para ES5, cada una con su propio hash [1:45]. Ese hash es la clave para que el mecanismo de actualización funcione sin intervención manual.
Angular recomienda mantener esta configuración por defecto a menos que tengas archivos con necesidades especiales [3:30]. Con estas reglas, el sistema cubre de forma eficiente el caché de recursos estáticos.
Sin embargo, hay un aspecto que no se gestiona automáticamente: las peticiones hacia una API o web service [3:50]. Ese tipo de datos dinámicos requiere una estrategia diferente utilizando los llamados data groups, que permiten definir políticas de caché para URLs externas.
¿Ya has experimentado con estas configuraciones en tus proyectos? Comparte tu experiencia y las estrategias que mejor te han funcionado.
