UNIVERSIDAD MAYOR DE SAN SIMON

FACULTAD DE CIENCIAS Y TECNOLOGIA

DIRECCIÓN DE POSGRADO

“COMO CONVERTIR UNA APLICACIÓN

ANGULAR A UNA APLICACIÓN WEB
PROGRESIVA”

TRABAJO FINAL PRESENTADO PARA OBTENER EL CERTIFICADO

DE DIPLOMADO EXPERTO EN DESARROLLO DE APLICACIONES
EMPRESARIALES VERSIÓN II

POSTULANTE : SERGIO DANNY FLORES MONTERO

TUTOR : ING. EDSON ARIEL TERCEROS TORRICO

Cochabamba – Bolivia
2019
2
 Agradecimientos
A mis padres y hermano por todo el apoyo
incondicional y brindarme su colaboración en todo
momento, estos me permitieron llegar hasta donde
estoy ahora.
Porque los hijos somos el reflejo de todo el amor,
dedicación y empeño que nos dan los padres.
A mi tutor y a Digital Harbor por brindarme los
conocimientos, colaboración y concederme esta
oportunidad de superación.
A mis amigos quienes siempre han estado a lado mío
durante este diplomado.
¡Muchas gracias!

3
 Índice de contenidos

1 Generalidades ................................................................................................................ 10

1.1 Antecedentes generales .......................................................................................... 10

1.2 Antecedentes específicos ....................................................................................... 10
2 Metodología .................................................................................................................. 11

3 Tendencia Primero Móvil (Mobile-first)....................................................................... 11

3.1 Sistemas operativos................................................................................................ 11

3.2 Navegadores........................................................................................................... 12
3.3 Tecnología de escritorio vs tecnología móvil ........................................................ 13
3.4 Otros datos relevantes ............................................................................................ 14
4 Aplicación web progresiva ............................................................................................ 19

4.1 Definición .............................................................................................................. 19

4.2 Fundamentos de una aplicación web progresiva ................................................... 19
4.3 Ejemplos de aplicaciones web progresivas en el mundo real ................................ 20
4.4 Ventajas de una aplicación web progresiva ........................................................... 21
4.4.1 Disponibilidad independiente de la conexión................................................. 21
4.4.2 Tiempos de carga rápidos ............................................................................... 21
4.4.3 Notificaciones Push ........................................................................................ 21
4.4.4 Acceso directo a la pantalla de inicio ............................................................. 21
4.4.5 Interfaz nativa. ................................................................................................ 22
4.5 Tecnologías que aprovechan las aplicaciones web progresivas ............................ 22
4.5.1 Primero Móvil ................................................................................................ 22
4.5.2 Service Worker ............................................................................................... 23
5 Aplicación web progresiva con angular ........................................................................ 24

5.1 Definición .............................................................................................................. 24

5.2 Por qué usar Angular ............................................................................................. 25
5.3 Fundamentos .......................................................................................................... 25
5.3.1 Arquitectura .................................................................................................... 25
5.3.2 Módulos .......................................................................................................... 26
5.3.3 Componentes .................................................................................................. 26
4
 5.3.4 Plantillas, directivas y enlace de datos ........................................................... 27
5.3.5 Servicios e inyección de dependencia ............................................................ 27
5.3.6 Enrutamiento .................................................................................................. 28
5.4 Comportamiento del Service Worker. ................................................................... 28
5.4.1 Requisitos previos .......................................................................................... 29
6 Aplicación del caso de estudio creación de una aplicación web progresiva con angular
29

6.1 Instalando Node y NPM ........................................................................................ 29

6.2 Instalando Chrome. ................................................................................................ 31
6.3 Instalando Angular CLI ......................................................................................... 32
6.4 Creando y ejecutando la aplicación angular .......................................................... 32
6.5 Añadiendo Bootstrap ............................................................................................. 35
6.6 Desplegando la aplicación web progresiva ............................................................ 42
7 Conclusiones ................................................................................................................. 45

5
 Índice de figuras

Figura 1. Datos Estadísticos de Sistemas Operativos Actuales ............................................ 12

