Progressive Web App

No son una extensión del navegador, tampoco son un framework, ni son plugin.
Son un conjunto de mejoras prácticas que brindan la oportunidad de tener una
página web convencional y convertirla en una aplicación instalada en un dispositivo.
Y le permiten al usuario una interacción más nativa con el programa, brindando
mejores experiencias.
Como se menciona en la página oficial de mozilla para desarrolladores “Las PWA
son aplicaciones web que usan un número específico de tecnologías y patrones
estándares que les permiten aprovechar tanto las características web como apps
nativas.” (Network, 2019). Por lograr estas mejoras es indispensable implementar
tecnologías estandarizadas en páginas web.
Una PWA está compuesta por un conjunto de herramientas de las cuales se
mencionar las siguientes:
Service worker
Es un fichero de JavaScript que ejecuta comandos desde segundo plano, esto
quiere decir que se ejecutan servicios aunque el sitio web este cerrado. Un
desarrollador web de Google define a un Service Worker de la siguiente forma: “Un
service worker es una secuencia de comandos que tu navegador ejecuta en
segundo plano, separado de una página web, abriéndoles la puerta a funciones que
no necesitan una página web ni interacción de usuario” (Gaunt, 2019).
Un service worker tiene un ciclo de vida que esta desligado al de una página web,
las etapas son las siguientes:
a) Instalación: en esta etapa se debe de registrar el service worker mediante
un archivo JavaScript, este archivo permite que el navegador inicie la etapa
de instalación en segundo plano. “La instalación solamente se realiza una
vez por service worker y para que sea correcta los archivos deben
almacenarse adecuadamente en caché.” (Baquero, 2018)
b) Activacion: cuando la instalación se completa de una forma satisfactoria, ya
se puede utilizar el service worker, permitiendo controlar los eventos
deseados.
c) Terminated y fech: posteriormente de la activación, el sevice worke entra a
dos estados, el de terminated que indica que se encuentra en ahorro de
memoria y el estado fech indica que se está manejando las peticiones de la
red.
Para utilizar un service worker es necesario un navegador web compatible con
la tecnología, también es necesario configurar un protocolo de http para poder
implementar el servicio.
Responsive Web Design

Actualmente la mayoría de páginas web que están en Internet deben de tener un

diseño que se pueda adaptar a cualquier dispositivo que consulte la información que
esta ofrece. Cuando una página web tiene un diseño totalmente flexible para
soportar cualquier tamaño de pantalla independientemente si se está visualizado en
una computadora o en un teléfono, se puede decir que la página tiene un diseño
responsivo.
Se define que “Diseño web adaptable, originalmente definido por Ethan Marcotte
en A List Apart, responde a las necesidades de los usuarios y los dispositivos que
estén usando. Los cambios de diseño según el tamaño y las capacidades del
dispositivo.” (LePage, 2019)
Manifiesto
El manifiesto es un archivo que se utiliza para indicar como se mostrara la
aplicación a los navegadores web y dispositivos móviles, esto se logra especificando
diversas propiedades en donde se define el valor de uso de las mismas. Jose
Baquero describe el manifiesto relacionado con una PWA de la siguiente forma:
“Cuando hablamos de Progressive Web Apps (PWA), el archivo de manifiesto es
una forma de orientar a los navegadores web, especialmente a los dispositivos
móviles, sobre cómo mostrar una aplicación.” (Baquero, 2018)
El archivo debe de ser nombrado como manifest.json y debe de colocarse en el
directorio raíz de la aplicación. En el archivo se define el nombre de la aplicación,
los iconos que contendrá, colores, estilos, también debe de incluir la url predefinida
para cuando un usuario inicia la aplicación, además también se puede configurar si
la orientación de la aplicación si esta sera vertical u horizontal.
En el sitio pwa-workshop, se mencionan los siguientes beneficios de incluir un
archivo manifiesto en una aplicación:
 Los navegadores compatibles pueden instalar PWA y agregar un acceso
directo en la pantalla de inicio
 Se puede hacer referencia a la PWA en algunas tiendas de aplicaciones
 Una PWA se puede mostrar en pantalla completa o en una ventana
independiente, sin la interfaz de usuario del navegador
Bibliografía
Baquero, J. (26 de Febrero de 2018). arsys. Obtenido de arsys.es:
https://www.arsys.es/blog/programacion/manifiesto-progressive-web-apps/

Baquero, J. (23 de Marzo de 2018). arsys. Obtenido de arsys.es:

https://www.arsys.es/blog/programacion/service-worker/

Gaunt, M. (14 de Agosto de 2019). developers google. Obtenido de developers.google.com:

https://developers.google.com/web/fundamentals/primers/service-workers/

LePage, P. (14 de Agosto de 2019). Developers Google. Obtenido de

https://developers.google.com/web/fundamentals/design-and-ux/responsive/?hl=es

Network, M. D. (29 de Julio de 2019). Mozilla Developer Network. Obtenido de

https://developer.mozilla.org/es/docs/Web/Progressive_web_apps/Introduction