Introducción a las PWA
Crear Aplicaciones Web Progresivas
Por qué necesitábamos una nueva forma de construir sitios web
Cuándo Apple lanzó el iPhone en el 2007, el desarrollo web no estaba preparado para tan sustancial cambio en la realidad de usuarios y programadores. Tener una tienda de aplicaciones con un gran mercado de clientes y una gran suma de pagos, hizo que Apple optara por cerrar su ecosistema y controlar prácticamente todo en el desarrollo de aplicaciones. Dejando fuera del juego a millones de programadores potenciales.
Al pasar de los años, la web ha ido creciendo y afinando. Cada vez son más las APIs nativas que podemos usar directamente sobre los navegadores, por ejemplo, usar la cámara, grabar video, grabar audio, obtener la ubicación del dispositivo, entre un montón más.
Hoy en día podemos ver un gran avance en el conocimiento medio de javascript entre los programadores, esto garantiza un sin fin de recursos y documentación disponible para los que se van iniciando, además de garantizar también la solución de problemas fuertes como la optimización en la carga y procesamiento de sitios web. Un ejemplo claro es gran soporte y compatibilidad de los navegadores a las notificaciones push, el almacenamiento local y de caché y a las peticiones de servicios web.
Ejemplos de PWA en el mundo real
Flipkart es el Amazon de India, allá el mercado de consumidores estaba limitado en comunicaciones, básicamente lidiando entre el 3G y 63% en 2G. La aplicación fue creada por un grupo pequeño de ingenieros en 42 días, algunos de los efectos de migrar la aplicación a PWA son.
- El tiempo de usuarios pasó de 70 segundos a 3.5 minutos promedio.
- Los usuarios pasaban 3 veces más en el sitio web.
- Subió 40% la tasa de re-enganche de usuarios.
- Aumentó 70% la tasa de conversión entre los que añadían la aplicación a la página de inicio.
Otros casos similares los podemos ver con The Weather Channel.
- La aplicación PWA ahora está en 62 lenguajes en 178 países.
- Mejoró 80% el tiempo de carga (respecto al sitio web).
- Basado en este caso exitoso en 2017 migraron el sitio web a PWA.
En el caso de Lacome, ellos se dieron cuenta que a los usuarios no les gustaba instalar aplicaciones nativas y se les hacía más fácil simplemente entrar al sitio web y agregarlo a la pantalla principal, cómo si se tratara de una aplicación nativa. Algunos puntos que destacaron en ese estudio son.
Beneficios generales.
- Decreció 84% el tiempo de espera hasta que la página es interactiva.
- Incrementó 17% las conversiones.
- Decreció 15% el porcentaje de rebote.
- Incrementó en 51% las sesiones de usuarios móviles.
Mejoras en IOS.
- Incrementó 52% las sesiones en dispositivos IOS.
- Decreció 10% el rebote en usuarios de IOS.
Beneficios de las notificaciones push.
- 8% de los usuarios que pulsaban una notificación concretaron una compra.
- 18% de los usuarios abrieron las notificaciones.
- Incrementó 12% la tasa de recuperación en los carritos de compras.
¿Qué son las PWA?
Básicamente como propuso Axel Russel en el 2015, se trata del mecanismo de hacer que los sitios web tengan capacidades offline (fuera de línea) para acceder a recursos del dispositivo, provistas por las apis nativas del navegador (chrome principalmente). Esta característica permite poder interactuar con sitios web como si se trataran de aplicaciones nativas. En el trasfondo se crea una instancia aislada del navegador dedicada a ejecutar sólo la aplicación PWA.
La lista de características principales de las PWA son las siguientes.
- Cuentan con un manifiesto que indica los recursos iconográficos y metadatos de la aplicación útiles para determinar el ícono y nombre de la aplicación en la pantalla de inicio.
- Cuenta con service workers (trabajos de servicios nativos / instalación, recursos de caché y peticiones a recursos). Que se instalan para proveer la funcionalidad offline.
- Cuenta con acceso a las APIs nativas soportadas por el navegador.
- Cuenta con la posibilidad de agregar la aplicación a la pantalla de inicio para que pueda ser accesible sin internet y sin abrir al navegador.
Ventajas PWA
Antes era muy difícil poder comparar la riqueza visual y las capacidades entre las aplicaciones nativas y las aplicaciones web. Ahora es diferente, ya que no solo disponemos de media queries y código responsivo que nos ayudan a seleccionar la imagen en la resolución correcta según el tamaño de la pantalla. Sino que también podemos ver que la brecha entre las capacidades de una aplicación nativa y una aplicación web es cada vez más corta.
En el gráfico podemos ver un contraste entre las altas capacidades que tiene una aplicación nativa, de acceder por ejemplo a las notificaciones del teléfono, reproducir audio, acceder a los documentos del dispositivo, etc. Y vemos que también dichas aplicaciones carecen de una alta riqueza en el diseño y la experiencia de usuario, debido a que muchas veces dependen de los controles nativos implementados para la plataforma específica.
Sin embargo, cada vez hay mayor cantidad de Web APIs disponibles, para acceder a la cámara, a la galería de imágenes, reproducir audio, grabar desde el micrófono o la cámara de video, poder enviar notificaciones push y demás. Todo esto gracias al soporte que han dado los navegadores web a los celulares, por ejemplo, Google Chrome y Mozilla Firefox han ampliado las posibilidades de lo que se puede hacer entre una aplicación nativa y una aplicación web.
En el siguiente gráfico vemos cómo hay una tendencia de aumentar las capacidades de las aplicaciones web, conservando al mismo tiempo la riqueza que provee HTML y CSS.
Esto nos permite ahora pensar en Aplicaciones Híbridas, las cuales residen en una base web y son capaces de portarse entre múltiples dispositivos, sin tener que lidiar con controles específicos del dispositivo y estar haciendo múltiples desarrollos por separado.
Requisitos técnicos de PWA
Hay tres requisitos mínimos para comenzar a construir Aplicaciones Web Progresivas.
- Manifiesto — Define los metadatos utilizados al enviar la aplicación a la pantalla de inicio (nombre de la aplicación, iconos, etc).
- Service Worker — Define el proceso de instalación, archivos de caché, resuelve las peticiones offline, etc.
- Dominio HTTPS — Garantiza seguridad en las transacciones web (cifrado oculto). Le garantiza a los ecosistemas y usuarios ambientes seguros sin peticiones abiertas dónde se puedan filtrar datos no cifrados.
Conclusiones
Las Aplicaciones Web Progresivas son la forma de optimizar los sitios web para dar una experiencia más cercana a la nativa en los dispositivos móviles. Los factores más importantes que resuelven son los siguientes.
- Bajo consumo en el uso de recursos adquiridos. Mediante el caché se consigue retener todos los recursos pertenecientes a las interfaces, de tal modo que sólo se adquieren los datos puramente necesarios dentro de la aplicación (consultas web, imágenes dinámicas, etc).
- Experiencia fuera de línea. Provee la capacidad de acceder a las APIs del dispositivo y recursos instalados, sin la necesidad de usar internet para operar, por ejemplo, algún juego que no requiera internet, algún catálogo de productos que pueda consultarse sin internet, etc.
- Aplicaciones que no requieren instalación. Muchos de los usuarios pasan de usar una aplicación por el simple hecho de tener que instalarla.