Figura 2. Datos Estadísticos de Navegadores Web Destacados ........................................... 13
Figura 3. Datos Estadisticos de Tecnologias Moviles vs Escritorio..................................... 14
Figura 4. Penetración de internet mayor al 50% .................................................................. 15
Figura 5. Venta de Smartphone disminuye en -4% y el Sistema Operativo líder es Android
Seguido por IOS ................................................................................................................... 16
Figura 6. Usuarios Conectados a Internet por Regiones ...................................................... 17
Figura 7. Paises especificos Destacados con Conexion a Internet ....................................... 18
Figura 8. Relacion entre Navegador, Service Worker y La Web Internet............................ 23
Figura 9. Navegador con el Service Worker Almacenando Datos en la Cache sin conexion a
Internet .................................................................................................................................. 24
Figura 10. Página Oficial para Instalación de NodeJS ......................................................... 30
Figura 11. Página de Descarga Oficial de Google Chrome .................................................. 31
Figura 12. Instalación de Nuevo Proyecto Angular ............................................................. 33
Figura 13. Estructura de Archivos de Aplicacion Angular .................................................. 34
Figura 14. Pantalla de Verificación de Creación de Nuevo Proyecto Angular .................... 35
Figura 15. Pagina Principal de La librería Animate CSS ..................................................... 36
Figura 16. Estructura de los Componentes, Servicios y Rutas del Proyecto ........................ 37
Figura 17.Creacion de Archivos al Agregar el Paquete de @angular/pwa .......................... 38
Figura 18. Comparación de los archivos creados para la Aplicación web progresiva. ........ 39
Figura 19. Comparación de la configuración el archivo angular.json .................................. 39
Figura 20. Configuración del archivo ngsw-config.json ...................................................... 40
Figura 21. Comparación después de Añadir el Service Worker a el archivo app.module.ts 41
Figura 22. Realizando el comando BUILD para que podamos Realizar los Archivos de
producción del Proyecto ....................................................................................................... 41
Figura 23. Estructura de la Carpeta lista para llevar a Producción....................................... 42
Figura 24. Inicializando el Servidor ligero de Node "http-server" ....................................... 43

6
Figura 25. Ventana del navegador mostrando que el Service Worker está Instalado
Correctamente....................................................................................................................... 43
Figura 26. Pantalla del Navegador Mostrando la Pestaña del Archivo Manifest. ................ 44
Figura 27. Verificando que la Aplicación Web Progresiva Funciona Correctamente. ........ 44

7
 Resumen

La presente monografía está centrado en mejorar la experiencia de usuario utilizando páginas

web en dispositivos móviles o aplicaciones de escritorio.

Analizando desde una perspectiva de experiencia de usuario, y tomando en cuenta que los
dispositivos móviles son actualmente de uso universal, junto con la necesidad de evolución
de las aplicaciones web, se planteó como objetivo construir una aplicación web progresiva,
añadiendo una serie de características nuevas a una aplicación web ya existente desarrollada
en angular, para que esta se comporte como una aplicación web nativa.

Para realizar lo anteriormente nombrado, se debe identificar conceptos, características y

principios de una aplicación web progresiva, para seguidamente realizar un análisis de
experiencia basadas de una aplicación web angular normal a una con la tecnología de las
aplicaciones web progresivas.

Como herramientas de desarrollo primordial se empleó el uso de Angular CLI, librerías CSS,
JavaScript en el Service Worker y algunas configuraciones que una aplicación web
progresiva debe cumplir.

8
Introducción

Actualmente muchas empresas utilizan una aplicaciones web con presencia Online y una
gran mayoría de los visitantes utilizan su dispositivo móvil para acceder a sitios Web,
lamentablemente una página web tradicional carece de algunas características que podrían
hacerla más atractivas para que los usuarios regresen.

Por otro lado para introducirnos al área de los dispositivos móviles es decir una aplicación
nativa en nuestra empresa, requiere un costo extra en producción para cada Sistema
Operativo, las aplicaciones suelen ser más pesadas, se debe descargar de las tiendas de
aplicaciones además existen procesos y permisos de instalación, etc.

Es por eso que se pone como propuesta, la realización de una Aplicación Web progresiva
con Angular CLI la cual soportara las mejoras en la cache con el Service Worker para poder
permitir un funcionamiento offline, poder visualizar desde el dispositivo móvil aplicando
características responsivas con frameworks especializados es esa área.

Por tanto el resultado de la presente monografía estará enfocado en convertir una aplicación
web Angular normal a una aplicación web progresiva básica; la cual demostrara el
funcionamiento, características nuevas, ventajas y desventajas de las Aplicaciones web
progresivas, también se podrá observar la diferencia en cuanto la experiencia al usarla.

Al mismo tiempo esta monografía ayudara a la comprensión de conceptos, características,

pasos a seguir, aplicaciones, estadísticas y restricciones que deben tomar en cuenta las
personas interesadas en implementar una aplicación web progresiva.

9
1 Generalidades

1.1 Antecedentes generales

Una página web es un documento digital de carácter multimediático, es decir que es capaz
de incluir audio, video y sus combinaciones, la cual puede ser accedida por un navegador
web y una conexión activa a internet, existen millones de páginas web en el mundo, a través
del navegador se puede acceder a toda su funcionalidad, actualmente se pudo observar que
la tecnología va cambiando muchos usuarios visitan las páginas web desde sus dispositivos
móviles, lo cual obligo a la web a solucionar y mejorar la web, implementando material
responsivo, rapidez, botones intuitivos y otras opciones relevantes en un dispositivo móvil.

1.2 Antecedentes específicos

