Cómo convertir tu sitio WordPress en una Progressive Web App (PWA) – [2 Métodos]

Puntos clave

• La funcionalidad de la PWA se basa en el Service Worker para el almacenamiento en caché sin conexión, en el Manifiesto de la Web App para la instalabilidad y la apariencia, y en HTTPS para el funcionamiento seguro.
• El rendimiento inicial de la PWA antes de que se active la caché del Service Worker depende en gran medida de un alojamiento de alto rendimiento con capas de caché optimizadas, como Varnish y Redis, para conseguir puntuaciones LCP bajas.
• El error más común son unas reglas de almacenamiento en caché deficientes: el uso de estrategias inteligentes como Stale While Revalidate mantiene rápidos los activos estáticos al tiempo que garantiza que el contenido dinámico se mantiene fresco.

La velocidad del sitio y la implicación del usuario importan. Afecta directamente a tu cuenta de resultados. Los estudios lo confirman: si pierdes un segundo en el tiempo de carga, pierdes el 7% de las ventas. Eso se acumula rápidamente en cualquier sitio con mucho tráfico.

Los sitios de WordPress lo tienen difícil. A menudo utilizan temas pesados y toneladas de plugins. Mantenerlos rápidos y con capacidad de respuesta es siempre una lucha.

Aquí es donde aparecen las Aplicaciones Web Progresivas (PWA). Una PWA engaña a tu sitio WordPress para que actúe como una aplicación real. Funciona cuando no estás conectado. Envía alertas push. Proporciona una sensación fluida en teléfonos u ordenadores.

En esta guía veremos cómo crear uno. Veremos dos enfoques: el manual y el de los plugins. También te contaré algunos errores PWA que debes evitar. Y por qué tu elección de alojamiento es un factor importante. Al final, tendrás un plan claro para convertir tu sitio de WordPress en una PWA rápida que funcione rápido y mantenga a los usuarios enganchados.

¿Qué es exactamente una aplicación web progresiva (PWA)?

Una Aplicación Web Progresiva es simplemente un sitio web que parece una aplicación móvil. Tienes funciones que normalmente sólo se encuentran en las aplicaciones nativas, pero se ejecutan directamente en el navegador. No necesitas descargar la tienda de aplicaciones. Sigues teniendo acceso sin conexión, mensajes push y puedes anclarla a tu pantalla de inicio.

Hay tres tecnologías principales que lo hacen posible:

En primer lugar, los Trabajadores de Servicio. Son scripts que se ejecutan solos en segundo plano. Se encargan del almacenamiento en caché del contenido, de las actualizaciones en segundo plano y de activar las notificaciones push. Esto es lo que permite que tu sitio funcione incluso cuando la conexión es pésima.

En segundo lugar, el Manifiesto de la aplicación web. Se trata de un simple archivo JSON. Dicta la apariencia y el comportamiento de la PWA. Establece el nombre, los iconos, la página de inicio y cómo se muestra. El manifiesto es lo que permite que el sitio se instale como el icono de una app.

Tercero, HTTPS. La seguridad es vital. HTTPS garantiza que todos los datos que van y vienen son privados y están encriptados. Los trabajadores de servicios lo requieren de todos modos, así que es imprescindible para que la PWA funcione.

Para que un sitio cuente realmente como PWA, tiene que serlo:

• Rápido: Debe cargarse en tres segundos o menos. En serio.
• Fiable: Tiene que funcionar incluso con una red irregular o lenta.
• Atractivo: Tiene que ser agradable de usar, hacer que la gente quiera quedarse.
• Responsive: Debe verse bien en cualquier tamaño de pantalla o dispositivo.

¿Y lo mejor? No tienes que reconstruir WordPress para añadir funciones PWA. Puedes configurarlo a mano o simplemente instalar un plugin. Es un camino fácil para añadir el modo sin conexión, notificaciones y esa sensación limpia y similar a la de una aplicación.

Una PWA simplemente añade potentes capacidades a tu sitio WordPress existente. Mejora la experiencia del usuario, aumenta la participación y hace que el sitio sea mucho más estable y flexible en general.

El alojamiento más rápido compatible con las PWA de WordPress

El alojamiento gestionado de WordPress de Cloudways proporciona el rendimiento, el almacenamiento en caché y el control de servidor necesarios para ejecutar Aplicaciones Web Progresivas sin problemas en WordPress.

