¿Qué son las Progressive Web Apps?

Las Progressive Web Apps (PWA) son la evolución técnica de las WebApps y fueron propuestas originalmente por Google en el evento Google I/O de 2015.

Una WebApp está desarrollada con estándares web (HTML5, CSS3, JavaScript), lo que permite compatibilidad en un mismo desarrollo y así reducir de manera importante los costes de producción, aunque no aprovechan al 100% las funcionalidades que tanto Android (de Google) como iOS (de Apple) incluyen en sus SDK, si lo comparamos con las Apps nativas.

Características de las Progressive Web Apps

Las Progressive Web Apps (PWA) tienen en común con las WebApps su modo de desarrollo (HTML5, CSS3, JavaScript), pero presentan las siguientes características:

• Progresiva: una progressive web app debe funcionar en cualquier dispositivo y mejorar progresivamente, aprovechando las funciones disponibles del dispositivo y del navegador del usuario.
• Descubrible: puesto que una progressive web app es un sitio web, debe ser detectable por los motores de búsqueda. Esta es una gran ventaja sobre las apps nativas.
• Enlazable: es otra característica heredada de los sitios web. Un sitio web bien diseñado debe utilizar el URI (Uniform Resource Identifier) para indicar el estado actual de la aplicación. Esto permitirá a la aplicación web conservar o recargar su estado cuando el usuario marque o comparta la URL de la aplicación.
• Responsive: la interfaz de usuario de una aplicación web progresiva debe ajustarse a la forma y al tamaño de la pantalla del dispositivo en la que se disfruta.
• Apariencia de app: una aplicación web progresiva debe parecerse a una aplicación nativa y debe estar basada en el modelo de shell de aplicación, con un mínimo de refrescos de página. Además, permiten añadir un icono de app para presentar en el dispositivo del usuario.
• Conectividad independiente: debe funcionar en áreas de baja conectividad u offline
• Re-enganchante (re-engageable): los usuarios de aplicaciones móviles tienen más probabilidades de reutilizar sus aplicaciones, y las aplicaciones web progresivas tienen la intención de lograr los mismos objetivos a través de funciones como notificaciones push.
• Instalable: una aplicación web progresiva se puede instalar en la pantalla de inicio del dispositivo, lo que la hace fácilmente disponible.
• Fresca: cuando se publica un contenido nuevo y el usuario está conectado a Internet, dicho contenido debe estar disponible en la aplicación.
• Segura: debido a que una aplicación web progresiva tiene una experiencia de usuario más íntima y porque todas las solicitudes de red pueden interceptarse a través de los service workers, es imprescindible que la aplicación esté alojada en HTTPS para evitar ataques de intermediarios.
• Se nutren de los Service workers y tienen Caché de API
• Son soportadas en Chrome, Firefox, Opera y navegadores Samsung. Se encuentra en desarrollo para Microsoft Edge. Y están bajo consideración para Safari. Cargan instantáneamente (incluso si las condiciones de la red no son óptimas).

¿Por qué utilizar las PWA?

Smashing Magazine publica un estudio que ha demostrado que, de media, una aplicación pierde el 20% de sus usuarios entre el momento de la primera toma de contacto del usuario con la aplicación y el siguiente donde el usuario ya comenzaría a utilizar la aplicación. Primero el usuario ha de encontrar la aplicación en la tienda, descargarla, instalarla y, finalmente, abrirla. En contraste, cuando un usuario encuentra su progressive web app, ya podrá comenzar a utilizarla de modo inmediato, eliminando las etapas innecesarias de descarga e instalación. En el momento que el usuario regresa a la aplicación, se le pedirá que la instale y la actualice si quiere vivir una experiencia completa.

Desventajas de las Progressive Web Apps

Podemos decir que la desventaja que presentan hoy en día las progressive web apps es el tema del soporte en los principales navegadores. Como hemos comentado, funcionan bien en Chrome, Firefox, Opera y navegadores Samsung pero todavía no son un estándar completo para Microsoft Edge ni para Safari.

Ejemplos y casos de éxito

Google publica sus propios casos de éxito, con empresas destacadas como The Washington Post, que incrementó el retorno de usuarios desde búsquedas móviles en un 23% y tuvo un 88% de mejora en el tiempo de carga para el contenido frente a la web móvil tradicional; o Carnival Cruise Line que incrementó en un 42% su ratio de apertura. También fue un éxito el caso del gigante asiático del comercio electrónico Alibaba, que tras actualizar su web a Progressive Web App, incrementó sus conversiones en un 76%.

Terminología a tener en cuenta

Service workers

Un service worker es una secuencia de comandos que tu navegador ejecuta en segundo plano, separado de una página web, abriendo la puerta a funciones que no necesitan una página web ni interacción de usuario. En la actualidad, ya incorporan funciones como notificaciones de aplicación y sincronización en segundo plano.

Además, permite soportar experiencias sin conexión, brindándoles a los programadores control total sobre la experiencia.

Push notifications

Push notifications es una tecnología que permite enviar mensajes a los SmartPhones que tienen instalada una App, incluso cuando el usuario no está utilizando activamente la aplicación. Ahora también están accesibles para las Progressive Web Apps.

Herramientas a considerar

• Herramientas de testing: El equipo de Google ha desarrollado una herramienta para probar las progressive web apps. Se trata de Lighthouse que corre en Node.js o como plugin de Chrome y se puede encontrar también en GitHub.
• Chrome DevTools
• Service Worker Libraries para simplificar la experiencia de desarrollo
• Recursos Material Design Lite
• Frameworks de desarrollo: Polymer Project y Angular, Lighthouse
• Módulo de PageSpeed para optimizar la velocidad de carga.

Por Maria Rey, Digital Visual Design en BeRepublic