Tabla de contenidos
¿Que es una web app progresiva? (PWA)
Los PWA o Progressive Web Apps son sitios móviles construidos en un framework de JS que ofrecen a los usuarios una experiencia similar a la aplicación nativa.
Las PWA son páginas web normales pero tienen algunas funciones de una aplicación móvil. Para ser considerado un PWA, un sitio debe lograr una experiencia de usuario como esta:
- Rápida: carga en al menos de 3 segundos.
- Responsiva: funciona en diferentes dispositivos de diferentes formas y tamaños.
- Confiable: se carga rápidamente incluso si hay problemas con la red.
No es necesario volver a codificar o programar el sitio para agregar la funcionalidad PWA. Si tu sitio está creado en WordPress tienes herramientas y plugins que ayudan a convertir tu sitio en un PWA.
Beneficios de crear un PWA
- No tienen revisiones de tienda de aplicaciones como App Store o Google Play Store.
- PWA se ejecuta directamente en el navegador móvil.
- Puedes iniciar o actualizar el PWA sin interferencia externa.
- Los usuarios pueden acceder al sitio a través de diferentes plataformas.
- PWA funciona en todo tipo de dispositivos.
- No es necesario descargar datos, los usuarios ahorran en data y almacenamiento.
Si un sitio en promedio tarda más de 3 segundos en cargarse, es probable que esté perdiendo buena cantidad de sus visitantes. Con un PWA no vas a tener problema de velocidades de carga, ya que pueden guardar el contenido localmente y se puede acceder a este sin conexión.
Los PWA reciben más visitas y los usuarios pasan más tiempo en ellos que que los sitios webs amigables y responsivos, pues según Google, los PWA con UI/UX que imitan aplicaciones nativas suelen enganchar a los usuarios, logrando mayores conversiones que los sitios responsivos estándar.
Para construir un PWA puedes usar un plugin de WordPress, pues ofrece a los usuarios una experiencia similar a la de usar una aplicación web en un móvil. Si tienes un sitio de WordPress puedes producir aplicaciones web muy bien diseñadas y altamente funcionales en pocos pasos.
También se puede construir un PWA desde cero usando React JS, Vue.js o AngularJS. Cada método tiene sus ventajas y desventajas según lo que se quiera obtener. En muchos casos los desarrolladores prefieren AngularJS porque pueden combinarlo con Ionic, pues este tiene un framework para desarrollar aplicaciones móviles y utiliza esta tecnología para construir un PWA.
Para obtener la máxima rentabilidad se deben seguir los estándares de PWA. Google creó una lista de verificación de que es lo que se necesita para ser un PWA.
Características principales de una PWA
- Las páginas funcionan en dispositivos móviles y en tabletas (son aplicaciones responsive).
- El sitio funciona con diferentes navegadores.
- Todas las URL se cargan cuando están sin conexión.
- La primera carga es super rápida incluso en redes 3G.
- El sitio web debe funcionar bajo HTTPS sino el PWA no funcionará.
Para comprobar si un sitio tiene alguna característica de PWA puede hacer lo siguiente: puedes entrar a opciones de Google Chrome, y luego ir a Developer Tools (Herramientas de desarrollador). Aparecerá un explorador de opciones, nos dirigimos a la pestaña Audits (Auditoría), aparecerán unas opciones como puedes ver a continuación. Damos clic en Run audits, seleccionamos Mobile y luego se realizarán las auditorías:
Empezará a funcionar como en la imagen se ve a continuación:
Después que termine la auditoría podremos ver los resultados:
En este caso este sitio web si está preparado para PWA.
Para que un PWA sea óptimo en calidad debe incluir las siguientes características:
- Información de metadatos de schema.org donde sea apropiado.
- Contenido del sitio indexado por Google.
- Metadatos sociales, donde sea apropiado.
- Notificaciones push oportunas y relevantes.
- API history en todas las páginas.
- Transiciones de contenido suaves a medida que se carguen las páginas.
- Contenido compartible.
- Opciones para desactivar las notificaciones.
- Interfaces de usuario sencillas para realizar pagos u otras transacciones.
Es importante que antes de lanzar un PWA se realicen las pruebas correspondientes a cada elemento, para evitar comentarios negativos de los usuarios.
Este es el checklist que nos brinda Google para realizar una PWA, lo podemos encontrar en Baseline Progresive Web App Checklist:
En el caso de WordPress tenemos el plugin “Super Progresive Web Apps”, es uno de los plugins más populares, viene con personalización de características y la posibilidad de crear sitios sin conexión.
En este plugin puede generarse un icono para la aplicación web, una vez instalado ofrece a los usuarios la opción agregar una pantalla de inicio. Con esta funcionalidad podemos instalar el sitio en la pantalla de inicio del dispositivo móvil (se instalará un icono si es que se confirma la instalación). Una vez instalado el usuario puede navegar dentro del sitio incluso estando offline.
En caso que no tengas mucho conocimiento de programación, o no cuentas con alguien que tenga los skills requeridos puedes intentar probar este plugin. SuperPWA automáticamente añade funcionalidad PWA a tu sitio de WordPress.
Puedes personalizar las propiedades tales como los valores de la página de inicio, así como elegir un icono para tu aplicación, crear custom notifications, etc.
¿En qué casos no se aplica un PWA a un sitio?
En muchos aspectos hay situaciones externas que influyen a que un PWA no sea suficiente para tu negocio, podríamos mencionar las limitaciones tales como: presupuesto, la visión de crecimiento y estrategia de marketing. Todo esto afecta la optimización del sitio para dispositivos móviles.
- Acceso a funciones de dispositivo: las aplicaciones de Android o iOS, permiten acceso a funciones como la cámara del teléfono, micrófono, GPS u otra característica del hardware, sin embargo un PWA no tiene esa característica. Si deseas que una aplicación tenga interactividad con el hardware de tu teléfono, pues una aplicación nativa sería la solución.
- Notificaciones push: El navegador Safari no admite las notificaciones push de los PWA, sincronización background, service workers en webviews, ni captura de links.
- Capacidad offline: Un PWA ofrece ciertas partes de experiencia aun sin contar con datos en tu línea de teléfono, pero esto solo es posible si el usuario ha visitado anteriormente el sitio (y el contenido es guardado en la caché). Es muy probable que un PWA no pueda conectarse a todas las partes de la aplicación a menos que exista una conexión presente.
Conclusión
Los PWA ofrecen una opción para mejorar la experiencia móvil de sus usuarios y mejorar las conversiones, pues actualmente las personas consumen contenido móvil más veces que un equipo de escritorio. Las empresas tienden a crear mayor competencia en el tema de atención del usuario con otras aplicaciones del teléfono y sus navegadores.
Si tienes conocimientos de tecnología y desarrollo puedes controlar el proceso del desarrollo de un PWA de forma manual. En cambio, si quieres ahorrar tiempo y manejas tu sitio en WordPress, cuentas con complementos que reducen el tiempo de aprendizaje y simplifica la creación de un PWA.
Deja una respuesta