¡Pruébalo gratis!

Características principales de una PWA de WordPress

Las PWA aportan varias características que los sitios web normales simplemente no tienen. Esto demuestra por qué son tan valiosas para los sitios de WordPress.

• Acceso sin conexión: Las PWA pueden extraer páginas que un usuario ya ha visitado, incluso si Internet está caído. Los trabajadores de servicio se encargan del almacenamiento en caché. Esto es muy importante para tiendas o blogs en los que el acceso constante es importante.
• Sensación de aplicación: actúan como un software nativo. La navegación es rápida, el movimiento es fluido y se adaptan instantáneamente a cada pantalla. Los usuarios tienen la sensación de estar ejecutando un software dedicado.
• Notificaciones Push: Puedes enviar alertas directamente a los usuarios que hayan instalado la PWA. Esto es genial para el compromiso, ya que atrae a la gente sin necesidad de enviarles un correo electrónico.
• Icono instalable: Los usuarios pueden poner el icono de la PWA directamente en la pantalla de inicio de su teléfono o escritorio. Se abre directamente como una aplicación, saltándose toda la barra del navegador. Esto facilita el acceso y el uso.

El conjunto de estas características hace que las PWA sean más cómodas, atractivas y fiables que los antiguos sitios web, pero siguen ofreciendo toda la apertura de la web.

Ventajas de convertir tu sitio WordPress en una PWA

Convertir tu sitio WordPress en una Progressive Web App hace algo más que darle un aspecto de aplicación. Resuelve problemas reales para los usuarios y el propietario del sitio. Soluciona la carga lenta. Maneja las malas conexiones a Internet. Aumenta el tiempo que la gente se queda y la frecuencia con la que vuelve.

Rendimiento más rápido y tiempos de carga reducidos

Las PWA se cargan rápido. ¿Por qué? Los trabajadores de servicio almacenan en caché los archivos clave. Esto significa que las páginas se muestran casi instantáneamente, incluso en conexiones lentas. Un sitio más rápido hace que la gente permanezca más tiempo en tus páginas. Reduce las tasas de rebote. También ayuda a tu puntuación Core Web Vitals, que Google utiliza para clasificarte.

Mayor compromiso de los usuarios

Las notificaciones push y el acceso a la pantalla de inicio te permiten hablar directamente con tu público. Si diriges un blog, una tienda o un sitio para miembros, puedes alertar a los usuarios sobre nuevos artículos u ofertas sin utilizar el correo electrónico. Esto hace que más gente vuelva e interactúe más a menudo.

Acceso sin conexión para mayor fiabilidad

Los usuarios pueden ver las páginas que ya han visitado incluso cuando Internet está totalmente apagado. Los trabajadores de servicio gestionan los archivos y recursos almacenados en caché. Tu sitio sigue siendo funcional y fiable, incluso con redes inestables. Esto es especialmente bueno para sitios de gran contenido o tiendas donde obtener información es crucial.

Experiencia optimizada para móviles en todos los dispositivos

Las PWA actúan igual que las aplicaciones de teléfono en smartphones y tablets. Se adaptan a todas las pantallas. Navegan sin problemas. Tienen un aspecto pulido y profesional. Esto facilita el uso del sitio y ofrece a todos una experiencia fiable, independientemente del dispositivo que utilicen. En resumen, proporciona una experiencia optimizada para móviles a los usuarios.

Mejora del SEO y del rendimiento técnico

Como las PWA reducen los tiempos de carga de las páginas y mantienen el sitio interactivo, ayudan directamente a las métricas de los motores de búsqueda. Los sitios que son más rápidos y fiables obtienen mejores clasificaciones, más tráfico y generan más ventas.

Superar las limitaciones de los sitios web tradicionales

Las PWA no se detienen totalmente por la calidad de la red, a diferencia de los sitios web estándar. Ofrecen funciones offline. A diferencia de las aplicaciones nativas, no necesitan descargarse, instalarse ni actualizarse constantemente en la tienda de aplicaciones. Esto hace que las PWA sean una opción muy flexible para ofrecer experiencias de calidad en cualquier dispositivo.

Requisitos previos antes de crear una PWA de WordPress

