Cómo crear una Progressive Web App (PWA) de tu sitio WordPress

Si alguna vez has analizado tu web desde el motor Lighthouse de Google, el que usa PageSpeed Insights para medir las métricas web principales de tu web, habrás visto posiblemente que hay un parámetro de mejor denominado Progressive Web App (PWA), o Aplicación Web Progresiva, que es considerado una mejora en la usabilidad, especialmente en dispositivos móviles.

¿Qué son las Progressive Web Apps o PWAs?

No me voy a poner técnico, te resumo sus características/ventajas…

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.
Son independientes del dispositivo y sistema operativo.

Si quieres información técnica la tienes en la web de desarrollo de Mozilla.

¿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.
Manifiesto de la aplicación, un archivo JSON en el que se especifican parámetros de la PWA como nombre, icono, colores, etc.
Tiene 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.
Icono y banner personalizados.

¿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 e incluso instalable de navegar por tus contenidos.

Además, Google mide la disponibilidad de PWA en tu web, y puntuará mejor tu sitio en las Core Web Vitals.

Pero sobre todo es que es muy fácil, sobre todo gracias a WordPress y sus plugins.

¿Cómo convierto mi web WordPress en una PWA?

He estado analizando todos los plugins que hay en el directorio de plugins de WordPress y solamente he encontrado 2 plugins que funcionen a la perfección, que generen Progressive Web Apps sin errores, personalizables, y que lo hagan gratis.

Para poder generar una PWA válida de tu WordPress la aplicación debe cumplir con todos los requisitos de la lista que hemos visto antes, y permitirte personalizar su aspecto, iconos, etc.

Pero sobre todo, debe validar la comprobación de aplicaciones web progresivas del motor Lighthouse de Google, si quieres aprovechar todas sus ventajas.

Los plugins que consiguen todo esto son los siguientes…

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.

De hecho, 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 recomiendo 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.

Igual que el anterior, 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.

¿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 (mejor en ventana de incógnito) y elegir la opción de «Inspeccionar»

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?

Bueno, hechas todas las comprobaciones, ya solo queda comprobar si todo funciona, si cuando alguien visite tu web desde un móvil (Android en principio) le ofrece añadir la aplicación web progresiva a la pantalla de inicio de su dispositivo móvil, y se instala como cualquier otra aplicación móvil.