PWA & SWORKER

Hemos creado una manera de manejar las configuraciones correctas para hacer que nuestras apps sean todas PWA con auto gestión de actualización de versiones de manera automática; instalando @angular/pwa, creado un servicio llamado Sworker ( el cual se injecta en app.config.ts) y configurando el manifest.webmanifest para las visual de la PWA.

Lo haremos en 4 pasos que describiremos a continuación:

PASOS CLAVES:

1. Instalación de pwa Angular: ng add @angular/pwa.

2. Creación del servicio Sworker ( de lidertech): ng g s services/sworker

3. Configuración del app.config.ts para usar el Sworker.

4. Edición del Manifest.webmanifest. ( nombre de app y colores).

OJO REVISA EL INFORME COMPLETO DEL REPOSITORIO GIT HUB.

1. Instalación de PWA Angular:

En la terminal lanzamos el comando: ng add @angular/pwa

Eso instalará y creará los archivos de Manifest.webmanifest para hacer que la app se instale en el dispositivo, además actualizará el app.config.ts con el siguiente provider():

provideServiceWorker('ngsw-worker.js', {

      enabled: !isDevMode(),  // Configuracion correta para Produccion.

      registrationStrategy: 'registerWhenStable:30000'

    }),

Esto garantiza que se active el service-worker de Angular en nuestra app, haciendo que nuestra app sea instalable en cualquier dispositivo como celular, tablet o pc. 

No asi para TV. 

2. Creación del servicio Sworker ( de Lidertech ):

Crearemos un servicio llamado Sworker con el siguiente comando:

ng g s service/Sworker 

Se creara un nuevo servicio en la carpeta services de nuestro proyecto y agregaremos el código del repositorio:

3. Configuración del app.config.ts para usar el servicio ( Sworker ):

En nuestro app.config.ts vamos a usar el provideAppInitializer de Angular:

provideAppInitializer(() => {     // Inicialización moderna con provideAppInitializer

      const sworker = inject(Sworker) // Injectamos el servicio

      sworker.versionUpdates();       // Usamos el metodo que verifica las actualizaciones.

    })

El cual hace una inicilización temprana del servicio que se encarga de las actualizaciones de la app, detectando si existe una nueva versión de la app y usando la ultima versión lanzada. En este caso usamos inject() para inyectar el servicio y usaos su método interno sworker.versionUpdates(); de esa forma logramos usar el servicio creado para mantener las ultimas versiones de la app en manos del usuario final.

4. Ediciín del manifest.webmanifest :

PWA: todas nuestras apps serán PWA aplicando las técnicas de Angular. 

Sworker: para manejar las actualizaiones automáticas de la app sin que el usuario deba hacer alguna acción.

Inicialización Temprana: todas nuestras apps hacen uso del appInitializer de Angular para inicializaciones tempranas.