Antes de empezar a convertir un sitio WordPress en una Progressive Web App, debes abordar varios pasos técnicos y prácticos. Si te ocupas de ellos por adelantado, ahorrarás mucho tiempo y evitarás problemas comunes durante el proceso de creación.

Requisito HTTPS

Las PWA exigen un origen seguro para funcionar. Los trabajadores de servicio (el núcleo del almacenamiento en caché fuera de línea y las tareas en segundo plano) sólo se ejecutan en HTTPS. Esto es necesario. Garantiza que los datos compartidos entre el usuario y tu sitio permanezcan encriptados y privados. Si utilizas un host como Cloudways, habilitar SSL te llevará un solo clic a través de su plataforma. Cumple este requisito fácilmente.

Elección de temas y plugins

No todos los temas o plugins de WordPress están preparados para PWA. Debes elegir temas ligeros y con capacidad de respuesta que sigan las reglas de codificación modernas. Los plugins compatibles con PWA (como Super Progressive Web Apps o PWA for WP) te ahorrarán enormes horas de desarrollo. Evita los temas con demasiados scripts o plugins que entren en conflicto con los service workers. Rompen las funciones PWA.

Almacenamiento en caché y estrategias offline

El almacenamiento en caché es la columna vertebral de tu PWA. Necesitas un plan sólido como una roca. Decide exactamente qué activos y páginas almacenar localmente. ¿Cuánto tiempo permanecerán en caché? ¿Cómo forzarás las actualizaciones? Los service workers pueden almacenar en caché recursos estáticos (CSS, JS, imágenes) y contenido dinámico, pero una planificación cuidadosa evita que los usuarios vean información antigua. Comprender estas estrategias es la clave para una experiencia offline fiable.

Consideraciones sobre el alojamiento

Tu elección de host desempeña un papel fundamental en el rendimiento y la estabilidad de la PWA. Busca estas características específicas:

• Servidores rápidos con almacenamiento SSD.
• Mecanismos de caché incorporados.
• Instalación SSL sencilla y fácil.
• Versiones actuales de PHP y de la base de datos compatibles con WordPress.

Cloudways, por ejemplo, proporciona todas estas características. Esto hace que satisfacer las demandas de las PWA manteniendo las cosas rápidas y estables sea mucho más sencillo.

Construir una PWA de WordPress (Plugin + Método Manual)

Hay dos formas principales de convertir tu sitio de WordPress en una PWA. Puedes utilizar un plugin para una configuración rápida y una codificación mínima, o puedes implementarlo manualmente para tener más control sobre las funciones y el comportamiento.

Ambos enfoques tienen sus ventajas, y elegir el método adecuado depende de tu nivel de comodidad técnica y de los requisitos del proyecto.

Cubriremos ambos métodos para que puedas decidir cuál elegir.

Método 1: Crear una PWA con un plugin

Antes de convertir tu sitio de WordPress en una PWA, es útil registrar la situación actual del sitio. Los pasos que se indican a continuación guían a los lectores a través de una sencilla comprobación de referencia que facilitará la comprensión de las mejoras más adelante.

Paso 1: Abre tu sitio en Chrome

Carga tu sitio en una ventana normal de Chrome. Esto te proporciona un punto de partida limpio para comparar el aspecto de la experiencia antes de añadir cualquier función de la PWA.

Paso 2: Inspecciona el sitio en DevTools

• Haz clic con el botón derecho en cualquier parte de la página y elige Inspeccionar.

• Abre la pestaña Aplicación.
• Mira las secciones de Trabajadores de Servicio y Manifiesto.

• La mayoría de los sitios de WordPress en esta fase no muestran ningún trabajador de servicio en ejecución.

• La sección del manifiesto también suele estar vacía. Estos campos vacíos simplemente confirman que las funciones de la PWA aún no están activas.

Paso 3: Ejecuta una auditoría Lighthouse PWA

• Pulsa F12 o haz clic con el botón derecho del ratón → Inspeccionar para abrir DevTools.
• Ve a la pestaña Faro.
• Selecciona las siguientes categorías:
• Rendimiento
• Accesibilidad
• Buenas prácticas
• SEO
• Elige tu dispositivo: Móvil (recomendado).
• Haz clic en Generar informe.
• Una vez cargado el informe Lighthouse, registra el seguimiento para compararlo después de implantar la PWA:
• Puntuación de rendimiento: velocidad general y capacidad de respuesta de tu sitio.
• Primera Pintura de Contenido (FCP) – tiempo que tarda en aparecer el primer contenido visible.
• Pintura de contenido más grande (LCP): tiempo que tarda en cargarse el elemento de contenido visible más grande.
• Tiempo total de bloqueo (TBT) : retrasos causados por la ejecución de JavaScript.
• Desplazamiento de diseño acumulativo (CLS): estabilidad visual de la página mientras se carga.

