Progressive Web Apps

De Wikipedia, la enciclopedia libre
Ir a la navegación Ir a la búsqueda

Qué son las Progressive Web Applications o PWA[editar]

Su traducción literal al español sería: Aplicaciones Web Progresivas, aunque ésta traducción no desvela un significado muy concreto ya que, realmente, las Progressive Web Applications o PWA (Abreviación de su significado), son la evolución de las páginas web hacia un ecosistema tecnológico más cercano al de una aplicación móvil o de escritorio instalable en el sistema operativo.


Requisitos a cumplimentar por una PWA[editar]

Una página web se convierte o se considera PWA cuando cumple una serie de requisitos mínimos con los que conseguir, por ejemplo:

  • que pueda ser instalada de forma fácil en nuestro ordenador, móvil o tablet, tal como si se tratase de una aplicación de escritorio o aplicación móvil
  • conseguir que dicha web proporcione un contenido mínimo cuando nuestro dispositivo no tenga acceso a internet
  • mejorar la experiencia de usuario (UX) con sistemas de cache local inteligente o con carga dinámica de contenido y librerías
  • aprovechar los sensores del dispositivo móvil o computadora para lograr una experiencia de uso más enriquecedora


Tecnologías con las que se construye una PWA[editar]

Una Progressive Web App es creada usualmente con la tecnología básica que conforma cualquier aplicación web: HTML5, CSS, y JavaScript. Esta tecnología básica, es utilizada ya sea de forma convencional escribiendo HTML, desarrollando hojas de estilo personalizadas con CSS, utilizando frameworks web como Materialize CSS, y complementando la inteligencia de una aplicación mediante el uso de JavaScript, para un manejo más profundo de funcionalidades como ser:

  • despliegue de un menú
  • desplegar animaciones gráficas
  • obtener datos remotos y visualizarlos en pantalla
  • manejo de almacenamiento local y bases de datos locales
  • acceder a sensores de computadoras y dispositivos móviles, como por ejemplo:
    • Cámara fotográfica y/o videocámara
    • Acelerómetro
    • GPS
    • File System
    • Contactos telefónicos
    • Sintetizador de voz
    • Reconocimiento de voz
    • Puertos USB (usualmente en computadoras)

entre otras tantas funciones...


A su vez, todo este compendio de tecnologías web conjugadas, se potencian con otras tecnologías más modernas basadas en JavaScript, como ser los Web Workers y/o Service Workers. Estas últimas le dan al desarrollador el poder de generar una instalación para dicha aplicación en el dispositivo móvil o computadora de los usuarios, y poder utilizar la misma sin conectividad a Internet, gracias a su sistema de caché local.

Esto último permite que la PWA se termine por convertir en una aplicación más instalada del lado del usuario, sin la necesidad de haber sido descargada de una Tienda de Aplicaciones (o software) convencional.


Algunas otras tecnologías utilizadas para la construcción de una PWA, pueden ser:

Muchas de estas últimas, simplifican la construcción del frontend de una aplicación, y ayudan a integrar más fácilmente los datos a visualizar con el backend de almacenamiento de éstos.


De la Web a la PWA

A continuación encontrarán una secuencia, dividida en tres pasos, de cómo una Web App se ejecuta en nuestro Web Browser hasta su instalación como PWA en un dispositivo móvil.


Historia del nacimiento de las progressive web apps[editar]

El nacimiento de las progressive web apps se remonta prácticamente a la llegada del primer iPhone (año 2007) al mercado móvil. Cuando Apple lanzó este dispositivo a la venta mundial, aún no contaban con una Tienda oficial de aplicaciones como es actualmente iTunes. Por lo cual, en ese momento, Apple realizó un convenio con algunas empresas que ya tenían presencia en el mercado móvil, y co-desarrolló con éstas algunas aplicaciones móviles básicas para que estén disponibles en su teléfono móvil estrella.

En paralelo, organizó un concurso de desarrollo de la tecnología JavaScript en teléfonos móviles ya que, la estrella de aquel momento en el universo web (Flash) no tendría su segmento dedicado dentro del ecosistema iPhone, y como resultado de dicho concurso nacieron grandiosos proyectos como Phonegap.

Para suplir en aquel entonces la falta de aplicaciones nativas para iOS (iTunes Store y XCode framework para iOS llegarían al mercado recién en 2008), El navegador web Safari, en su versión para iOS, incluyó una serie de metatags para instalar un icono y acceso directo hacia una web en el escritorio de iOS, pudiendo mostrar el mismo con una pantalla de inicio personalizada, y sin el framework y controles propios de Safari browser.

En aquel momento, el navegador web de Blackberry 10, era otro de los pocos navegadores web que daban soporte nativo a la instalación y visualización de aplicaciones web tal como si fuesen aplicaciones nativas.

Con el tiempo, Android, a partir de su versión 4.0, comenzó a soportar a Google Chrome como navegador web móvil, y así permitió a través de éste, poder instalar aplicaciones web tal como si se tratase de una aplicación nativa en Android. Aunque esto último sólo permitía agregar el ícono en el escritorio de Android.


Con el tiempo, la integración de PWA, llegó a todas las plataformas: iOS, Android, Windows, macOS, Linux, etcétera.


Comunidades[editar]

PWA Experts I/O: https://pwaexperts.io/