Progressive Web App (PWA): tu sitio wordpress como una aplicación para dispositivos móviles.
Progressive Web App (PWA): tu sitio wordpress como una aplicación para dispositivos móviles.
¿Qué son las Progressive Web Apps o PWAs?
En términos simples, una PWA (Progressive Web App) funciona de esta manera: se activa un mensaje, para que cuando se ingresa a tu sitio wordpress desde cualquier dispositivo móvil, se invite a agregar un Icono de acceso al mismo en la pantalla del celular o tableta; luego cuando el usuario presione sobre ese icono, no sólo abrirá automáticamente tu página (como si fuera una aplicación), sino que la navegará mucho mas rápido e incluso cuando el cliente no tenga acceso a internet, pues todo lo que haya visualizado previamente de tu site quedará automáticamente en el caché del dispositivo.
En otras palabras, es una forma de conseguir una velocidad de navegación muchísimo mayor en celulares y tabletas, además de presentar tu site en estos dispositivos de la forma nativa en que todo se mueve allí: como si fuese una aplicación, sin tener que desarrollar necesariamente una app, tocar nada de código, tener que hacer una versión responsive adicional de tu página y en algunos casos ¡hasta gratis!…¿cómo?…a través de como se consigue todo (o al menos casi todo) en wordpress: un plugin.
Sin ponernos técnicos, resumimos las características y ventajas de las PWA…
- Una PWA facilita que los motores de búsqueda descubran tu web.
- Están especialmente optimizadas para dispositivos móviles, tanto en aspecto como en velocidad.
- Se pueden instalar en los dispositivos móviles, añadiendo un icono a la pantalla para un fácil acceso.
- Se puede navegar por los contenidos incluso estando desconectado, solo con haberlos visitado una vez.
- Funcionan en cualquier tipo de dispositivo móvil y sistema operativo.
- Las PWA son atractivas, se sienten como una aplicación natural en cualquier dispositivo y brindan una experiencia de usuario inigualable.
¿Es una PWA una aplicación nativa para móviles?
No, son cosas distintas, una Progressive Web App es mucho más sencilla de crear, instalar y usar que una aplicación nativa, pero también menos personalizable.
Lo mejor de la PWAs es que las creas muy fácilmente, y se instalan en un clic en los dispositivos móviles.
¿Cuáles son los requisitos para poder crear una PWA de mi WordPress?
La lista de los requisitos para que una Progressive Web App sea válida no es muy larga, pero todos los puntos son imprescindibles:
- Tu web debe ser segura, servirse en HTTPS con un certificado SSL válido y activo.
- Todo el tráfico HTTP debe estar redirigido hacia HTTPS.
- Web App Manifest, un archivo JSON en el que se especifican parámetros de la PWA como nombre, icono, colores, etc. (esto se hace ajustando estos parámetros dentro de las opciones del plugin PWA que elijas usar)
- Tienes que activar lo que se conoce como Service Worker, un Javascript que se instala en el navegador para que se pueda usar la PWA sin conexión (algunos plugins cobran por esta opción, otros lo ofrecen gratuitamente).
- Icono y banner personalizados (ajustables dentro de las opciones del plugin PWA que actives).
¿Por qué debería convertir mi WordPress en una PWA?
Vistas las ventajas de las aplicaciones web progresivas, si tienes usuarios que visitan tu web desde dispositivos móviles no deberías desestimar ofrecerles un modo más rápido, instalable, optimizado y nativo de presentarle tu contenido.
Además, Google mide la disponibilidad de PWA en tu web, y puntuará mejor tu sitio en las Core Web Vitals.
Pero sobre todo porque es muy fácil, gracias a WordPress y sus plugins.
¿Cómo convierto mi web WordPress en una PWA?
Hay varias opciones en el directorio de plugins WordPress que generan Progressive Web Apps, personalizables, y en algunos casos sin costo, lo más importante es que la que elijas debe validar la comprobación de aplicaciones web progresivas del motor Lighthouse de Google (más adelante te explicaremos cómo se hace esta comprobación), si quieres aprovechar todas sus ventajas.
Los 2 plugins más resaltantes que conseguimos fueron estos…
PWA for WP
El plugin es muy sencillo de configurar, e incluso con los ajustes por defecto genera una PWA de tu web, con todos sus requisitos.
Estas son sus características/ventajas más resaltantes:
- Compatibilidad con AMP : compatibilidad total con PWA para AMP. Funciona bien con AMPforWP y AMP para WordPress de Automattic.
- Soporte multisitio
- Estadísticas
- Estrategia de almacenamiento en caché
- Opción Cache Expire
- Service Worker: almacenamiento en caché para servir más rápido el contenido.
- Banners de aplicaciones en la pantalla de inicio : notifica automáticamente a tus visitantes para que activen la versión app de tu sitio web, incorporándola directamente en la lista de aplicaciones del dispositivo y sumando un icono (personalizable) en la pantalla del equipo, para el acceso directo a tu site.
- Web App Manifest: incorpora automáticamente esta funcionalidad necesaria para implementar la PWA.
- Soporte sin conexión : la versión PWA de tu sitio se cargará rápidamente, incluso cuando el usuario no esté conectado. Una vez que el usuario esté en línea, volverá a actualizar el contenido. También lleva un registro de las estadísticas de conexión..
- Pantalla completa y pantalla de bienvenida : cuando abre la versión de PWA desde el móvil, se cargará en pantalla completa sin ninguna barra de herramientas del navegador, lo que le da una sensación de aplicación nativa en la versión de PWA. También hay una pantalla de bienvenida que es totalmente personalizable.
- Desarrollo continuo : Trabajaremos arduamente para desarrollar continuamente esta solución PWA y lanzar actualizaciones constantemente para que sus formularios puedan continuar funcionando sin problemas.
- Probado con Google Lighthouse.
Nada más instalarlo y activarlo te lleva a su página de ajustes, donde verás que está ya todo activo y funcionando.
Pero te recomendamos pasarte por sus pestañas de ajustes, especialmente la de configuración y la de ajustes avanzados, donde podrás configurar todos los aspectos visuales y funcionales de la aplicación web progresiva de tu sitio.
Y también es muy interesante que actives otras características como la gestión de caché, el banner personalizado, el cargador avanzado, o incluso seguimiento de Analytics y avisos Push.
Es un gran plugin, fácil de configurar, y gratis. No se puede pedir más.
Super Progressive Web Apps
Otra fantástica opción para convertir tu WordPress en una PWA es este otro plugin, y en realidad no notarás gran diferencia con el anterior, es casi una cuestión de gustos de interfaz elegir entre uno u otro.
Una vez que SuperPWA esté instalado, los usuarios que naveguen por tu sitio wordpress desde un dispositivo móvil verán un aviso de “Agregar a la pantalla de inicio” (en la parte inferior de la pantalla) y podrán “instalar tu sitio web” en la pantalla de inicio de su dispositivo. ¡Cada página visitada se almacena localmente y estará disponible para leer incluso cuando estén desconectados!
Lo hace todo y bien, sin fallos, y cumpliendo todos los requisitos de las PWA, nada más activarlo.
Es interesante también pasarte por los ajustes generales y avanzados para configurar bien tu PWA.
E, igual que el otro plugin, también puedes añadirle funcionalidades y configurarlas.
Funciona de maravilla, es fácil de configurar y activa todo lo necesario.
Hay otras opciones adicionales o que complementan la aplicación de PWA, por si deseas igual darles un vistazo, éstas son:
¿Cómo compruebo si mi Progressive Web App (PWA) es válida?
El modo más sencillo y rápido de comprobar si tu WordPress ha creado una aplicación web progresiva tras activar (y si quieres configurar) el plugin que elijas, es usar el motor de Lighthouse integrado en el navegador Chrome.
Solo tienes que hacer clic derecho en cualquier parte de tu web) y elegir la opción de «Inspeccionar», o simplemente presionar la tecla F12 una vez estando en tu sitio.
Esto abrirá la consola para desarrolladores de Google Chrome, donde debes abrir la pestaña llamada «Lighthouse», donde puedes medir las métricas web principales de tu web.
Para probar si has creado bien la PWA activa solo la casilla de «Aplicación web progresiva» y pulsa en el botón para generar el informe. Si todo ha ido bien deberías pasar todas las comprobaciones, como en la siguiente captura.
¿Cómo pruebo la PWA de mi WordPress?
Hecha la comprobación anterior, ya solo queda confirmar si todo funciona, si cuando alguien visite tu web desde un móvil (Android principalmente) le ofrece añadir la aplicación web progresiva a la pantalla de inicio de su dispositivo, y se instala como cualquier otra aplicación, entonces ¡ya está todo listo!.
¡Míranos!
 |  |  |