UNIVERSIDAD TECNOLÓGICA DE

XICOTEPEC DE JUAREZ PUEBLA

APLICACIONES WEB PROGRESIVAS

HERRAMIENTAS PARA UNA PWA

Alumna:
Claudia Iveth Valdez Lira
10
“B” IGDS

Profesor: Iván Eduardo García Quintero

Xicotepec de Juárez Puebla, 19 de Septiembre del

2021
 Introducción

Como ya se mencionó anteriormente las aplicaciones web progresivas PWA son una nueva generación
de aplicaciones que aprovechan las principales tecnologías para crear interfaces para los servicios de
Internet. A diferencia de las aplicaciones móviles o las de escritorio, estas PWA pueden ejecutarse en
cualquier navegador compatible con los estándares, además de otras ventajas como las notificaciones
push, el rendimiento o el incremento de su funcionalidad según las capacidades del dispositivo y de ahí
su denominación Progressive.

Este tipo de aplicaciones intentan llevar la usabilidad de una aplicación móvil nativa al conjunto de
características de un navegador moderno, aprovechando al máximo los avances en ambas áreas de
desarrollo, ofreciendo ventajas evidentes al permitir a los usuarios ejecutarlas directamente desde el
escritorio sin pasos adicionales.

Las aplicaciones web progresivas deben ser capaces de hacer lo siguiente:

 Funcionan con la mayoría de navegadores y dispositivos (móviles y de escritorio) con una base
de código progresiva.
 Se adaptan a todas las pantallas gracias a un diseño receptivo.
 Aprovechan los Service Workers para habilitar la conectividad offline (se requiere HTTPS).
 Proporcionan una experiencia similar a la de una aplicación que aprovecha las herramientas de
re-engagement, así como las notificaciones push.
 Aprovechan el manifiesto de aplicación web para describir los recursos utilizados.

El objetivo de esta investigación, es dar a conocer las herramientas que te permitan crear aplicaciones
PWA de forma más rápida.
REACT

El primer paso para construir una aplicación web progresiva es elegir un marco de trabajo. Aunque
existen muchos frameworks, resaltamos React por dos razones:

 Está gestionado y respaldado por Facebook, que utiliza el marco de trabajo en su página,
demostrando que el framework se somete a pruebas rigurosas teniendo 1.180 millones de
usuarios al día.

 React es la base de React Native, que te permite portar fácilmente aplicaciones creadas con
React a aplicaciones nativas.

El atractivo de ReactJS es su enfoque de desarrollo centrado en componentes. Cada componente está

construido usando JavaScript, pudiendo reutilizarlo fácilmente.

La interfaz de usuario consta de varios componentes. Estos componentes pueden renderizarse en el

navegador usando Node.js, y dentro de las aplicaciones, usando React Native. De esta manera, se
resuelven los problemas de la gestión de aplicaciones que necesitan ser utilizadas en diferentes
sistemas operativos, navegadores y dispositivos.

Según su documentación oficial se define como declarativa y basada en componentes. Ya que permite
la creación de interfaces de una manera sencilla, gracias a su enfoque basado en componentes y el
manejo de sus estados y propiedades, y cuando dice componentes se refiere a dividir la interfaz de
usuario preferiblemente por su responsividad y funcionalidad en diferentes piezas reutilizables e
independientes.

 DOM virtual: Es una copia del DOM en memoria donde se realizan primero los cambios, se
identifican los nodos que cambian y, posteriormente, en el DOM real se actualizan o modifican
solo los nodos que han cambiado, en lugar de rende rizar todo nuevamente.
 Isomorfismo: rende rizado tanto en el servidor como en el cliente.
 Sintaxis JSX.
 Componentes stateless: componentes que no manejan estado y, stateful, componentes Clase en
los cuales manejamos los métodos del ciclo de vida de react y el método obligatorio render.
 Ciclo de vida de los componentes.
 Flujo de Datos unidireccional: Esto quiere decir que el flujo de datos es de padre a hijo y no
puede ser al contrario ⬇️.

Requisitos previos

 Tener instalado Node.js, si no lo tienes instalado puedes descargarlo desde su página

oficial https://nodejs.org/es/

 Para verificar nuestro proceso, instalaremos la extensión de Chrome Lighthouse, esta

herramienta está orientada a auditar nuestra app web. Tiene un gran enfoque sobre las
funciones de nuestras PWA.
Paso 1️

Para crear nuestro proyecto, utilizaremos la herramienta create-react-app desarrollada por facebook, ya
que podremos despreocuparnos de la configuración de herramientas como webpack, babel o inclusive
git, ya que vienen preconfigurados.

Una vez creado, procedemos a ejecutar las siguientes instrucciones para ejecutar nuestro proyecto.

Para realizar la primera auditoría de nuestra aplicación, utilizaremos lighthouse, para ello, dirígete a la
pestaña de auditoría en las herramientas para desarrolladores .
Obtendrás algo como esto al realizar la primera auditoría a la aplicación, aunque no hayas realizado
ninguna modificación:

Paso 2

En este paso vamos a configurar nuestro service worker. Al crear nuestra aplicación utilizando create-react-app,
nuestro proyecto ya cuenta con un archivo serviceWorker.js.
Para que el registro de nuestro service worker funcione y poder verificar su funcionamiento es
necesario ejecutarlo en modo producción (crear un compilado) y se realizará mediante un npm run
build.

Para verificar el funcionamiento, instalaremos y ejecutaremos un servidor estático, para lo cual

utilizaremos npm serve. Procedemos a instalar (npm i serve) y utilizar (serve -s build).
Abrimos el navegador y volvemos a cargar la auditoria
Paso 3

