Vivimos en un mundo cada vez más rápido, dinámico y cambiante. Las innovaciones incrementales que repercuten en las personas se suceden, con un enfoque cada vez más claro en:

• el rendimiento, pensemos en los dispositivos cada vez más potentes que usamos cada día o en las tareas que nos permiten hacer más rápidamente;
• la experiencia, para eliminar cualquier fricción en el uso del software/hardware;
• la inteligencia, con algoritmos que ahora trabajan en una perspectiva predictiva.

Es en esta dirección, centrándose principalmente en el rendimiento y la Experiencia de Usuario para el usuario final, en la que va el desarrollo de Progressive Web App (PWA), una solución que quiere combinar lo mejor de las apps nativas y la tecnología web.

Una Progressive Web App (PWA) es una app que utiliza las capacidades de la web moderna para ofrecer a los usuarios una experiencia muy similar (si no mejor) a la de una app nativa.

A diferencia de las apps tradicionales, las progressive web apps son un híbrido entre las páginas web normales y las aplicaciones móviles. El término “progresivo” se refiere a que introducen nuevas características y, desde el punto de vista de la experiencia del usuario, se perciben inicialmente como páginas web normales pero progresivamente se comportan más como apps móviles, entre otras cosas multiplataforma.

Pros y contras de las Progressive Web App

Las principales características son:

• Progresivas – Funcionan para todos los usuarios, independientemente del navegador elegido porque están construidas en la base con principios de mejora progresiva.
• Responsive – Se adaptan a los distintos tamaños de pantalla: escritorio, móvil, tableta, o dimensiones que puedan estar disponibles más adelante.
• App-like – Se comportan con el usuario como si fueran apps nativas, en cuanto a interacción y navegación.
• Actualizadas – La información está siempre al día gracias al proceso de actualización de datos que ofrecen los service workers.
• Seguras – Se exponen a través del protocolo HTTPS para evitar que la conexión muestre información o altere los contenidos.
• Buscables – Se identifican como “aplicaciones” y son indexadas por los buscadores.
• Reactivables – Facilitan la reactivación de la aplicación gracias a capacidades como las notificaciones web.
• Instalables – Permiten al usuario “guardar” las apps que considere más útiles con el icono correspondiente en la pantalla de su terminal móvil (pantalla de inicio) sin tener que enfrentarse a todos los pasos y problemas relacionados con el uso de la tienda de aplicaciones.
• Enlazables – Se comparten fácilmente a través de una URL sin necesidad de complejas instalaciones.
• Offline – Una vez más se trata de poner al usuario por delante de todo, evitando el habitual mensaje de error en caso de conexión débil o nula. Las PWA se basan en dos particularidades: en primer lugar el ‘esqueleto’ de la app, que recuerda la estructura de la página, aunque su contenido no responda y sus elementos incluyen la cabecera, el diseño de la página, así como una ilustración que señala que la página se está cargando.

Los puntos débiles se refieren a:

• Soporte para iOS desde la versión 11.3 en adelante;
• mayor uso de la batería del dispositivo;
• no todos los dispositivos soportan toda la gama de características de la PWA (el mismo discurso para los sistemas operativos iOS y Android);
• no es posible establecer un fuerte reenganche para los usuarios de iOS (esquema de URL, notificaciones web estándar);
• el soporte para la ejecución sin conexión es, sin embargo, limitado;
• falta de presencia en las tiendas (no hay posibilidad de adquirir tráfico desde ese canal);
• no hay un “órgano” de control (como las tiendas) y un proceso de aprobación;
• acceso limitado a algunos componentes de hardware de los dispositivos;
• poca flexibilidad en cuanto a los contenidos “especiales” para los usuarios (por ejemplo, programas de fidelización, de lealtad, etc.).

La importancia del Manifiesto y de los Service Workers

Las nuevas características de los navegadores modernos que permiten a las PWAs ofrecer lo mejor son el “manifiesto” y los “service workers”.

Manifest
Es un sencillo archivo JSON que define los parámetros básicos de la PWA, para controlar cómo debe aparecer la app ante el usuario y definir su aspecto en el lanzamiento: iconos, otras características básicas como colores, fuentes, orientación de la pantalla y posibilidad de instalarse en la pantalla de inicio.

Service workers
Son la verdadera clave de las experiencias avanzadas que puede ofrecer una PWA. Un service worker es un script que el navegador ejecuta en segundo plano, separado de una página web, para utilizar funciones que no requieren una página web o la interacción del usuario.

Hoy en día, los SWs ya incluyen funciones como las notificaciones push y la sincronización en segundo plano. En el futuro soportarán funciones como la sincronización periódica o el geofencing. La función principal es la capacidad de interceptar y gestionar las peticiones de red, incluyendo la gestión programática de una caché de respuestas. Es una API que soporta experiencias offline dando a los desarrolladores el control total de la experiencia.