Paso 4: Prueba cómo se comporta el sitio fuera de línea

• Abre la pestaña Red en DevTools.
• Marca la opción de Fuera de línea.

• Recarga el sitio. Como el sitio no tiene capa de caché para uso offline en esta fase, la página no se cargará. Esto establece un claro contraste para cuando la PWA esté lista más adelante.

Paso 5: Previsualizar el diseño móvil

• Haz clic en el icono de la barra de herramientas Alternar dispositivo en DevTools.
• Visualiza el sitio en un tamaño de móvil común como el iPhone 12 o el Galaxy S21. Este paso es opcional, pero a muchos lectores les gusta capturar cómo se ve el sitio en móvil antes y después de la configuración de la PWA.

Implementación práctica de la PWA mediante un plugin

Ahora que tenemos nuestras líneas de base para nuestro sitio de WordPress, podemos pasar a la implementación real. Para este tutorial, utilizaré Cloudways para lanzar una aplicación de WordPress. Pero… los pasos para el plugin PWA se aplican a cualquier configuración de alojamiento.

Paso 1: Crear un sitio WordPress

Empieza lanzando un sitio WordPress nuevo. Como utilizo Cloudways, me conectaré a mi cuenta y abriré un nuevo servidor con una nueva instalación de WordPress.

¡Estupendo! Ahora mi servidor se ha desplegado con WordPress instalado en él.

Si utilizas un alojamiento diferente, simplemente instala WordPress en tu servidor o entorno local y asegúrate de que puedes acceder tanto al sitio como al panel de administración.

Paso 2: Activar HTTPS

Una conexión segura es necesaria para que cualquier PWA funcione correctamente. Así que para hacer esto dentro de Cloudways, abriré Gestión de Aplicaciones → Certificado SSL.

A continuación, seleccionaré Let’s Encrypt, introduciré mi dominio o el dominio temporal de Cloudways y solicitaré el certificado.

Una vez instalado, abriré mi sitio en el navegador y confirmaré que se carga con https://.

Y en mi caso, así es.

Si utilizas otro proveedor de alojamiento, asegúrate de que SSL también está activado. Si tu sitio se carga de forma segura a través de HTTPS, puedes continuar.

Paso 3: Prepara tu sitio WordPress

Ahora inicia sesión en el área de administración de WordPress.

Elimina los plugins de demostración que no necesites para que el sitio siga siendo ligero para esta demostración.

A continuación, instala y activa un plugin de caché. En Cloudways, Breeze es la opción recomendada. Ya está instalado, activado y preconfigurado por defecto.

Si estás en otro host, puedes utilizar el plugin de caché que prefieras. Deja activada la configuración de caché por defecto.

Paso 4: Instalar un plugin PWA

Para mantener las cosas sencillas y prácticas, utilizaremos un único plugin para este tutorial. Dos opciones sólidas son:

• Super Aplicaciones Web Progresivas para una configuración mínima
• PWA para WP para funciones más avanzadas como almacenamiento en caché sin conexión, control del trabajador de servicio y notificaciones push

Para este tutorial, utilizaremos PWA para WP.

Ve a Plugins → Añadir nuevo, busca el plugin, haz clic en Instalar ahora y, a continuación, en Activar.

Paso 5: Configurar el Manifiesto de la App

Tras la activación, abre la configuración del plugin desde el menú de administración de WordPress.

Configura los detalles básicos de la aplicación:

• Nombre y abreviatura de la app
• URL de inicio, que suele ser /
• Modo de visualización, configúralo como independiente o con una interfaz de usuario mínima para obtener una sensación similar a la de una aplicación.
• Color del tema y color de fondo
• Sube iconos de aplicaciones en varios tamaños, como 192×192 y 512×512

Guarda la configuración. Ahora el plugin generará y adjuntará automáticamente el archivo de manifiesto a tu sitio.

Paso 6: Habilitar el Service Worker y configurar el almacenamiento en caché

