Mantener una Progressive Web App siempre actualizada es uno de los retos más frecuentes cuando trabajamos con service workers. El caché agresivo que emplea el service worker puede provocar que los usuarios sigan viendo versiones antiguas, obligándolos a limpiar caché manualmente o desinstalar la aplicación. Angular resuelve esto con una clase específica que permite detectar nuevas versiones y recargar la app de forma transparente.
¿Qué es SW Update y por qué lo necesitas?
SW Update es una clase que pertenece al paquete @angular/service-worker [0:25]. Su función principal es suscribirse a los cambios que ocurren en el service worker registrado, detectar cuándo existe una nueva versión de la aplicación y ejecutar acciones como un reload automático.
Existen dos estrategias para notificar al usuario sobre actualizaciones:
- Mostrar un mensaje tipo pop-up o toast pidiendo que refresque manualmente.
- Realizar la recarga de forma automática sin intervención del usuario.
La segunda opción resulta más conveniente porque elimina fricción. El usuario ni siquiera nota que hubo una actualización; simplemente recibe los archivos más recientes [0:48].
¿Cómo se implementa la actualización automática en el componente?
Toda la lógica se concentra en el AppComponent. El proceso sigue el patrón de inyección de dependencias de Angular, donde SwUpdate se inyecta a través del constructor [2:10].
¿Cómo se inyecta y se suscribe a las actualizaciones?
- Se importa
SwUpdate desde @angular/service-worker.
- Se inyecta como dependencia privada en el constructor del componente.
- Se crea un método llamado
updatePWA que contiene la suscripción.
Dentro de ese método se utiliza la propiedad available, que es un observable. Al suscribirse, cada vez que el service worker detecta una versión nueva, se ejecuta el callback [2:35]:
typescript
updatePWA() {
this.update.available
.subscribe(value => {
console.log('update', value);
window.location.reload();
});
}
La instrucción window.location.reload() realiza una recarga profunda que obliga al navegador a descargar los nuevos archivos sin que el usuario tenga que intervenir [3:20].
¿Cómo se activa con el ciclo de vida del componente?
Para que la verificación comience desde el inicio, se implementa la interfaz OnInit y se ejecuta updatePWA dentro del método ngOnInit [3:48]:
typescript
export class AppComponent implements OnInit {
constructor(private update: SwUpdate) {}
ngOnInit() {
this.updatePWA();
}
updatePWA() {
this.update.available.subscribe(value => {
console.log('update', value);
window.location.reload();
});
}
}
Con esto, cada vez que el componente principal se inicializa, queda escuchando posibles actualizaciones del service worker.
¿Cómo se verifica en producción y en dispositivos móviles?
Una vez implementado, se compila con ng build --prod y se despliega con Firebase deploy [4:45]. Es importante limpiar el caché y desinstalar la versión anterior solo la primera vez, ya que esta es la versión que incorpora el mecanismo de auto-actualización.
Para probarlo se realiza un cambio sencillo en el código, por ejemplo renombrar un texto del header de "home" a "init" [6:15]. Al compilar y desplegar nuevamente:
- En escritorio, al abrir la aplicación instalada desde Chrome Apps, el cambio aparece automáticamente sin necesidad de borrar caché ni forzar recarga [7:30].
- En dispositivos móviles, tras desinstalar la versión antigua e instalar la nueva, las siguientes actualizaciones llegarán sin intervención del usuario [8:10].
Esta es una diferencia fundamental frente a las aplicaciones nativas distribuidas por Play Store o App Store. En tiendas de aplicaciones, la actualización depende del sistema operativo, de la prioridad que asigne el dispositivo y de si el usuario tiene habilitadas las actualizaciones automáticas. Esto genera fragmentación de versiones: distintos usuarios con distintas versiones de la misma app [9:12].
Con una PWA, cada deploy al servidor garantiza que todos los usuarios reciben la misma versión de forma inmediata y automática, eliminando tiempos de espera y asegurando consistencia en la experiencia.
¿Ya implementaste actualizaciones automáticas en tu PWA? Comparte tu experiencia o dudas sobre cómo manejas el caché del service worker en tus proyectos.
