¡TRANSOLUTIONS AHORA ES PARTE DE BAUFEST!
Ingresa a baufest.com para conocer más sobre nuestros servicios.

BLOG

Jueves, 26 Abril 2018 09:29

Tu aplicación Angular como una PWA!

roger cruz logoDesde hace un buen tiempo, Angular sigue siendo uno de los Frameworks multiplataforma más populares con amplio respaldo de una gran comunidad de desarrolladores quienes, día a día, vienen creando nuevas aplicaciones Web para diversos rubros. Sin embargo, muchas veces, el desarrollo se concentra hacia una aplicación estándar (Desktop) y no se explota todo el potencial de Angular para construir aplicaciones para dispositivos móviles que emulen a una nativa. Por ello Roger Cruz, Software Architect en Trans Solutions Systems, nos enseñará como hacer que una aplicación existente desarrollada en Angular cumpla con los criterios básicos de una aplicación Web progresiva.

Una aplicación Web progresiva (PWA) es una aplicación Web que comparte diseño y funcionalidad de las aplicaciones móviles y son consideradas como un nuevo estándar en el desarrollo web moderno.  La adopción de PWA’s es una tendencia que está tomando mayor fuerza debido a que combina las mejores herramientas de las tecnologías Web y Móviles a su vez que elimina las barreras que ambas conllevan.

Estos tres principios son planteados por Google para toda PWA:

  • Confiable

Sin importar las condiciones de conectividad a una red, la aplicación siempre responde.

  • Rápida

Altamente interactiva con rápida experiencia de usuario.

  • Atractiva

Provee una experiencia inmersiva al usuario sin que pierda interés en la aplicación.

En esta oportunidad, se revisarán los procedimientos básicos para que una aplicación existente desarrollada en Angular cumpla con los criterios básicos de una PWA utilizando Lighthouse como herramienta de evaluación desde Chrome.

Aplicación Existente

Para comenzar, previamente se cuenta con una aplicación propia sencilla que busca y lista películas usando la API de TheMovieDB.  Esta app será, poco a poco, modificada hasta cumplir con los criterios mínimos de una PWA.

La aplicación existente está publicada en este enlace http://tssnonpwa.azurewebsites.net y el código fuente puede obtenerse de aquí.

página web themoviedb

 

Evaluación Inicial

Usando Lighthouse, obtenemos un primer reporte de la aplicación con los siguientes resultados:

reporte lighthouse

Para la evaluación de PWA, nos muestra sólo 27% de pruebas exitosas:

progressive web app reporte

 

A continuación, se procederá a modificar la aplicación existente con el objetivo de cubrir el 100% de las pruebas de Ligthhouse, es decir, aquellas relacionadas a:

  • Uso de Service Worker
  • Factibilidad de operar en modo offline.
  • Fallback de JS.
  • Uso y redireccionamiento hacia HTTPS.
  • Uso de un manifiesto

 

Modificaciones

 

I. Cambios primarios.

  • Carga de contenido inicial.

Con el objetivo de mostrar un Spinner o una pantalla de Loading, se agrega el siguiente contenido dentro del nodo app-root en index.html.

carga de contenido inicial

 

Esta actividad tiene como propósito proveer al usuario una pantalla inicial transicional mientras la aplicación está cargando.

  • Fallback cuando JS no está habilitado.

Con el propósito de mostrar algún mensaje cuando JS no esté disponible, se agrega el siguiente bloque dentro del body de index.html.

Fallback cuando JS no está habilitado

 

Una PWA, debe ser capaz de detectar esta inhabilitación y proveer al usuario información al respecto.

  • Redireccionamiento a HTTPS.

Agregar una regla de redirección en el web.config en la primera posición con el propósito de siempre tener comunicación segura:

redireccionamiento a https

 

El uso y redireccionamiento de todas las peticiones hacia HTTPS es uno de los principales atributos de una PWA para garantizar una comunicación segura.               

Luego de recompilar y redesplegar estos cambios, se obtiene un nuevo reporte de Lighthouse:

reporte de lighthouse

reporte lighthouse

 

Como se observa, se ha mejorado la evaluación PWA hasta llegar a un 55% de pruebas exitosas.

Por otro lado, también se evidencia que se ha disminuido la satisfacción de Performance de un 75% a 62% respecto al reporte inicial.  Conforme se vayan avanzando con los cambios, analizaremos este dato final.

 

II. Archivo de Manifiesto

Según el último reporte, 3 de las evaluaciones fallidas están relacionadas con el manifiesto.

Un manifiesto es un archivo de texto en formato JSON que contiene información respecto a una aplicación y cuyo propósito es poder instalarla como un ícono en la pantalla principal de un dispositivo móvil dando un acceso rápido al usuario con cierta información mínima requerida:

  • Nombre.
  • Descripción.
  • Íconos para la aplicación.
  • Url Inicial.
  • Modo de visualización.
  • Color de Fondo preferido.
  • Color de Tema preferido.