Ahora que el plugin PWA está activo, el siguiente paso es configurar el service worker y controlar cómo se almacena en caché tu sitio para su uso sin conexión.

Abre la sección de configuración de Service Worker o Caching del plugin.

Verás dos ajustes principales del tiempo de caché:

Tiempo de caché HTML

Esto controla cuánto tiempo permanecen en caché las páginas completas (como tu página de inicio y tus entradas) para su uso sin conexión.

Fijar: 3600 segundos

Esto equivale a 1 hora y es ideal para una demostración porque te permite mostrar el acceso sin conexión y, al mismo tiempo, dejar que el contenido se actualice rápidamente.

Tiempo de caché de JS, CSS y JSON

Controla durante cuánto tiempo se almacenan en caché los activos estáticos, como las hojas de estilo y los scripts.

Fijar: 86400 segundos

Esto equivale a 24 horas y mantiene tu sitio rápido y receptivo mientras está desconectado.

A continuación, busca el campo Versión del Trabajador de Servicios.

Este número de versión se utiliza para forzar las actualizaciones. Cada vez que cambies este número, todos los usuarios recibirán automáticamente un service worker nuevo y una caché actualizada.

Para tu configuración inicial:

• No cambiar la versión
• Sólo actualízalo más tarde si haces cambios en el comportamiento de la caché o en las páginas sin conexión

Una vez establecidos los valores de la caché, guarda los cambios. En este punto, el plugin registrará automáticamente el trabajador de servicio en segundo plano.

Paso 7: Notificaciones Push opcionales