Nuestra aplicación ya cuenta con un manifest.json que podrá ser modificado, el cual está ubicado en la
raíz de nuestro proyecto en el directorio public y desde el que podemos controlar algunos aspectos de
apariencia en nuestra aplicación.

Paso 4

Para cumplir con las especificaciones de la auditoría en Lighthouse nos faltarían los siguientes puntos:

 Agregar imágenes de 192×192 px y 512×512 px de nuestra aplicación.

 Redireccionar de HTTP A HTTPS.

En nuestro primer punto busca las mejores imágenes en estas dimensiones que debes especificar en el
manifest.json.

En el caso de HTTP es necesario realizar una configuración a HTTPS pero no es posible de realizar en
este caso, debido a que nos encontramos en un entorno local.
Angular

Es un framework de desarrollo para JavaScript creado por Google (se desarrolla en Typescript). La
finalidad de Angular es facilitarnos el desarrollo de aplicaciones web SPA y, además, facilitarnos una
serie de herramientas para trabajar con los elementos de una web de una manera más sencilla y
óptima. Angular dispone de una herramienta muy potente que nos ayuda a generar componentes,
clases, interfaces, pipes, directivas, etc., esta herramienta es@angular/cli.

A continuación veremos lo fácil que es añadir los archivos y configuraciones necesarias a nuestra app
para que finalmente sea considerada una PWA.

Paso 1

Primero, creamos nuestro proyecto de angulary um i

Paso 2️

Compilamos el proyecto en modo producción, ya que vamos a realizar la misma prueba más adelante
con la implementación de PWA y será necesario que se realice en modo producción (outputPath: /dist).
Paso 3️

Levantamos la aplicación con el paquete http-server de npm con el siguiente comando para que evite
cacheo.

http-server -p 8080 -c-1 dist/angular-pwa-sw-example

Levantamos nuestra aplicación de esta manera porque el servidor de desarrollo de Angular (ng serve)
no permite el uso de Service Workers. Así podemos realizar más tarde la comparativa del antes y el
después en las mismas condiciones.

Paso 4️

Seguidamente ejecutamos la herramienta Lighthouse de Google para hacer la auditoría de nuestra web
y saber si cumple los checks necesarios para ser una PWA.
Como podemos ver, nuestra aplicación no se puede considerar una PWA según los criterios de
Lighthouse porque aún no tenemos ninguna implementación (manifest, service workers, offline display,
...) para que lo sea realmente.

Paso 5️

Con la ayuda de @angular/cli vamos a añadir las características de una PWA a nuestra aplicación
fácilmente.

Ejecutamos en la raíz de nuestro proyecto angular:

ng add @angular/pwa

Automáticamente nos va a añadir una serie de nuevos archivos y va a añadir alguna que otra
configuración a nuestro proyecto.
Paso 6️

Ejecutamos de nuevo Lighthouse para volver a auditar nuestra aplicación y ver qué ha cambiado.
Lighthouse
Liferay
Liferay sirve para construir desde un pequeño sitio web hasta un portal muy grande y potente, con
múltiples sitios web dentro, e-commerce, servicios para las aplicaciones móviles que son expuestos y
de fácil integración con sistemas externos. Liferay es una plataforma de la que destacamos algunas de
sus características y lo que nos permite:

• Gestión de usuarios.
• Gestionar permisos y roles, y es posible controlar el acceso a todo con unos pocos clics.
• Colaboración de usuarios y la parte Social, como crear un blog o una red social, con unos
simples pasos. • Gestión de contenidos.
• Búsquedas customizables.
• Controlar todo el flujo de trabajo o workflow.
• Creación de múltiples sitios web.
• Posee múltiples aplicaciones de caja listas para ser utilizadas.
• Creación de servicios web en pocos minutos, gracias a la herramienta Service Builder.
• Personalización y customización de todo lo que se necesite.
• Desarrollo de aplicaciones customizables, ya que podemos reutilizar partes de las
aplicaciones creadas.

Liferay como PWA

Modificaciones visuales: el fichero manifest En primer lugar, haremos que nuestro portal basado en
Liferay sea visualmente atractivo desde un entorno móvil Adaptación responsive de la aplicación El
primer paso será adaptar el tema de apariencia de nuestro portal basado en Liferay para que se
visualice correctamente en cualquier dispositivo. Para ello utilizaremos el diseño responsive y la
metodología mobile-first que prioriza el diseño optimizado para dispositivos móviles. Al estar Bootstrap
incluido por defecto dentro de Liferay, utilizaremos el grid nativo y las distintas características del
framework para facilitar esta adaptación a dispositivos móviles.
Mediante la utilización de las utilidades de Bootstrap minimizamos la cantidad de código CSS a incluir
en el tema para la adaptación del contenido a dispositivos móviles.

Generación del fichero Manifest de la aplicación

El fichero central que da vida a las PWA es el fichero Manifest, que contendrá los metadatos propios de
la aplicación.

Algunos de los datos definidos en este fichero son el nombre, la descripción, la url de inicio de la
aplicación o el icono con el que se creará el acceso a la misma en los dispositivos móviles o entornos
Windows.

Crearemos este fichero en la ruta del tema src > templates > manifest.json e incluiremos los siguientes
datos:

 name: Nombre de la aplicación.

 start_url: Url del portal en la que se iniciará la aplicación.
 background_color: Color de fondo de la pantalla mostrada mientras carga la app.
 display: Determina la visualización de la aplicación (pantalla completa, con barra de búsqueda
del navegador, etc.)
 icons: Permite indicar el icono de la aplicación. Indicaremos en el campo src la ruta de la imagen
que previamente habremos subido a la carpeta images del tema. Pueden indicarse varios iconos
para optimizar la visualización de los mismos en distintas resoluciones de pantalla.