Para mayor detalle, se puede consultar el siguiente enlace con información detallada de los manifiestos https://developer.mozilla.org/es/docs/Web/Manifest.

Para nuestro caso, se procederá a agregar el archivo src/manifest.json con el siguiente contenido:

archivo manifiesto

 

Una vez, creado el manifiesto, se procede con unos cambios adicionales para éste sea reconocido:

  • Incluir el archivo manifest.json como un asset en el archivo .angular-cli.json.

assets

 

manifest

 

  • Incluir una etiqueta meta en index.html con el mismo theme-color especificado en el manifiesto:

 

meta index

 

  • Agregar un link en index.html hacia el archivo de manifiesto.

 

manifest index

 

  • Modificar el web.config para soportar el intercambio de archivos JSON como contenido estático:

 

modificar webconfig

 

Después de haber realizado los cambios, se procede a generar un nuevo build para obtener un nuevo reporte de Lighthouse:

modificar webconfig

 

Se aprecia una mejora de 55% al 73% y, también, se ha mejorado notablemente la evaluación de Performance superando el 80%.  Para concluir con los cambios, sólo queda pendiente resolver las pruebas relacionadas al Service Worker.

 

III. Service Worker

El Service Worker es un script ejecutado en segundo plano respecto a la página Web y brinda varias características de apoyo como, por ejemplo:

  • No necesidad de interacción de usuario.
  • No necesidad de conexión a red.
  • Uso de notificaciones Push.
  • Sincronización en segundo plano.

Angular provee un paquete con implementación de Service Worker el cuál puede ser incluido en una aplicación existente a través de los siguientes pasos:

  • Agregar el paquete @angular/service-worker con el comando

yarn add @angular/service-worker

  • Habilitar el Service Worker para la app ejecutando:

ng set apps.0.serviceWorker=true

  • Importar y registar el módulo de Service Worker en app.module.ts.

importar y registrar módulo service worker

 

imports

 

  • El Service Worker requiere de un archivo de configuración con el nombre ngsw-config.json el cuál debe contener la siguiente información:
    • Índice
    • Posesiones
      • Archivos estáticos, dinámicos y recursos adicionales.
      • Modo de instalación
      • Modo de actualización.

En la dirección https://angular.io/guide/service-worker-config se puede encontrar la referencia completa respecto a la configuración para el Service Worker de Angular.

En nuestro caso, se usará la siguiente configuración estándar que sugiere Angular.

configuración estándar que sugiere Angular

 

configuración estándar que sugiere Angular

 

Finalmente, luego de recompilar y redesplegar la aplicación, se obtiene un último reporte:

reporte lighthouse

reporte lighthouse

 

Según lo observado, se completaron todas las pruebas de PWA al 100%.  Así mismo, todas las categorías de pruebas están aprobadas donde la prueba Performance final llega a un 78% de satisfacción.

La versión de la aplicación que contiene todos los cambios descritos está publicada en http://tsspwa.azurewebsites.net y el código se puede obtener de aquí.

página web themoviedb

 

IV. Verificación en móvil

Como última prueba, verificamos el funcionamiento de nuestra app en un dispositivo móvil.

buscando películas en la app

 

Adicionalmente, se verifica que la propia aplicación solicitó y permitió agregar un ícono hacia sí misma en la pantalla de aplicaciones del propio dispositivo usando uno de los íconos especificados en el manifiesto:

buscando peliculas en la app

 

Conclusión

  • Después de haber desarrollado los pasos necesarios y obteniendo los resultados de Lighthouse secuencialmente, se ha podido verificar que es posible modificar una aplicación Web estándar (Desktop) para que ésta sea progresiva, emule ser nativa y sea instalable en un dispositivo móvil.

  • Se evidencia que además de las pruebas propias de una PWA, la evaluación de Performance de nuestra aplicación también mejoró según los reportes de Lighthouse.

  • Los cambios previamente descritos son los mínimos requeridos para luego poder explotar recursos avanzados que proveen los navegadores en dispositivos móviles con el propósito de enriquecer la experiencia de usuario.

 

Bibliografía

Google Developers – PWA

2018 – https://developers.google.com/web/progressive-web-apps/

Mozilla Developer Network – Web App Manifest

2018 – https://developer.mozilla.org/en-US/docs/Web/Manifest

Angular – Service Worker

2018 – https://angular.io/guide/service-worker-intro

Angular Firebase – Installable PWA

2018 - https://angularfirebase.com/lessons/installable-angular-progressive-web-app/

Creating PWA’s with Angular

 2018 – https://moduscreate.com/blog/creating-progressive-web-apps-using-angular/

Build PWA’s

2018 – https://scotch.io/tutorials/how-to-build-progressive-web-apps-with-angular

CodePen

2018 – https://codepen.io