Si quieres mostrar notificaciones push, ya puedes configurarlas. PushNotifications.io (es la opción recomendada. Esta función requiere un plugin gratuito que se integra con un servicio gratuito de notificaciones Push.

Seguiré adelante y me registraré en el servicio sólo para probar la función de notificaciones push.

Una vez configurado, envía una notificación de prueba a un dispositivo suscrito para confirmar que todo funciona.

Como puedes ver, las notificaciones push funcionaron.

Tenlo en cuenta:

• Las notificaciones push funcionan en los navegadores Chrome de Android y Chromium de escritorio
• Safari de iOS aún no es compatible con las notificaciones web push

Paso 8: Probar las funciones de la PWA en Chrome

Abre tu sitio en Google Chrome e inicia DevTools.

Ve a la pestaña Aplicación y compruébalo:

• Manifiesto para confirmar el nombre de tu aplicación, los iconos, la URL de inicio y el modo de visualización
• Trabajadores de servicio para confirmar que el trabajador de servicio está activo y controlando la página

Como puedes ver, estas configuraciones de PWA no estaban disponibles cuando recopilamos las líneas de base iniciales.

A continuación, abre la pestaña Red, activa Sin conexión, vuelve a cargar el sitio y confirma que las páginas en caché siguen cargándose.

¡Un éxito! Nuestro sitio acaba de cargarse también en modo sin conexión, como puedes ver en la captura de pantalla siguiente.

Por último, ejecutemos una auditoría Lighthouse para comparar los resultados antes y después de la PWA.

Como puedes ver, nuestra puntuación de rendimiento subió de 72 a 85. No es ni mucho menos un salto masivo, pero ten en cuenta que no hicimos ninguna optimización. Sólo implementamos la PWA. Imagina el aumento de rendimiento que puedes esperar con una optimización adecuada.

Paso 9: Prueba de añadir a la pantalla de inicio

En un dispositivo Android que utilice Chrome, abre tu sitio. Si todo está configurado correctamente, el navegador mostrará un aviso de Instalar aplicación. Si no lo hace, también puedes pulsar manualmente el botón Añadir a la pantalla de inicio desde la aplicación del navegador Chrome.

Instala la aplicación y ábrela desde tu pantalla de inicio. Debería iniciarse sin controles del navegador y comportarse como una aplicación nativa.

En iOS, si utilizas Safari, haz clic en la opción Compartir → Añadir a la pantalla de inicio. Ten en cuenta también que, por el momento, las notificaciones push no son compatibles con los iPhones.

¡Y ya está! Hemos implementado con éxito la PWA para nuestra aplicación de WordPress utilizando un plugin. A continuación veremos cómo implementar la PWA manualmente.

Método 2: Crear una PWA manualmente (desde cero)

Si quieres tener más control sobre tu PWA, también puedes configurarla manualmente en WordPress. Es un poco más técnico que usar un plugin, pero te guiaré paso a paso para que sea fácil de seguir.

Pero antes, vamos a registrar las líneas de base que podamos al final de la configuración…

Como podemos ver, actualmente no se ha detectado ningún service worker ni manifiesto para nuestra aplicación de WordPress.

Muy bien, ahora podemos empezar…

Paso 1: Asegúrate de que tu sitio utiliza HTTPS

Antes de nada, como hemos asegurado antes, tu sitio debe utilizar HTTPS. Las PWA no funcionarán sin él.

• Si estás en Cloudways, puedes activar un certificado SSL gratuito de Let’s Encrypt. Ya te mostré cómo hacerlo anteriormente en este blog.

Una vez que esté activo, abre tu sitio en un navegador y comprueba que empieza por https://. Esto es superimportante porque el service worker y las funciones offline dependen de una conexión segura.

Paso 2: Añade el Manifiesto de la Web App

• Piensa en el manifiesto como el DNI de tu PWA. Indica a los navegadores cómo debe ser tu aplicación, cuál es su nombre y cómo debe iniciarse.
• Crea un archivo llamado manifest.json en tu máquina local. Para ello utilizaré FileZilla.

• Pega este contenido:

{

"nombre": "WordPress PWA Demo",

"nombre_corto": "WP PWA",

"start_url": "/",

"mostrar": "independiente",

"color_de_fondo": "#ffffff",

"color_tema": "#000000",

"iconos": [

{

"src": "icono-192x192.png",

"tamaños": "192x192",

"tipo": "imagen/png"

},

{

"src": "icono-512x512.png",

"tamaños": "512x512",

"tipo": "imagen/png"

}

]

}

• Añade dos iconos a la misma carpeta:

icono-192×192.png

icono-512×512.png

• Sube los tres archivos a la carpeta de tu tema mediante FileZilla: /wp-content/temas/twentytwentyfive/

Paso 3: Añadir el Trabajador de Servicio

• Crea el servicio-trabajador.js en tu máquina:

const CACHE_NAME = 'wp-pwa-cache-v1';

const urlsToCache = [

'/', // página de inicio

'/wp-content/themes/twentytwentyfive/style.css', // CSS principal

'/wp-content/themes/twentytwentyfive/main.js', // Registro JS

'/wp-content/themes/twentytwentyfive/icon-192x192.png',

'/wp-content/themes/twentytwentyfive/icon-512x512.png'

];




self.addEventListener('instalar', evento =>  {

evento.esperarHasta(

caches.open(NOMBRE_CACHE).then(cache =>  cache.addAll(urlsToCache))

);

});




self.addEventListener('buscar', evento =>  {

evento.responderCon(

caches.match(evento.solicitud).then(respuesta =>  response || fetch(event.request))

);

});

• Súbelo a la misma carpeta del tema /wp-content/temas/twentytwentyfive/servicio-trabajador.js

Paso 4: Añade el Script de Registro

• Crea main.js:

if ('servicioTrabajador' en navegador) {

window.addEventListener('cargar', function () {

navigator.serviceWorker

.register('/wp-content/themes/twentytwentyfive/servicio-trabajador.js')

.then(function (registro) {

console.log('Trabajador de servicio registrado:', registration.scope);

})

.catch(function (error) {

console.log('Falló el registro del trabajador del servicio:', error);

});

});

}

• Súbelo a la misma carpeta del tema.

Paso 5: Poner en cola JS y añadir manifiesto

Ahora pondremos en cola el manifiesto y el JS a través de functions.php. Abre functions.php en la carpeta de tu tema y sustituye el contenido por esto:

<?php

function minimal_pwa_setup() {

// Poner en cola main.js

wp_enqueue_script(

'pwa-main-js',

get_stylesheet_directory_uri() . '/main.js', 

array(),

nulo,

true

);




// Añade el enlace del manifiesto en la cabecera

echo '<link rel="manifest" href="' . get_stylesheet_directory_uri() . '/manifiesto.json">';

}

add_action('wp_head', 'minimal_pwa_setup');

Paso 6: Prueba tu PWA

¡Aquí es donde compruebas tu trabajo y ves tu PWA en acción!

• Como la última vez, abre tu sitio en Chrome.
• Abre DevTools → Aplicación:
• Manifiesto: Debe mostrar el nombre de la aplicación, los iconos y el modo de visualización

• Trabajadores de servicio: Deben mostrar las páginas activas y de control

• DevTools → Red → Sin conexión → recargar página. La página de inicio debería cargarse desde la caché.

Y esto es todo. Hemos creado con éxito una Aplicación Web Progresiva de forma manual en nuestro sitio de WordPress.

Gracias al Web App Manifest y al Service Worker, ahora nuestro sitio puede instalarse directamente en un teléfono o escritorio como una aplicación nativa, y puede cargarse instantáneamente incluso cuando un usuario está desconectado o con una conexión inestable.

El papel del alojamiento en la instalabilidad y velocidad de la PWA

Mientras que el código del Service Worker y del Manifiesto hace que tu PWA funcione sin conexión, una PWA realmente buena necesita ser rápida y fiable cuando está en línea. Por eso es fundamental elegir la plataforma de alojamiento adecuada.

Un servidor lento, tiempos de respuesta retardados o una infraestructura débil socavarán todo el trabajo de optimización que acabas de hacer. Recuerda, la primera carga siempre procede de la red, y un servidor deficiente significa una mala experiencia inicial del usuario, incluso para una PWA.

Esta es exactamente la razón por la que hemos creado la Plataforma Cloudways. Ofrecemos entornos optimizados con capas de Caché integradas (como Varnish y Redis) y una pila optimizada que entrega tu contenido rápidamente.

Esto se traduce directamente en una menor puntuación de la Mayor Pintura de Contenido (LCP), que es una métrica de rendimiento clave para cualquier PWA. Proporcionamos la base estable y de alto rendimiento que tu PWA necesita para tener éxito, permitiéndote centrarte por completo en el desarrollo.

«Después de cambiar a Cloudways, mi sitio WordPress carga en menos de 1 segundo»

– Joe Williams, cliente satisfecho
PRUEBA AHORA

Los mejores plugins PWA para WordPress

Aquí tienes tres de los plugins PWA para WordPress más populares y utilizados, cada uno con sus puntos fuertes y casos de uso típicos.

1. PWA (por Weston Ruter)

• Este complemento se centra en añadir los elementos básicos necesarios para una Aplicación Web Progresiva. Principalmente proporciona soporte para el manifiesto de la aplicación web y la integración del trabajador de servicios.
• No es una solución PWA completa «todo en uno». Más bien está diseñada como una capa de base sobre la que pueden construirse temas u otros plugins.
• Para los desarrolladores o sitios que deseen una base PWA más ligera y manual (posiblemente combinada con código personalizado), PWA ofrece una forma mínima y menos costosa de obtener soporte PWA.

Cuándo elegir éste:

• Quieres una configuración PWA limpia y mínima (sólo manifiesto + service worker)
• Piensas personalizar el almacenamiento en caché, el comportamiento o integrarlo con otros plugins/temas
• Prefieres una sobrecarga más ligera en lugar de un enfoque «plug-and-play» completo

2. PWA para WP – Aplicaciones Web Progresivas Simples

• Este plugin ofrece una experiencia PWA más completa desde el primer momento: manifiesto, service worker, almacenamiento en caché, soporte offline y avisos de instalación en la pantalla de inicio.
• Entre sus principales características se incluyen: soporte completo sin conexión, generación automática de manifiestos, soporte para sitios AMP, configuración de la pantalla de inicio y del color de fondo, URL de inicio personalizada, carga de iconos, estrategia de caché configurable y mucho más.
• También admite funciones adicionales como la navegación por deslizamiento entre las entradas, el control de la barra de desplazamiento y la compatibilidad con proveedores de multisitio y notificaciones push (si están configurados).

Cuándo elegir éste:

• Quieres una configuración PWA fácil, todo en uno, que cubra la mayoría de los casos de uso
• Quieres que se configure automáticamente el soporte offline, la instalación en pantalla de inicio y el manifiesto + service worker
• Diriges un sitio de contenido (blog, revista) o un sitio habilitado para AMP y quieres una configuración manual mínima

3. Super Aplicaciones Web Progresivas

• SuperPWA está diseñado en torno a un proceso de configuración más sencillo. Una vez activado, genera automáticamente el manifiesto y habilita el almacenamiento en caché básico sin conexión sin mucha configuración.
• Admite el almacenamiento agresivo de páginas en caché: las páginas visitadas una vez pasan a estar disponibles sin conexión, lo que ayuda a los visitantes a acceder a contenidos vistos anteriormente incluso sin conexión.
• Puedes personalizar los ajustes esenciales de la PWA, como el icono de la aplicación, el fondo de la pantalla de inicio, la página offline fallback, la página de inicio y mucho más.

Cuándo elegir éste:

• Quieres la configuración más sencilla posible: instalar, activar, y ya tienes una PWA
• Te parece bien el almacenamiento en caché y el comportamiento por defecto, y no necesitas personalizaciones profundas
• Valoras más la sencillez y la rapidez de instalación que la configuración avanzada

Comparación rápida

Plugin	Configuración	Características	Lo mejor para
PWA	Mínimo – ligero	Manifiesto básico + bloques de construcción de trabajadores de servicios	Desarrolladores, construcciones personalizadas, sitios ligeros
PWA for WP – Aplicaciones Web Progresivas Simples	Moderada – con todas las funciones	Compatibilidad sin conexión, caché, iconos, pantalla de inicio, compatibilidad con AMP, opciones configurables	Sitios de contenido, blogs, usuarios de AMP, sitios que necesitan buenos valores predeterminados
Super Aplicaciones Web Progresivas	Más fácil – plug-and-play	Manifiesto, almacenamiento en caché, instalación en pantalla de inicio, almacenamiento en caché de páginas sin conexión	Principiantes, instalación rápida, configuración mínima

Errores comunes de las PWA que debes evitar

Crear una PWA en WordPress es fantástico, pero es fácil tropezar con algunos errores clave que pueden arruinar la experiencia. Evitar estos errores garantizará que tu PWA sea rápida, fiable e instalable en todos los dispositivos.

Ignorar HTTPS

Esta es una regla no negociable. Las PWA deben ejecutarse sobre HTTPS. Si tienes contenido mixto (algunas imágenes o scripts que se cargan a través de http://), tu Service Worker no se registrará y la PWA no funcionará. El Service Worker depende de una conexión segura para funcionar.

Estrategias deficientes de almacenamiento en caché

No trates todos tus archivos de la misma manera. Almacenar en caché el contenido principal de tu blog con una regla de «Sólo caché» significa que tus usuarios siempre verán contenido obsoleto. Por el contrario, no almacenar en caché tus archivos estáticos (como CSS, fuentes e iconos) significa que tu aplicación se cargará lentamente cada vez. Utiliza la herramienta adecuada para el trabajo: mantén fresco el contenido dinámico y almacena agresivamente en caché los activos estáticos.

Sobrecargar los scripts de los trabajadores de servicios

Mantén tu archivo service-worker.js ligero y centrado. Si lo llenas de lógica JavaScript compleja y personalizada, ralentizarás el proceso en segundo plano que se supone que debe acelerar tu aplicación. ¿La solución? Apóyate en una biblioteca como Workbox para que se encargue del trabajo pesado con patrones de almacenamiento en caché probados y predefinidos.

Descuidar el núcleo vital de la web

Una PWA no se trata sólo de instalabilidad; se trata de rendimiento. Si tu sitio es lento en la primera visita (antes de que el Service Worker haya hecho su caché), tu PWA está fallando. Arregla primero los aspectos fundamentales: optimiza las imágenes y los scripts para garantizar una gran puntuación en LCP (Largest Contentful Paint) e INP (Interaction to Next Paint). El Service Worker mejora un sitio rápido; no arregla uno lento.

¡Terminando!

Has transformado con éxito tu sitio WordPress en una Progressive Web App, ofreciendo a los usuarios una experiencia rápida, fiable y similar a la de una aplicación.

En esta guía, cubrimos cómo configurar una PWA utilizando plugins o métodos manuales, los errores más comunes que hay que evitar y cómo mantener bajo control el Core Web Vitals.

Con estos pasos, tu sitio estará preparado para ofrecer una experiencia más fluida y atractiva. La supervisión continua del rendimiento y el alojamiento inteligente lo mantendrán en funcionamiento de forma fiable, y una auditoría final de Lighthouse mostrará las mejoras que has realizado.

Si tienes alguna pregunta, házmela saber en los comentarios de abajo.