Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Herramientas PWA
Herramientas PWA
Alumna:
Claudia Iveth Valdez Lira
10
“B” IGDS
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.
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.
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
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.
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:
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
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.
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.
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.
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.
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: