Skip to main content

Instalación Técnica del Sistema Offline

Introducción​

Este documento describe la implementación técnica del sistema offline en la aplicación. El objetivo es permitir que la aplicación host y ciertos microfrontends (MFEs) funcionen sin conexión a internet, notificando al usuario sobre el estado de la red.

Configuración del Service Worker​

El núcleo de la funcionalidad offline se basa en el Service Worker de Angular. El archivo de configuración ngsw-config.json en el proyecto alpura-frontend-angular-mfe-archetype-base-template define cómo se cachean los assets y los datos.

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/index.html", "/**/*.css", "/**/*.js"]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/assets/**"]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "api-menu",
      "urls": ["/**/menu/**"],
      "cacheConfig": {
        "maxSize": 20,
        "maxAge": "1d",
        "strategy": "freshness",
        "timeout": "10s"
      }
    }
  ]
}
  • assetGroups: Se configuran dos grupos de assets:
    • app: Carga de forma anticipada (prefetch) los archivos críticos de la aplicación (index.html, css, js). Esto asegura que la aplicación base siempre esté disponible.
    • assets: Carga de forma perezosa (lazy) los assets generales.
  • dataGroups: Se cachean las respuestas de las APIs, como la del menú (/menu/**), utilizando una estrategia freshness para mantener los datos actualizados.

Detección del Estado de la Red​

El servicio NetworkStatusService, ubicado en alpura-frontend-angular-mfe-archetype-base-template/src/app/shared/services/network-status.service.ts, es responsable de monitorear la conectividad a internet. Este servicio realiza una petición HEAD a un recurso del proyecto cada 5 segundos para verificar si la aplicación tiene conexión y emite el estado a través de un Observable.

Integración con la UI​

El NetworkStatusService es un servicio de bajo nivel para uso exclusivo de la arquitectura. Para que los microfrontends (MFEs) y otros componentes de la aplicación puedan reaccionar a los cambios en el estado de la conexión, deben consumir los valores almacenados en el AlpuraStorageViewModel.

El ContentLayoutComponent se encarga de obtener el estado de la red y lo almacena en el AlpuraStorageViewModel (alpura-storage.viewmodel.ts) bajo dos claves:

  • IS_ONLINE_OBS: Un Observable<boolean> al que los componentes se pueden suscribir para reaccionar a los cambios de estado en tiempo real.
  • IS_ONLINE: Un boolean que representa el estado actual de la conexión para comprobaciones síncronas.

Cualquier MFE que necesite saber si la aplicación está online u offline debe inyectar AlpuraStorageViewModel y obtener uno de estos dos valores:

import { AlpuraStorageViewModel } from '@alpura/commons';
import { inject } from '@angular/core';

// ...

const storage = inject(AlpuraStorageViewModel);

// Para obtener el estado actual de forma síncrona
const isOnline: boolean = storage.getStorageMap('IS_ONLINE') as boolean;

// Para suscribirse a los cambios de estado
const isOnline$: Observable<boolean> = storage.getStorageMap('IS_ONLINE_OBS') as Observable<boolean>;

En el HeaderComponent se utiliza este mecanismo para mostrar notificaciones y cambiar el estilo (rojo para offline, verde para online) y así notificar al usuario sobre el estado de la conexión.

Habilitación de Microfrontends en Modo Offline​

No todos los microfrontends (MFEs) estarán disponibles en modo offline. Esta decisión se gestiona a través de la configuración de las rutas de los remotos.

Interfaz de Rutas Remotas​

Se ha añadido la propiedad opcional enableOffline a la interfaz IRemoteRoutesMenu.

alpura-frontend-angular-mfe-archetype-base-template/src/app/shared/types/remote-routes.type.ts

export interface IRemoteRoutesMenu {
  // ...
  enableOffline?: boolean;
}

Configuración en el Gestor de Menús​

El Gestor de Menús permite configurar qué MFEs estarán disponibles sin conexión. En el formulario de configuración de menús, se encuentra un campo para habilitar esta opción.

alpura-frontend-angular-mfe-arch-views/src/app/features/menu/views/form-menu/form-section/form-section.component.ts

export class FormMenuSectionComponent implements OnInit {
  // ...
  menuForm = new FormGroup({
    // ...
    enableOffline: new FormControl<boolean>(false),
    // ...
  });
  // ...
}

Cuando un MFE tiene la bandera enableOffline en true, la lógica de la aplicación se encarga de que sus recursos sean cacheados por el Service Worker para que pueda ser cargado sin conexión a internet. La generación de rutas dinámicas en generate-dynamic-routes.util.ts utiliza esta bandera para determinar el comportamiento de carga del MFE.