Actualmente en la web nos encontramos en una etapa de cambio constante donde los usuarios
buscan la comodidad, rapidez, portabilidad, etc. Al observar el masivo uso de los dispositivos
móviles tanto en visitas a sitios web como al adquirir aplicaciones nativas. La web se vio
obligado a evolucionar y así buscar satisfacer a los clientes con una mejor experiencia de uso,
para ello se innovo con la creación de la tecnología de las aplicaciones web progresivas.

Las aplicaciones web progresivas no son una tecnología nueva pero ultimadamente están más
de moda después que Microsoft anunciara que Windows las soportara de forma nativa.
También están disponibles en Google Chrome, Firefox y Safari para dispositivos móviles.

Estas no dependen de ningún sistema operativo, sino que toman lugar en una página web en
un navegador, las páginas de Twitter, Facebook e Instagram son buenos ejemplos de
aplicaciones web progresivas que están funcionando actualmente.

Para la creación de páginas web existe un framework llamado Angular, que tiene sus propios
mecanismos de configuración, tanto para crear una web normal, como una aplicación web
progresiva que intentara mejorar progresivamente la experiencia de usuario.

10
2 Metodología

Para el presente trabajo se utilizara los siguientes métodos de investigación:

Método bibliográfico, debido a que se realizara la lectura y compilación de libros, páginas

web oficiales relacionadas al tema de estudio.

Método analítico, debido a que se procederá a revisar y analizar ordenadamente los

documentos relacionadas al tema de estudio para la redacción del presente trabajo.

Método empírico o de campo, debido a que se utilizara un ejemplo de aplicación observada

en el caso de estudio como convertir una aplicación angular a una aplicación web progresiva.

3 Tendencia Primero Móvil (Mobile-first)

La tendencia a la filosofía primero móvil está basado en estadísticas que muestran que el uso
de tecnología móvil que corresponde a 51.1 % frente al 48.99 % a la de escritorio, la
utilización en América Latina de los sistemas operativos móviles alcanza al 35% con
tendencia a seguir creciendo, actualmente más de la mitad de las personas en el mundo ya
están conectadas a internet y por ultimo pero no menos importante la innovación en
tecnología móvil se ha estancado provocando que la tendencia de ventas de dispositivos
móviles disminuya en un -4% debiendo así buscar innovación en el área.

3.1 Sistemas operativos

Tomando datos de latino américa que es la zona donde habitamos, según (GlobalStats, 2019,
pp. /os-market-share/all/south-america).
Enfocándonos en los 3 primeros puestos tenemos en:

 1ro -Windows con 58.33 %.

 2do - Android con 27.04 %
 3ro – OS X con 8.32 %

11
Lo cual nos muestra como el sistema Operativo móvil Android, va manteniendo e
incrementando y esa tendencia en que todo se está convirtiendo en móvil, recalcando que aún
no se sobre paso a lo que es los equipos de escritorio.

Figura 1. Datos Estadísticos de Sistemas Operativos Actuales

Fuente: (GlobalStats, 2019)

3.2 Navegadores

