Una PWA (Progressive Web App-Aplicación Web Progresiva) es una web que luce y se comporta como una aplicación nativa (Las que se descargan de Google Play y App Store)
Esta es una aplicación creada a partir de las tecnologías web conocidas, como HTML, CSS y JavaScript, pero con una sensación y funcionalidad que compite con una aplicación nativa real. Uno de los principales atractivos de ésta tecnología es su bajo costo en desarrollo, ya que a partir de un solo código puedes generar tu versión App.
Cada vez más empresas y negocios consideran ésta alternativa dentro de sus herramientas estratégicas de negocio, incluso en tiempos de pandemia, a fin de aglutinar más clientes/ consumidores de sus marcas, dado que las PWA son calificadas como aplicaciones en los distintos motores de búsqueda, lo que hace mucho más fácil su acceso, además de otras características realmente interesantes tales como:
1. Total capacidad de respuesta y compatibilidad con el navegador.
2. Independencia de Conectividad. Puede trabajar en redes de baja calidad e inclusive offline
3. Interfaz similar a una aplicación
4. Notificaciones Push
5. Actualizaciones automáticas
6. Seguridad (solo funcionan con HTTPS)
7. Descubrimiento y fácil instalación. No se distribuyen usualmente a través de las tiendas de aplicaciones (aunque puedes hacerlo si lo deseas). En su lugar, estas aplicaciones se pueden compartir a través de una URL para que se puedan encontrar fácilmente. La instalación es simple e implica visitar un sitio y agregarlo a la pantalla de inicio de un dispositivo.
¿Cómo instalar una PWA?
Instalar una Aplicación Web Progresiva es muy sencillo, pues como tal es enviar un acceso directo a una página web al escritorio de dispositivo. Únicamente debes considerar que no todas las web tienen su app progresiva.
Puedes experimentar la instalación con los websites de alguna de las siguientes marcas, que han optado por ésta opción para sus apps de negocios: Starbucks, Twitter, Alibaba, Telegram, AliExpress, entre otros.
| Android | IOS |
| 1. Abre Google Chrome | 1. Accede a la PWA a través de su URL desde Safari |
| 2. Introduce la dirección web de la página que quieres usar como PWA | 2. Haz clic sobre el botón de compartir en Safari |
| 3. Vete al botón menú (el de los tres puntos) | 3. Haz clic sobre “Añadir a la pantalla de inicio” |
| 4. Selecciona la opción de Añadir a pantalla de inicio | 4. Verifica que el nombre que aparece en la pantalla de inicio te conviene. Modifícalo si es necesario y haz clic sobre \»Añadir\». |
| 5. Selecciona el nombre con el que quieres enviarla |
Diferencias entre una aplicación nativa – una web responsive – una App híbrida–PWA
Una aplicación nativa, como las que descarga de la App Store de Apple o la Play Store de Google, a menudo se crea en un lenguaje de programación específico para esa plataforma. Entonces, para las aplicaciones de iOS, sería Swift y para las aplicaciones de Android, Java. Si desea crear una aplicación para esas plataformas, necesita conocer la tecnología.
Una aplicación web progresiva, se ejecuta en el navegador y, una vez guardado en la pantalla de inicio, funciona como una aplicación nativa. Incluso obtiene acceso al hardware y software subyacentes a los que el navegador no puede acceder por razones de seguridad. Si la PWA funciona bien, los usuarios nunca sabrán que están usando una aplicación basada en la web en lugar de una nativa.
A diferencia de las aplicaciones nativas el progressive accede inicialmente desde el navegador y no de la descarga en el dispositivo. Funciona con todos los navegadores, pero todavía hay navegadores que no están adaptados a la tecnología y en estos casos funcionará como una web responsive (Safari). Las webs responsive es una adaptación del diseño para todas las plataformas y las webs progressive tienen funcionalidades de app web.
En relación a una App híbrida vs una PWA la diferencia radica en la experiencia de usuario, ya que en cuanto a desarrollo el esfuerzo se minimiza con ambas opciones, pues con un solo código (React Native en el caso de las híbridas) es posible crear la versión app. Por su puesto, la distribución de App Híbrida es a través de Google Play y App Store principalmente.
Diferencias entre una App nativa /híbrida y una PWA (UX)
Con un ejemplo sencillo podemos describir las diferencias en términos de experiencia de usuario:
EXPERIENCIA CON APP NATIVA/HÍBRIDAEXPERIENCIA CON PWA· Maria se encuentra de vacaciones fuera de la ciudad, con una conexión 3G limitada. Maria decide conocer un museo de la localidad.· Maria se encuentra de vacaciones fuera de la ciudad con una conexión 3G limitada. Maria decide conocer un museo de la localidad..· Una amiga le envía un link para que reserve su entrada.· Una amiga le envía un link de reserva de entrada a lugares turísticos· Maria abre el link, y le aparece un diálogo para descargar la aplicación nativa de reserva de entrada a sitios turísticos, sin ella, Maria no puede hacer nada con ese link. Maria abre el link en su navegador (una web), y realiza su reserva de su entrada al museo rápidamente sin necesidad de descargar la aplicación.· Maria acepta, y pulsa sobre “Descargar Aplicación”.· · Maria tarda 10 minutos en descargar una aplicación de 58MB para reservar su entrada.· Maria debe volver a buscar el museo que le ha enviado su amiga, o volver a pulsar el link que le mandó su amiga hace 15 minutos.· Maria accede a la página del museo y realiza la reserva de su entrada.
PWA ó App Nativa… Cuál elegir?
En realidad, un enfoque no es mejor que el otro. Se trata de cual tecnología se adapta mejor a tu proyecto. Una PWA definitivamente resulta mucho más económica en su desarrollo mientras una app nativa supone retos en éste ámbito. Si tu meta es capitalizar la mayor cantidad de usuarios y tu presupuesto es ajustado probablemente una PWA te vendría bien. Si por el contrario tu objetivo es crear una App que requiere el uso ilimitado del hardware, entonces tu opción es una App Nativa.
Todo va a depender del contenido, el tipo de negocio, presupuesto y las exigencias del producto.
Frameworks recomendados
· Angular versión 6 (en adelante): Con escasos comandos convierte un desarrollo angular en una PWA. Algo similar ocurre con React, es posible crear una PWA fácilmente usando el paquete create-react-app.
· Ionic 4: ofrece un completo framework que facilita ésta conversión. También Ionic está integrado con Angular y brinda soporte a React y Vue.
Con Amor 💙
María Gabriela Tenreiro