Con la incorporación del soporte a los service workers en la última versión de iOS, Apple ha abierto la puerta a que las PWAs lleguen, a todos los efectos, a todo el mercado móvil.

¿Cuáles son las tecnologías más utilizadas para las PWA?

Existen varias tecnologías para la creación de una Progressive Web App, principalmente basadas en JavaScript, con diferentes características.

Entre las principales tenemos:

• React
  Una potente librería JavaScript para la construcción de interfaces de usuario dinámicas y modernas
• Polymer
  Una combinación de componentes, herramientas y modelos diseñados para crear PWA
• Angular
  Un framework JavaScript para crear aplicaciones web dinámicas que utiliza HTML como lenguaje de plantillas
• Ionic
  Un framework JavaScript para crear potentes aplicaciones para múltiples plataformas utilizando un código básico
• Accelerated Mobile Pages (AMP)
  Un proyecto de código abierto para mejorar el rendimiento de las páginas web

Cómo elegir entre una PWA o una solución nativa

Llega el momento de elegir, ¿qué solución adoptar?

Es preferible elegir el desarrollo de una PWA cuando:

• La app debe distribuirse fácilmente a una base de usuarios aún más amplia
• El presupuesto disponible no es elevado
• Se dispone de poco tiempo para el go-live
• Es importante una correcta indexación en buscadores
• Se requiere compatibilidad multiplataforma
• Se necesitan más actualizaciones en un tiempo ajustado

Por el contrario, es preferible desarrollar una app nativa cuando:

• Es necesario moverse en las tiendas
• La velocidad y la capacidad de respuesta son puntos clave para el éxito de la app
• La app requiere un uso importante de las características de hardware del dispositivo
• El modelo de negocio se basa, por ejemplo, en el coste por descarga y/o IAP (In App Purchase)
• La app debe integrarse con otras apps de terceros

Las diferencias en el proceso de instalación: PWA vs app nativa

El proceso general de instalación de apps nativas sigue este flujo:

• Acceso a la tienda de referencia (App Store o Google Play)
• Búsqueda de la app
• Pulsar en “Instalar”
• Aceptación de las distintas autorizaciones
• Apertura y lanzamiento de la app
• Uso de la app

En la comparación, la instalación de la PWA incluye:

• Visitar el sitio
• Añadir a la pantalla de inicio del dispositivo (opcional)
• Apertura de la app
• Uso de la app

Los principales ejemplos de una Progressive Web App

Ya son muchos los ejemplos de PWA “distinguidos” que los usuarios utilizan en sus dispositivos y entre los principales informamos:

Pinterest

Para saber más:
Addy Osmani en Medium >Un estudio de caso sobre el rendimiento de la aplicación web progresiva de Pinterest

Instagram

La PWA actual es muy similar a la app nativa y tiene todas las características principales de interacción, desde las notificaciones hasta la posibilidad de ver Historias.

Google Maps

Para saber más:
The Next Web >La ligera Maps Go de Google no es más que una Progressive Web App

Tinder

Para saber más:
Addy Osmani en Medium >Un estudio de caso sobre el rendimiento de la aplicación web progresiva Tinder

Twitter Lite

Para saber más:
Blog de Twitter >Cómo construimos Twitter Lite
Google Developers >La PWA de Twitter Lite aumenta significativamente el compromiso y reduce el uso de datos
Paul Armstrong en Medium >Twitter Lite y React Progressive Web de alto rendimiento. Apps at Scale

YouPorn

La decisión de utilizar PWAs es principalmente para saltarse las limitaciones que Apple y Google ponen al contenido pornográfico en las tiendas, así como para garantizar una mejor experiencia de usuario.

Para saber más:
Blog de YouPorn >Experiencia de la App de YouPorn
VentureBeat >YouPorn se vuelve progresivo con nuevas aplicaciones web móviles para Android e iOS

Algunas referencias para profundizar en el tema de las Progressive Web App

Google Progressive Web App > https://developers.google.com/web/progressive-web-apps/

Lista de comprobación de Google PWA > https://developers.google.com/web/progressive-web-apps/Lista de comprobación

Appscope, directorio para aplicaciones web progresivas (PWA) > https://appsco.pe/

¿Así que el futuro es “progresivo”?

La respuesta es, como siempre, depende. La decisión de desarrollar una PWA obedece a análisis y reflexiones que deben hacerse de vez en cuando, de proyecto en proyecto, de usuario en usuario. Por el contrario, podríamos añadir una complejidad más: la del posicionamiento en el buscador: ¿hemos gestionado todo correctamente o estamos canibalizando el tráfico de nuestra web?

Los factores que llevan a la elección son muchos, como se anticipa en este estudio, por lo que no hay una receta definida y estándar sino la que da el contexto encaja correctamente con la estrategia y los objetivos. Hablemos de ello juntos.