Tomando datos de latino américa desde enero 2019 según (GlobalStats, 2019, pp. /browser-
market-share#monthly-201901-201905)
Enfocándonos en los 3 primeros puestos tenemos en:

 1ro - Chrome con 62.7 %.

 2do – Safari Mobile con 15.89 %
 3ro - Firefox con 5.07 %

12
Con estos datos podemos observar que los navegadores también están evolucionando a la
tecnología móvil en los buscadores esto nos ayudara a poder ver las tendencias que debemos
seguir en el futuro.

Figura 2. Datos Estadísticos de Navegadores Web Destacados

Fuente: (GlobalStats, 2019)

3.3 Tecnología de escritorio vs tecnología móvil

Tomando datos de todo el planeta del ultimo año 2018 – 2019 según (GlobalStats, 2019, pp.
platform-market-share/desktop-mobile/worldwide/#monthly-201801-201903)

 1ro - Mobile con 51.1 %.

 2do – Desktop con 48.99 %

En este grafico podemos observar un comportamiento en el que el consumo móvil y el

consumo de escritorio están en una competencia bastante reñida, pero considerando que ya
meses atrás se encontraban estabilizados, podríamos destacar que el tráfico móvil y de
escritorio actualmente está cambiante.

13
 Figura 3. Datos Estadísticos de Tecnologías Móviles vs Escritorio
Fuente: (GlobalStats, 2019)

3.4 Otros datos relevantes

Los siguientes datos serán obtenidos de Bond Capital que es fondo de inversiones que realiza
informes anuales sobre las tendencias de internet, cabe recalcar que la autora de estos estudios
es Mary Meeker.

Según (Makeer, 2019) las tendencias de internet son:

 Por primera vez en la historia internet tiene una penetración mayor a 50%, esto quiere
decir que más de la mitad de personas del planeta están conectadas a internet.

14
 Figura 4. Penetración de internet mayor al 50%
Fuente: (Makeer, 2019)

 La venta de Smartphone está disminuyendo en un - 4% el último año, lo que quiere

decir que los teléfonos inteligentes no están innovando mejorando la experiencia de
usuario (UX), pero otro dato que podemos rescatar es que Android domina el mercado
de dispositivos móviles, seguido por IOS.

15
Figura 5. Venta de Smartphone disminuye en -4% y el Sistema Operativo líder es Android
Seguido por IOS
Fuente: (Makeer, 2019)

 Usuarios conectados a internet por regiones, lo interesante de este cuadro es que

podemos saber dónde tendríamos un nicho de mercado con posibilidades de éxito o
fracaso.

16
Figura 6. Usuarios Conectados a Internet por Regiones
Fuente: (Makeer, 2019)

17
 Este grafico es más específico donde nos muestra el top de países más conectados a
internet y los no conectados, donde podemos observar que china lidera y obtuvo un
resultado muy lejano a los demás.

Figura 7. Paises Específicos Destacados con Conexión a Internet

Fuente: (Makeer, 2019)

18
4 Aplicación web progresiva

Para la construcción de una aplicación web progresiva enfocada a la aplicación móvil es

necesario el estudio de conceptos, fundamentos y tecnologías que se utilizan en una
aplicación web progresiva, además de ver las ventajas y aplicaciones del mundo real.

4.1 Definición

Las aplicaciones web progresivas son aquellas aplicaciones web que son rápidas, atractivas,
no solo es un framework, herramienta o palabra de moda elegante, sino que es una mentalidad
de mejora constante al aprovechar las API modernas de los navegadores, lo que genera
satisfacción para cada usuario. (Hajian, 2019, p. 1)

4.2 Fundamentos de una aplicación web progresiva

Según (Hajian, 2019, pp. 1-2) sin importar con que framework se elija trabajar, ni con que el
lenguaje que se elija, las aplicaciones web progresivas deben tener características especiales:

 Carga instantánea: La aplicación debe cargarse rápidamente e interactiva.

 Conectividad independiente: Ya sea sin red o con una conexión lenta e inestable la
aplicación debe continuar funcionando.

 Diseño responsivo: Con pensamiento Mobile-first se centra en optimización para

dispositivos móviles.

 Seguro: La seguridad es una de las prioridades más altas, es por eso que cada PWA
debe alojarse en un servidor HTTPS.

19
  Progresivo: Independientemente del navegador o dispositivos nuestra aplicación
podrá evolucionar y adoptar nuevas características y así brindar mejor experiencia de
usuario.

Según (Love, 2018, p. 21) para la creación inicial de las aplicaciones web progresivas se
necesitó 3 principales características básicas que son:

 Nuevas características en los navegadores desde el punto de vista de los servicios

como el Service Worker.
 Las manifestaciones web.
 La necesidad de las HTTPS para habilitar las API modernas.

4.3 Ejemplos de aplicaciones web progresivas en el mundo real

(Love, 2018, pp. 23-24) Nos muestra algunos datos sobre una de las primeras empresas que
apoyaron y creyeron en las aplicaciones web progresivas, estos datos con el objetivo de poder
validar su apoyo a esta tecnología.

Una de las primeras empresas que invirtió en las aplicaciones web progresivas es “Flipkart”,
se dedica al comercio electrónico con sede en Bengaluru – India. Quienes construyeron su
aplicación web progresiva y obtuvieron los siguientes resultados:

 Tiempo en el sitio con Flipkart 3,5 minutos vs móvil PWA 70 segundos.

 Los usuarios se quedaban 3 veces más tiempo.
 Tasa de reincorporación mayor al 40%
 70% de los usuarios agregaron a la pantalla de inicio.
 El uso de datos fue 3 veces menor.

20
4.4 Ventajas de una aplicación web progresiva

En el libro de (O'Reilly Media, 2017, pp. 14-17) nombra las siguientes ventajas:

4.4.1 Disponibilidad independiente de la conexión

Las aplicaciones web progresivas no dependen de la conexión del usuario como lo son los
sitios web tradicionales, pueden proporcionar una experiencia de usuario con todas las
funciones aunque estén fuera de línea, en línea o sufren de conexión no confiable.

4.4.2 Tiempos de carga rápidos

Usando Service Worker podemos crear sitios que se inicien en un instante, ya sea que el
usuario tenga una conexión muy rápida, una conexión 2G no confiable o incluso ninguna
conexión, los sitios pueden cargarse en milisegundos incluso más rápido que las aplicaciones
nativas.

4.4.3 Notificaciones Push

Las aplicaciones web progresivas pueden enviar notificaciones a sus usuarios incluso después
de abandonar el sitio, estas notificaciones ofrecen una gran oportunidad para volver a
participar con los usuarios, las notificaciones tienen una sensación completamente nativa y
son indistinguibles de las notificaciones de aplicaciones nativas.

4.4.4 Acceso directo a la pantalla de inicio

Una vez que el usuario ha mostrado interés en su aplicación web progresiva, el navegador le
sugerirá automáticamente que agregue un acceso directo a su pantalla de inicio, esta tampoco
se debe distinguir de ninguna aplicación nativa.

21
4.4.5 Interfaz nativa.

Las aplicaciones web progresivas lanzadas desde la pantalla de inicio pueden tener un aspecto
totalmente nativo. Pueden tener una pantalla de bienvenida mientras carga, se puede iniciar
en modo pantalla completa, sin el navegador e incluso pueden bloquearse en una orientación
de pantalla específica.

4.5 Tecnologías que aprovechan las aplicaciones web progresivas

Tomarse unos minutos para entender cómo funcionan las tecnologías es vital y también para
así comprender su potencial.

4.5.1 Primero Móvil

Según (Magno, 2013, pp. 29-30) la próxima versión de Twitter Bootstrap framework es
Mobile First es una solución elegante para el desarrollo FrontEnd, este hito no es solo técnico
sino estratégico, sigue el paradigma actual de diseño para la web, es considerado el diseño
del futuro.

Los navegadores móviles están implementando el soporte a los nuevos HTML5 y CSS3 ya
que vivimos en un momento donde el uso del móvil está aumentando considerablemente.

Hay muchas formas de utilizar Bootstrap, puede personalizar y ampliar componentes desde
la edición del código fuente, creando así un nuevo diseño para los navegadores porque no
necesita definir elementos básicos de la interfaz desde cero, como botones, fuentes, insignias
para cubrir los elementos de interfaz más comunes.

22
4.5.2 Service Worker

Los Service Worker introducen una capa, y mediante un script pueden registrarse para
controlar una o más páginas de su sitio. Una vez instalado esta se aloja en cualquier ventana
o pestaña del navegador, desde este lugar una Service Worker puede escuchar y actuar en los
eventos de todas las páginas que están bajo su control en segundo plano. (O'Reilly Media,
2017).

Figura 8. Relación entre Navegador, Service Worker y La Web Internet

Fuente: (O'Reilly Media, 2017)

Esto significa que hay una capa entre la página y la web que recibe las respuestas del servidor
web y es así que toda la información necesaria puede ser almacenada en un cache del
dispositivo.

23
Figura 9. Navegador con el Service Worker Almacenando Datos en la Cache sin conexion
a Internet
Fuente: (O'Reilly Media, 2017)

Observando esta lógica significa que incluso si el usuario cerró las pestañas que ejecutan su
aplicación en su navegador, todavía hay una capa que se comunica con su servidor. Es así
que podemos observar que el Service Worker es el corazón de una aplicación web progresiva.

5 Aplicación web progresiva con angular

Una aplicación web Angular es un framework de FrontEnd excepcional, capaz y completo

en el que confían muchas empresas para crear y distribuir aplicaciones web, en esta sección
observaremos por que el uso de Angular, sus fundamentos, su arquitectura y algunos
requerimientos necesarios.

5.1 Definición

Las aplicaciones Angular de una sola página se encuentran en una posición privilegiada para
beneficiarse de los Service Worker. Angular a partir de su versión 5.0.0 se envió con una
implementación del Service Worker, que está diseñado para optimizar la experiencia de
usuario.

24
5.2 Por qué usar Angular

Según (Arizmendi, 2018, pp. 21-22)

 Angular Open-Source Project: Angular es Open-Source es decir podemos conocer

su código Fuente e inclusive contribuir a su mejora.

 Arquitectura SOA y SPA: Es ideal para crear aplicaciones empresariales orientadas

a servicios y las aplicaciones conocidas como de una sola página.

 Demanda laboral: La demanda laboral ha crecido exponencialmente en los últimos

años, esto también implica que el framework estará en constante evolución.

 Reusable, fácil de mantener y Modular (MVC): Estos tres aspectos permite a los
desarrolladores ser más productivos, podemos crear nuestros propios componentes
reutilizables esto nos permite ser más rápidos en un mundo donde las metodologías
agiles predominan.

 Integración con otros framework: Angular se puede integrar con otros framework,
librerías, bibliotecas, plugings.

5.3 Fundamentos

5.3.1 Arquitectura

Angular de acuerdo a sus autores (Google, angular.io, 2019, p. /guide/architecture) adopta el

patrón de diseño MVW (Modelo-Vista- Waterver), lo más importante es que separa
claramente las capas de Modelo-Vista-Controlador, además de sus servicios, directivas y
filtros.

25
El patrón de diseño MVC es uno de los más populares en la industria de desarrollo de
aplicaciones empresariales, el concepto de las tres es el siguiente:

 Modelo, se refiere a la capa de datos.

 Vista, es responsable de la presentación de datos.
 Controlador, sirve como mediador entre el modelo y la vista, este contiene toda la
lógica de la aplicación.

La separación de capas nos permite modular nuestras aplicaciones lo cual hace al código más
flexible, más fácil de mantener y manejar.

5.3.2 Módulos

Una aplicación angular normalmente contiene muchos módulos funcionales, cada aplicación
angular tiene un módulo raíz llamada appModule, es una característica de angular que cuenta
con su propio sistema modular el cual declara un contexto de compilación para un conjunto
de capacidades estrechamente relacionadas.

Los NgModules pueden importar funcionalidades a otros módulos y a la vez permitir que los
otros módulos sean exportados, esta forma de trabajar con módulos ayuda a gestionar el
desarrollo de aplicaciones complejas además que permite cargar solo los módulos que se
utilizaran lo cual minimiza en el tiempo de ejecución. (Google, angular.io, 2019).

5.3.3 Componentes

Cada aplicación angular consta con al menos un componente que conecta una jerarquía de
componentes con el DOM de la web. Cada componente define una clase que contiene datos
y lógica de la aplicación, estos se asocian con una plantilla HTML, también un decorador
identifica la clase inmediatamente debajo de ella como un componente y proporciona la
plantilla y los metadatos específicos “@component”

26
Cabe recalcar que los componentes cuentan con decoradores representados por una arroba
que son funciones que modifican las clases de JavaScript de este modo angular define una
cantidad de decoradores que adjuntan tipos específicos de metadatos. (Google, angular.io,
2019).

5.3.4 Plantillas, directivas y enlace de datos

Una plantilla es HTML este combinado con angular es modificado por las directivas que
proporcionan lógica al programa y van de la mano con el enlace de datos.

Existen 2 tipos de enlace de datos:

 Enlace de eventos, permite que su aplicación responda a las entradas de usuario en el

entorno de destino y así se actualiza la aplicación.
 Enlace de propiedad, permite interpolar los valores que se calculan a partir de los
datos de la aplicación en el HTML.

Según la lógica de angular antes que se muestre la vista se evalúa las directivas y resuelve la
sintaxis de la plantilla junto con los datos de la aplicación. (Google, angular.io, 2019)

5.3.5 Servicios e inyección de dependencia

Un servicio permite inyectar a otros proveedores como dependencias en su clase, los

servicios sirven para los datos o la lógica que no está asociados con una vista y que desean
compartir entre componentes, los servicios están encargados de recuperar datos del servidor
y validar entradas del usuario.

La inyección de dependencia le permite mantener sus clases de componentes limpias y

eficientes. (Google, angular.io, 2019)

27
5.3.6 Enrutamiento

Enrutamiento es la forma de dividir la aplicación en distintas áreas generalmente basadas en

reglas que se derivan de la URL, este enrutamiento también mantiene el estado de la
aplicación y protege áreas de la aplicación en función a ciertas reglas.

Angular es posible configurar las rutas por mapeo a los componentes, hay 3 componentes
principales que se utiliza para configurar el enrutamiento. (Google, angular.io, 2019).

 Routes, describe las rutas compatibles con la aplicación.

 RouterOutlet, es un componente que marca la posición para así ubicar el contenido

de cada ruta.
 RouterLink, esta indica que se usa un link para enlazar las rutas.

5.4 Comportamiento del Service Worker.

 La aplicación se almacena en el cache así es como todos sus servicios se actualizan

juntos.
 Cuando los usuarios actualizan su aplicación podrán observar la última versión
completa en el cache.
 Las actualizaciones suceden en segundo plano y solo se descargan si han cambiado
es por eso que siempre están actualizadas.
 Conserva el ancho de banda si es posible.

Estas opciones están detalladas en el manifiesto, este archivo manifest se genera a partir de
un archivo de configuración generado por el CLI llamado ngsw-config.json. (Google,
angular.io, 2019).

28
5.4.1 Requisitos previos

Su aplicación debe ejecutarse en un navegador web que soporte los Service Worker,
actualmente estos son compatibles con las últimas versiones de Chrome, Firefox, Edge,
Safari, Opera y Samsung internet.

Además se reitera que para que los Service Worker se registren correctamente deben acceder
a la aplicación a través del protocolo HTTPS y no HTTP, la única excepción a esta regla es
cuando la aplicación acceda al local host esto para facilitar el desarrollo local.

6 Aplicación del caso de estudio creación de una aplicación web progresiva

con angular

Para la ejecución del caso de estudio el cual es convertir una aplicación web a una aplicación
web progresiva con Angular es necesario utilizar Angular CLI y sus requerimientos, librerías
CSS o Bootstrap para la parte visual, junto con su Service Worker en la configuración del
navegador, aunque no es la única opción para crearla es bastante mantenible, tener en cuenta
la estructura y modificaciones realizadas en los archivos del proyecto y finalmente como
debemos ejecutar una aplicación web progresiva.

6.1 Instalando Node y NPM

Debemos asegurarnos de tener Node y NPM instalados en nuestra máquina, simplemente

ejecutando los siguientes comandos para verificar su versión y verificar que estén instalados.

$ node –v
$ npm –v

Caso contrario puede visitar el sitio web de node en: https://nodejs.org y descargar la última
versión basada en su Sistema Operativo.

29
Figura 10. Página Oficial para Instalación de NodeJS
Fuente: (Foundation, n.d.)

30
6.2 Instalando Chrome.

Aunque para crear una aplicación web progresiva que funcionara independientemente de los
navegadores, nos limitaremos a usar Chrome y sus herramientas de desarrollo y depurar el
Service Worker así como otras características de una aplicación web progresiva como el Web
App Manifest y nuestro Service Worker.

Si desea descargar Chrome puede visitar: https://www.google.com/chrome

Figura 11. Página de Descarga Oficial de Google Chrome

Fuente: (Google, Google, n.d.)

31
6.3 Instalando Angular CLI

El CLI es la interfaz de línea de comandos y angular tiene su propio CLI especializado para
recibir órdenes y así crear nuestro proyecto, primeramente debemos instalar el CLI de angular
globalmente ejecutando los siguientes comandos en la consola.

$ npm install –g @angular/cli

Una vez instalado ya podemos generar una nueva aplicación angular.

6.4 Creando y ejecutando la aplicación angular

En esta parte del proyecto creamos un nuevo proyecto Angular normal llamado países, con
el siguiente comando:

$ ng new paises

Una vez ejecutado este comando se creara automáticamente la aplicación gracias al Angular
CLI como observamos en la siguiente imagen.

32
Figura 12. Instalación de Nuevo Proyecto Angular
Fuente: Elaboración Propia

33
Una vez creado el proyecto deberá crear un conjunto de carpetas con las siguientes características:

Figura 13. Estructura de Archivos de Aplicación Angular

Fuente: (Elaboración Propia)

Una vez creado el proyecto pasamos a ejecutarlo para verificar si se realiza correctamente con el
siguiente comando:
$ ng serve –o

Y automáticamente se abrirá el localhost en el puerto 4200

34
 Figura 14. Pantalla de Verificación de Creación de Nuevo Proyecto Angular

Fuente: (Elaboración Propia)

6.5 Añadiendo Bootstrap

Para añadir la librería de Bootstrap a nuestra aplicación angular teniendo en cuenta siempre la
tendencia Mobile-first, deberemos agregar el estilo CSS a nuestro proyecto de la siguiente dirección:
https://getbootstrap.com/docs/4.3/getting-started/introduction/
Esto en index.html

35
Luego agregamos la librería anímate.css, en la carpeta assets donde se colocan los archivos estáticos
creamos una carpeta llamada “css” y ahí dentro un archivo anímate.css y copiamos el contenido
descargado y finalmente lo importamos en el index.css al igual que Bootstrap.

Figura 15. Página Principal de La librería Anímate CSS

Fuente: (https://daneden.github.io/animate.css/)

Luego se integrara la lógica del sistema, que son los componentes, servicios, configuración
de rutas.

$../paises>ng g c pages/pais
$../paises>ng g c pages/paises

36
 $../paises>ng g s services/paises
$../paises>ng g m AppRouting – flat - crea el modulo en la carpeta app

Figura 16. Estructura de los Componentes, Servicios y Rutas del Proyecto

Fuente: (Elaboración Propia)

Una vez ya realizada la logica del negocio en el sistema y tener una aplicación web angular
normal se realizara la conversion a una aplicación web progresiva.

Para añadir las funcionalidades de una aplicación web progresiva de una forma rapida se
debe instalar el paquete oficial con el CLI de angular, este paquete automatiza varias
caracteristicas de las aplicaciones web progresivas.

Se debe ejecutar la siguiente instrucción en la consola

$../ng add @angular/pwa

37
Esta realizara la instalación descargando paquetes de npm, configuraciones, creara y
actualizara algunos archivos.

El archivo más importante que creara es el “ngsw-config.json” que es el archivo de

configuración del Service Worker

Figura 17. Creacion de Archivos al Agregar el Paquete de @angular/pwa

Fuente: (Elaboración propia)

38
 Figura 18. Comparación de los archivos creados para la Aplicación web
progresiva.

Fuente: (Elaboración Propia)

Figura 19. Comparación de la configuración el archivo angular.json

Fuente: (Elaboración Propia)

39
En el archivo “ngsw-config.json” podemos configurar comportamientos relacionados con el
almacenamiento en cache de los recursos particulares de la aplicación.

Figura 20. Configuración del archivo ngsw-config.json

Fuente: (Elaboración Propia)

40
En el archivo “app.module.ts” se añadió el “ServiceWorkerModule” lo que nos permite
inyectar y registrar el Service Worker en el navegador.

Figura 21. Comparación después de Añadir el Service Worker a el archivo app.module.ts

Fuente: (Elaboración Propia)

En este punto se tiende a pensar que ya las funcionalidades de la aplicación web progresiva
están funcionando cosa que no es cierto, lo que debemos hacer es realizar el Build de
producción, porque ahí se habilitaran las configuraciones del ng-serviceWorker.

$../ng Build - -prod

Figura 22. Realizando el comando BUILD para que podamos Realizar los Archivos de
producción del Proyecto

Fuente: (Elaboración Propia)

41
Y automáticamente creara una carpeta en la raíz llamada “dist” que tendrá información
adicional realizado por la configuración del CLI de angular esta ya estará lista para subir aun
hosting o la despleguemos localmente.

Figura 23. Estructura de la Carpeta lista para llevar a Producción.

Fuente: (Elaboración Propia)

6.6 Desplegando la aplicación web progresiva

En esta parte necesitaremos instalar un servidor local para poder ejecutar la aplicación
web progresiva, por practicidad instalaremos un servidor ligero de node llamado
“http-server” el cual permite desplegar aplicaciones rápidamente simula un simple
hosting montado en nuestra máquina.

$ npm install http-server –g

Y para utilizarlo debemos ubicarnos en la carpeta principal de los archivos de

producción, en la consola debemos ejecutar la siguiente instrucción.

42
 $ http-server

Figura 24. Inicializando el Servidor ligero de Node "http-server"

Fuente: (Elaboración Propia)

Esto automáticamente levantara el servidor con la aplicación web progresiva por defecto en
la siguiente dirección: “localhost:8080”

Figura 25. Ventana del navegador mostrando que el Service Worker está Instalado
Correctamente.

Fuente: (Elaboración Propia)

43
En la pestaña de la aplicación de las herramientas de desarrollo del navegador podremos
observar como el estado del Service Worker se encuentra activo.

En el apartado de manifest podremos observar el color de la aplicación y los iconos que se

cargaron como se observa a continuación:

Figura 26. Pantalla del Navegador Mostrando la Pestaña del Archivo Manifest.

Fuente: (Elaboración Propia)

Finalmente una vez se realicen los pasos verificamos que la aplicación se ejecuta
correctamente con modo offline y se guardan los datos en la cache del navegador.

Figura 27. Verificando que la Aplicación Web Progresiva Funciona Correctamente.

Fuente: (Elaboración Propia)

44
7 Conclusiones

Después de haber concluido con la investigación sobre las aplicaciones web progresivas,
considerando conceptos, tecnologías, uso de herramientas para convertir una aplicación
normal a una aplicación web progresiva, se puede concluir lo siguiente:

 Tomando en cuenta la investigación estadística de datos relevantes, se pudo

evidenciar que el mercado móvil actualmente es considerado como un uso masivo de
los usuarios, lo cual determina ser factible la realización de aplicaciones web
progresivas actualmente.

 Considerando la investigación conceptual realizada se pudo constatar que las

tecnologías aprovechadas por las aplicaciones web progresivas como el uso del
Service Worker junto con el cache del navegador, la conectividad independiente,
carga instantánea, el diseño responsivo y también con la moderna forma de pensar lo
que es el mobile-first son una ventaja para que las páginas web puedan migrar y
evolucionar a esta tecnología.

 En el área de Angular se pudo corroborar que es una herramienta excepcional por su

arquitectura, uso de módulos, componentes, sus directivas, el uso de inyección de
dependencias y su enrutamiento y también los conceptos del Service Worker.

 Sobre el caso de estudio se pudo evidenciar que Angular junto con el Service Worker
beneficia considerablemente optimizando la experiencia de usuario a la hora de crear
las aplicaciones web progresivas, disponiendo distintas características sobresalientes
como el uso sin conexión a internet, la experiencia responsiva y la carga de manera
fluida.

45
Bibliografía
Arizmendi, P. (2018). AngularJS . Paiminix.

Foundation, N. (s.f.). Node JS. Obtenido de https://nodejs.org/es/

GlobalStats. (Mayo de 2019). statcounter. Obtenido de http://gs.statcounter.com/

Google. (2019). angular.io. Obtenido de https://angular.io/

Google. (s.f.). Google. Obtenido de

https://www.google.com.mx/chrome/?brand=CHBD&gclid=Cj0KCQjw6cHoBRDdARIsADiTT
za_KFQUHYTy9sR5EJynC1G9kLhFlJCwUdvoRTfo2ZWDqaidMPROvigaApzqEALw_wcB&gclsr
c=aw.ds

Hajian, M. (2019). Progressive Web Apps with Angular . Oslo, Noruega: Apress.

Love, C. (2018). Progressive Web Application Development by Example. Birminghan - Inglaterra:

Packt.

Magno, A. (2013). Mobile First Bootstrap. Birminghan - Inglaterra: Packt Publishing Ltd.

Makeer, M. (11 de Junio de 2019). https://www.bondcap.com/. Obtenido de Bond:

https://www.bondcap.com/report/itr19/#view/1

O'Reilly Media, I. (2017). Building Progressive Web Apps: Bringing the power of Native to the
browser. Sebastopol - California: Tal Ater.

46