Que son Aplicaciones Web Progresivas

Son un conjunto de aplicaciones web que utilizan APIS así como funciones emergentes del navegador web junto a una estrategia tradicional de mejora progresiva para ofrecer una aplicación nativa.

Para poder llamar PWA a una aplicación web, debe tener las siguientes características:

• Contexto seguro (https)
• Servicio workers
• Archivo Manifest

Ventajas

Estas PWA deben ser detectables, instalables, enlazables, independientes de la red, progresivas, reconectables, responsivas y seguras.

Características

Responsive

En la actualidad, la mayoría de webs cuentan con diseño responsive que las permite adaptarse a diferentes dispositivos, algo imprescindible con el papel predominante de los smartphones. A pesar de que las PWA van más allá del simple diseño responsive, este se puede seguir mencionando como una de sus características principales. Estas Apps deben adaptarse automáticamente a cualquier formato, navegador o dispositivo (con los consecuentes cambios de medidas y resolución), y más considerando la naturaleza mobile de las mismas.

Actualizada

Las PWA siempre mostrarán su última versión al usuario, con el empleo de actualizaciones automáticas, de manera constante e instantánea y sin necesidad de descargarlas. Esto es posible gracias al empleo de Service Workers y porque no deja de ser una web App, independiente de la publicación (y todo el proceso de revisión e instalación por parte del usuario que conlleva) en los markets de aplicaciones.

Segura

Se usa siempre el protocolo seguro HTTPS que, además, es necesario para la instalación del Service Worker. Esto posibilita asegurar que el acceso sea seguro y que el contenido servido no haya sido sujeto a manipulaciones. Se emplean tecnologías como TLS para el cifrado web.

Rápida

Por lo general, una PWA tiene la velocidad, tanto de carga como de navegación, optimizada. Esto permite que los contenidos se muestren al usuario prácticamente al instante, ya que se apoyan en el almacenamiento en la caché. Las interacciones, tales como clics o scroll, también deben ser inmediatas. El menor peso de la Progressive Web App en comparación a la App nativa es un factor decisivo para ello.

Offline

Una PWA debe permitir el acceso, ya sea de manera parcial o incluso total, a pesar de que no haya conexión a Internet (o esta sea de baja calidad).

Para que se pueda servir contenido a los usuarios que estén offline, se utilizan los service workers y el almacenamiento en caché de la información esencial para iniciar la App, que se realiza desde la primera vez que esta se abre. Así, en las visitas posteriores, se puede disponer de cierto contenido independientemente de la red. Esto se basa, a la vez, en la “App shell”, es decir, la estructura básica de la App, que se podrá mostrar aunque existan problemas con el contenido. Todo ello deriva en una mejor experiencia de usuario y evita la frustración que genera la imposibilidad de acceso.

Multiplataforma

En su desarrollo, la tecnología utilizada contempla su ejecución en diversos dispositivos, sistemas operativos y navegadores. Esto, además de ser clave a la hora de ofrecer una experiencia de usuario satisfactoria y alcanzar a más público potencial, supone facilidades para los desarrolladores y permite abaratar costes, puesto que no se requieren programaciones diferenciadas (algo que sí ocurre con las Apps nativas).

Indexable y enlazable

El contenido de una PWA es rastreable e indexable, de forma que pueda aparecer como resultado en un buscador. Además, esta se puede compartir mediante una URL, con la posibilidad de que la otra persona la utilice sin necesidad de instalarlo.

Con acceso directo

Las webs a las que se acceda desde el navegador que dispongan de una versión PWA suelen informar al usuario, invitándole a “añadirla a su pantalla de inicio”. Estas aplicaciones se pueden utilizar desde el navegador, pero también se pueden instalar en el dispositivo. Esta instalación no requiere de una “descarga” tal y como la conocemos, sino que se basa en la inclusión de un acceso directo en la pantalla de inicio o escritorio de nuestro dispositivo. Este se muestra como un icono más, prácticamente idéntico al de cualquier App nativa.

Apariencia nativa

La interfaz de usuario y, en general, la apariencia de una PWA es muy similar a la de las Apps nativas, tanto en estética como en la manera de interactuar y navegar por ella. A esto contribuyen elementos como una pantalla de inicio, que se ejecute en una ventana de aplicación propia, totalmente responsive, que ocupe la pantalla por completo (sin la barra que muestra la URL), etc.

Ejemplos prácticos

• AliExpress
• Telegram
• Flipboard
• Twitter Lite