PWA es el acrónimo de Progressive Web Application, término acuñado por el matrimonio de Alex Russell y Frances Berriman para designar a un sitio web en la piel de una app.
Esto, porque una PWA es básicamente un sitio web que se comporta y se siente como una aplicación. Puede ser instalada en el dispositivo del usuario desde el navegador y, gracias a las Service Workers, puede funcionar sin conexión y enviar notificaciones push, entre otras características.
Las PWA se construyen utilizando tecnologías web estándar (HTML, CSS y JavaScript) y son servidas a través de la web, lo que significa que se pueden actualizar sin requerir que el usuario descargue una actualización desde una tienda de aplicaciones.
Cuando abres esta aplicación, que ahora se encuentra entre los íconos de las otras apps de tu celular, puedes navegar por la misma experiencia que estabas haciendo en tu navegador, pero ahora directamente en tu teléfono móvil.
“En términos de UX, ves el ícono de una App en tu celular desde el cual puedes navegar en el sitio. Es como tenerlo en un bookmark”, señala José Estévez, líder técnico de Fusiona.
Qué es una PWA
Alex Russell, PM de Microsoft Edge, y su esposa Frances Berriman, consultora independiente de productos y tecnología, acuñaron el término aplicaciones web progresivas (PWA) para describir este tipo de desarrollo a medio camino entre una aplicación móvil y una página web.
La pareja tuvo en cuenta el siguiente contexto: según ComScore, los usuarios pasan la mayor parte de su tiempo en aplicaciones nativas, pero el alcance de la web móvil es casi tres veces mayor que éstas. Para llegar a ese gran segmento que navega desde el celular fuera de las apps nativas o híbridas, pensaron en las PWA.
En este episodio del programa JavaScrip Jam pueden verlos explayarse sobre el estado actual y futuro de las PWA.
Ventajas y desventajas de una Aplicación Web Progresiva
Existen varias razones para utilizar una aplicación web progresiva, entre ellas:
- Velocidad: las PWA brindan experiencias que son rápidas. Desde el momento en que un usuario descarga una aplicación hasta el momento en que comienza a interactuar con ella, todo sucede muy rápido.
- Responsive: las PWA se adaptan a diferentes tamaños de pantalla de escritorio, dispositivos móviles y tabletas.
- Seguro: las PWA utilizan protocolos HTTPS para evitar que las conexiones alteren el contenido de la aplicación y muestren la información de los usuarios.
- Compatibilidad con SEO: las PWA se identifican como “aplicaciones” y, por lo tanto, los motores de búsqueda pueden indexarlas.
- Funcionan sin conexión: las PWA pueden funcionar sin conexión o cuando no hay conexión. Una vez que se ha restablecido la conexión, la PWA sincroniza todos los datos nuevos.
Desventajas
- iOS: no hay compatibilidad con PWA en dispositivos iOS que ejecutan la versión 11.3 y otras versiones anteriores de iOS.
- Fuera de tiendas de aplicaciones: las tiendas de aplicaciones no contienen ninguna PWA. Los usuarios deben visitar el sitio web primero para agregar la PWA en la pantalla de su teléfono.
- Consumo de batería: las PWA consumen más batería que las aplicaciones nativas.
- Funciones del dispositivo: las PWA no pueden acceder a varias funciones de los dispositivos móviles, como NFC, Bluetooth y controles avanzados de la cámara.
Diferencias entre PWA y aplicaciones nativas e híbridas
Una diferencia fundamental entre las PWA y las aplicaciones nativas es cómo los usuarios pueden acceder a ellas. Como señalamos arriba, las aplicaciones nativas existen dentro de la tienda de aplicaciones. Una vez instalada, los usuarios pueden ver la aplicación en la pantalla de inicio.
Las PWA no se encuentran en la tienda de aplicaciones y necesitan que el usuario ingrese la URL de las PWA en el navegador móvil. Una vez descargada, el usuario puede agregar la PWA a su pantalla de inicio.
Disponibilidad multiplataforma
Al desarrollar una aplicación nativa, se presta mayor atención a darle forma a una aplicación para una plataforma o dispositivo móvil específico. Los desarrolladores no tienen que dedicar mucho tiempo a la compatibilidad entre navegadores o plataformas.
Los desarrolladores adoptan otro enfoque al desarrollar PWA y se centran en crear una instancia responsiva de la PWA. Cuando se publica, la instancia depende del navegador del usuario para mostrar la PWA correctamente en el tamaño de pantalla del dispositivo.
Al trabajar con PWA, los desarrolladores deberían lograr un equilibrio entre lo que los usuarios encuentran en una aplicación nativa y un sitio web responsivo. Es muy recomendable al desarrollar PWA seguir las guías de verificación de Google para que todo fluya correctamente.
PWA y apps híbridas
Una aplicación híbrida es una aplicación que se crea utilizando tecnologías web (HTML, CSS y JavaScript), pero se ejecuta dentro de una aplicación nativa y tiene acceso a las funciones nativas del dispositivo.
Esto se logra utilizando un contenedor nativo (como WebView en Android o UIWebView en iOS) y un puente JavaScript/Nativo para acceder a las funciones del dispositivo, como la cámara o el acelerómetro.
A diferencia de las PWA, las aplicaciones híbridas se distribuyen a través de las tiendas de aplicaciones, al igual que las aplicaciones nativas. Ejemplos de frameworks para desarrollar aplicaciones híbridas son Cordova (también conocido como PhoneGap) e Ionic.
“Las PWA tienen varias limitaciones y se orientan a cosas diferentes en comparación con una aplicación híbrida o nativa. Son una suerte de web incrustada, que tiene como ventajas:
-Libertad de modificación: si quieres modificar algo lo haces directamente en el código y servidores, no debes pasar por un ente revisor como App Store o Google Play.
-Es mucho más barata que una aplicación, aunque por lo mismo, lo que puedes llegar a hacer es más limitado…”, señala José Estévez.
Cuándo utilizar una PWA
Ahora, luego de conocer qué es una PWA, sus ventajas y desventajas en comparación con apps nativas e híbridas, es momento de discernir cuándo conviene utilizarlas.
Tanto las aplicaciones web progresivas como las aplicaciones nativas o híbridas tienen sus fortalezas y debilidades. Al elegir entre ellas, debes considerar qué aplicación se adaptará mejor a las necesidades de tu proyecto.
Considera una PWA si:
- Tienes un presupuesto pequeño y poco tiempo: las PWA requieren menos tiempo y dinero para desarrollarse.
- Quieres mejorar tu SEO y conocimiento de marca: las PWA llegan a una audiencia amplia y son similares a un sitio web.
- Quieres una aplicación sencilla para tu usuario: las PWA no requieren descargas y te permiten interactuar con los usuarios mediante notificaciones automáticas.
Considera una aplicación nativa si:
- Deseas utilizar funciones avanzadas de teléfonos inteligentes, sensores y georeferencia.
- Quieres construir una marca creíble publicando aplicaciones dentro de las tiendas de aplicaciones, lo que permite que las aplicaciones nativas contengan más opciones de seguridad y aumenten su confiabilidad ante el usuario.
“Creo que el principal criterio para determinar si utilizar una PWA o no es, el objetivo de la aplicación. Si tu app necesita utilizar el hardware del equipo como la cámara o el GPS, la recomendación es desarrollar una app nativa o en segundo término una app híbrida.
Por el contrario, si vas a desarrollar un sitio informativo o una vitrina de productos, una PWA cumple”, finaliza José Estévez.
Si quieres profundizar en desarrollo de apps, te invitamos a leer nuestro artículo sobre el framework Ionic para el desarrollo de apps, conocer nuestro servicio de desarrollo de apps y si quieres aprender más sobre aplicaciones webs progresivas, este curso de Google sobre PWA es una excelente opción.