06

Abr

Publicado por: Xavi Cobos | Angular | app development | Progressive Web App | PWA | web development

Cómo transformar una Aplicación Angular en Progressive Web App

En una publicación anterior de este mismo blog ya hablé sobre cómo crear una login con Angular (“Cómo crear login y autenticación con Angular”), en ese artículo mencionaba algunos conceptos básicos de Angular, mientras se crea un login básico.

Este artículo va más allá, te explicaré cómo transformar una app Angular en una ‘Progressive Web App’. Suena bien, ¿verdad?.
Para ello, antes de empezar repasaré el concepto “Progressive Web App” (PWA en adelante) y explicaré por qué es interesante que una app sea PWA.

Pero, ¿qué es una PWA?

Una PWA, (Progressive Web App) son páginas web capaces de utilizar parte del potencial de una aplicación nativa.

Las PWA se pueden instalar mediante su visita a través de un navegador o, simplemente, para consultar como si fueran una página web. Cuanto más se usen estas apps, mejor será la experiencia del usuario.

Las cualidades más destacables de las PWA son:

  • No requieren conexión a internet para funcionar correctamente y ser visualizadas (pues se almacenan los datos en “caché” cuando el usuario está con conexión para poder ser mostrados cuando no disponga de ella.
  • Permite la utilización de notificaciones push al más puro estilo app convencionales
  • Se puede mostrar como icono de la aplicación en la pantalla de tu smartphone como si de una app normal se tratara, lo que agiliza la accesibilidad al site.

¡Manos a la obra!

Para empezar, es aconsejable que la aplicación que usaremos esté al día, es decir, realizar un mantenimiento mínimo de la aplicación con actualizaciones de las dependencias y la versión de Angular para que todo esté en orden. Una vez hecho esto… ¡Adelante!

Requisitos previos

En el transcurso de este artículo usaré el “node v8.9.6” y “angular-cli 1.7.3”

Validando la aplicación

En un primer momento, partiré de la aplicación funcional con un login creada para el artículo mencionado anteriormente. Pero como el objetivo de este artículo es ir más allá y transformarla en PWA, el primer paso consistrá en realizar una auditoría de la aplicación para comprobar cómo está.
Para ello, yo suelo usar ‘Lighthouse’, un complemento de Google Chrome incorporado en las herramientas de desarrollo, ubicado en la pestaña ‘Audits’.
Esta prueba se deberá realizar también al final, cuando hayas finalizado el proceso que ahora estamos empezando.
Para hacer la auditoría, se subirá la aplicación a la página ‘Github’ y los resultados son que puedes ver en la imagen siguiente.

angular-pwa-justdigital

Resultado de la auditoria PWA.

Como podrás observar, no son unos resultados óptimos para una PWA, ¡pero no desesperes! Si sigues los pasos que te mostraré a continuación conseguirás una optimización de PWA completa.

¡Qué empiece la transformación!

Como veíamos en la auditoría, queda claro que la aplicación por ahora no se parece en nada a una PWA. Para ello, deberás seguir los pasos siguientes:

1º Añadir el “loader”

El “loader” es una pantalla que se muestra al usuario para que entienda que la aplicación está cargando. También se le suele llamar “Spinner”.
Para añadir el “loader” se deberá colocar dentro de las tags de “app-root” en el “index.html “. Una vez cargada la aplicación de Angular, este loader desaparecerá. A continuación te muestro como:

[src/index.html]

 

 

 

 

 

 

 

 

Para hacer el “spinner” más atractivo le puedes añadir clases en el styles.scss. En la red hay muchos “loaders” hechos con CSS…¡Elige tu favorito o edítalo como quieras!

2º JavaScript Fallback

Un requisito indispensable para que la aplicación funcione perfectamente es el uso de JavaScript. Por lo tanto, deberás avisar a los usuarios en el caso de que no esté disponible tal que así:

[src/index.html]

3º Diseño responsive

Además, deberás adaptar el diseño a los diferentes formatos de pantalla. Una forma sencilla de hacerlo es usando ‘media-queries’. Aquí te dejo el enlace a la referencia sobre ellas.

4º Manifest

El “manifest” es un documento escrito en JSON que especifica las características de la PWA. Iconos, nombre, descripción, etc…
Si quieres aprender más sobre este documento puedes visitar la especificación en este enlace.
Con ello, habrás añadido los iconos que tendría la aplicación una vez instalada en desktop. Los podemos encontrar en el directorio assets con diferentes medidas para que se adapten a los diferentes formatos.
El “manifest.json“ debería parecerse a esto:

[src/manifest.json]

{
  "name": "Angular Login",
  "short_name": "Angular-Login",
  "description": "Angular 5 Login PWA",
  "icons": [{
    "src": "assets/angular-128.png",
    "sizes": "128x128",
    "type": "image/png"
  }, {
    "src": "assets/angular-152.png",
    "sizes": "152x152",
    "type": "image/png"
  }, {
    "src": "assets/angular-256.png",
    "sizes": "256x256",
    "type": "image/png"
  }, {
    "src": "assets/angular-512.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#871f78"
}

Para que se incluya en la compilación de producción deberás añadirlo al “angular-cli.json”.

[./angular-cli.json]

{
  ...
  "apps": [
    {
      ...
      "assets": [
        "assets",
        "favicon.ico",
        "manifest.json"
      ],
      ...
    }
  ],
  ...
}

Para finalizar este apartado debemos añadir también una referencia de este documento a nuestro index de la siguiente forma:

[src/index.html]


5º Añadir el “Service Worker”

El último paso para finalizar esta transformación consiste en añadir el “service worker”. Pero… ¿Qué es el “service worker”?
El “service worker” es un script que controla la página web o aplicación con el cual está asociado trabajando en segundo plano sin la necesidad que el usuario tenga la página web abierta.
Los “service workers” tienen gran número de utilidades como por ejemplo administrar de la caché de la página web y de los recursos para mantener el sitio sin conexión o la posibilidad de utilizar notificaciones push.
Para añadir este “service worker” en la aplicación de login tendrás que seguir este proceso:

  • Primero: instalar el paquete de “service worker” de Angular a el proyecto.
    npm install @angular/service-worker --save

– Segundo: una vez instalado, debes activar el “service worker” en tu “angular-cli.json”. La opción “serviceWorker” es un booleano que no tendrás aún, por ello, simplemente lo deberás añadir tal que así:

[angular-cli.json]

{ “apps”: [{“serviceWorker”: true”}]
  • Tercero: registra el “service worker” en tu “app.module”. Como puedes observar, solo estará disponible el “service worker” en producción.

[src/app/app.module.ts]

import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
@NgModule({
  ...
  imports: [
    ... ,
	ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
}
  • Finalmente, añade el archivo “ngsw-config.json” de esta forma:

[src/ngsw-config.json]

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

Conclusiones

Para comprobar todo lo que has hecho, deberás volver a realizar la auditoría. Si has realizado todo el proceso correctamente, habrá cambiado la puntuación como PWA como te muestro en la siguiente imagen.

angular-pwa2-justdigital

Resultado auditoría PWA.

Así pues, para probar el funcionamiento de la PWA puedes entrar en este enlace con un dispositivo móvil Android mediante el navegador Chrome y descargarlo como si fuera una app. Y, por si lo necesitas, aquí te dejo el enlace al repositorio.

Y aquí concluye esta guía sobre transformación de una app en Angular en PWA. Espero que te haya sido de utilidad y no olvides seguirnos a nuestros canales sociales o suscribirte al blog para estar actualizado de los artículos más recientes.

 

Barcelona
Passeig Gaiolà 13
+34 933 801 144
Lleida
Carrer Agustins 7
+34 973 988 222
Andorra
(Escaldes-Engordany)
Parc de la Mola 10, AD700
Bogota
Carrera 9A #99-07 Piso 9. Despacho 02
Torre la Equidad