Cómo implementar Progressive Web App con Drupal para mejorar la experiencia móvil

Más del 78% del tráfico web en España ya viene del móvil. La cifra no sorprende a nadie. Lo que sí sorprende es cuántas webs corporativas construidas con Drupal siguen ofreciendo una experiencia móvil francamente mediocre: cargas lentas, navegación torpe, y si te quedas sin cobertura en un AVE entre Córdoba y Sevilla, pantalla en blanco.

Las Progressive Web Apps cambian esto de raíz. Y si gestionas un sitio Drupal y quieres que tus usuarios móviles tengan algo parecido a una app nativa sin el gasto de desarrollar para iOS y Android por separado, merece la pena que sigas leyendo.

Qué es una PWA y por qué te debería interesar

Una Progressive Web App es, básicamente, una web que se comporta como una aplicación nativa. Se instala en la pantalla de inicio, funciona sin conexión, puede enviar notificaciones push y carga con la velocidad que esperarías de cualquier app descargada de la tienda.

Pero aquí viene lo bueno: no necesitas publicar nada en Google Play ni en la App Store. Tu sitio Drupal, con la configuración adecuada, se convierte en esa aplicación.

Google lleva años empujando este estándar. Lighthouse, su herramienta de auditoría en Chrome, tiene una sección específica para evaluar si tu web cumple los criterios PWA. Y los números hablan solos: Trivago reportó un aumento del 150% en la interacción de usuarios tras implementar su PWA. Alibaba vio un incremento del 76% en conversiones.

¿Y en el contexto español? Tenemos una de las penetraciones móviles más altas de Europa, pero las conexiones 4G/5G no siempre son estables en zonas rurales. Una PWA con capacidad offline no es un capricho tecnológico. Es puro sentido común.

Las cuatro columnas de una PWA

Antes de tocar nada en Drupal, conviene tener claros los cuatro pilares que hacen que una web sea realmente una PWA:

Instalabilidad. El usuario añade tu web a su pantalla de inicio con un toque. A partir de ahí se abre como cualquier otra app, sin barra de navegador, con tu icono y pantalla de carga personalizada.

Funcionamiento offline. Los Service Workers permiten que tu PWA sirva contenido incluso sin conexión. Especialmente útil para catálogos de productos, portafolios o secciones informativas que el usuario ya visitó antes.

Notificaciones push. Puedes reenganchar a los usuarios con avisos relevantes directamente en su dispositivo. Alertas de nuevos contenidos, recordatorios de eventos, actualizaciones de pedidos... igual que haría una app nativa.

Velocidad de carga. Una PWA bien hecha carga en menos de 2 segundos incluso en redes 3G. Google estima que el 53% de los usuarios abandona una web que tarda más de 3 segundos. Tres segundos. La diferencia entre un cliente y un rebote.

Módulos de Drupal para implementar tu PWA

Drupal tiene un ecosistema bastante maduro para PWA, así que no hace falta reinventar nada.

El módulo PWA

El módulo principal se llama, directamente, PWA (drupal.org/project/pwa). Está disponible para Drupal 9, 10 y 11, y se encarga de dos cosas fundamentales:

• Genera automáticamente el archivo manifest.json, que le indica al navegador que tu web es instalable.
• Registra un Service Worker básico que intercepta las peticiones de red.

Instalarlo es rápido. Con Composer:

composer require drupal/pwa
drush en pwa

Una vez activo, la configuración está en Configuración > Desarrollo > Progressive Web App. Ahí defines el nombre de la app, el nombre corto, los colores del tema, la orientación de pantalla y los iconos.

Configuración del Web App Manifest

El manifiesto es un archivo JSON que el navegador lee para saber cómo tratar tu web cuando el usuario la instala. Hay campos que no puedes dejar en blanco:

• name: nombre completo de tu aplicación.
• short_name: la versión corta que aparece bajo el icono (máximo 12 caracteres).
• start_url: la URL que se carga al abrir la app.
• display: usa standalone para que se abra sin barra de navegador.
• theme_color y background_color: los colores de la pantalla de carga.
• icons: necesitas al menos 192x192 y 512x512 píxeles en PNG.

Un error que vemos con frecuencia es olvidar el campo scope, que define qué rutas de tu dominio pertenecen a la PWA. Si tu Drupal sirve varios micrositios bajo el mismo dominio, no delimitar el scope acaba generando comportamientos raros que cuesta diagnosticar.

Service Workers: el corazón de todo esto

El Service Worker es un script JavaScript que corre en segundo plano, independiente de la página. Se encarga de cachear recursos, interceptar peticiones de red y decidir qué mostrar cuando no hay conexión.

El módulo PWA de Drupal genera un Service Worker funcional de salida. Pero para un proyecto serio vas a necesitar personalizarlo. Y ahí es donde entran las estrategias de caché.

Estrategias de caché: cuál usar y cuándo

No todo el contenido de tu Drupal se cachea de la misma manera. Estas son las tres estrategias principales:

Cache-First. El Service Worker busca primero en la caché local y solo va a la red si no encuentra lo que busca. Ideal para assets estáticos que rara vez cambian: hojas de estilo, fuentes, imágenes del diseño, scripts de librerías. Es la que más mejora la velocidad percibida.

Network-First. Se intenta cargar desde la red. Si falla, se sirve la versión cacheada. Perfecto para contenido que se actualiza con frecuencia: noticias, listados de productos, entradas de blog. El usuario siempre ve la versión más reciente cuando tiene conexión.

Stale-While-Revalidate. Se sirve la versión cacheada al instante y en paralelo se descarga la actualización para la próxima visita. Buen compromiso para contenido que cambia moderadamente: páginas de equipo, secciones "sobre nosotros", portafolios.

En la práctica, la mayoría de proyectos Drupal combinan las tres. Un enfoque que funciona bien: Cache-First para /themes/ y /libraries/, Network-First para /node/ y vistas dinámicas, y Stale-While-Revalidate para el resto.

Si necesitas control más fino, la librería Workbox de Google encaja muy bien con Drupal y te permite definir estas estrategias con pocas líneas de configuración.

Optimización del rendimiento móvil

Implementar un Service Worker no va a salvarte si tu Drupal sirve imágenes de 4 MB y carga 15 scripts de terceros. La PWA es tan rápida como el sitio que hay debajo. Ni más ni menos.

Lazy loading de imágenes. Drupal 10 y 11 soportan loading="lazy" de forma nativa. Asegúrate de que está activo en los modos de visualización de tus tipos de contenido. Para galerías pesadas, módulos como Blazy ofrecen lazy loading con placeholders que mejoran mucho la percepción de velocidad.

Formatos de imagen modernos. El módulo Image API de Drupal genera versiones WebP automáticamente. WebP reduce el peso entre un 25% y un 35% frente a JPEG, sin pérdida de calidad visible. Si todavía tienes que cubrir navegadores antiguos, configura un fallback a JPEG.

Critical CSS. Extrae e inline el CSS necesario para el primer render. Módulos como Critical CSS o herramientas a nivel de tema como Penthouse automatizan la generación de ese CSS crítico.

Preconnect y prefetch. Si tu Drupal carga recursos de CDNs externos (Google Fonts, analytics, mapas), añade <link rel="preconnect"> en el head. El navegador establece la conexión antes de necesitar el recurso y se ganan milisegundos que, sumados, importan.

Medir resultados con Lighthouse

Google Lighthouse es tu juez imparcial. Chrome DevTools, pestaña Lighthouse, auditoría en modo móvil. Las métricas que importan:

• Performance: apunta a 90+. Por debajo de 70 hay problemas serios.
• PWA: Lighthouse verifica manifiesto válido, Service Worker registrado, HTTPS activo y respuesta offline. Necesitas pasar todos los checks para la insignia PWA.
• Best Practices y Accessibility: no están directamente ligadas a PWA, pero Google las valora en conjunto para el ranking.

Un Drupal sin optimizar suele puntuar entre 40 y 60 en Performance móvil. Con las optimizaciones que hemos descrito aquí, moverse al rango 85-95 es perfectamente realista.

Casos reales de PWAs con Drupal

The Weather Channel construyó su PWA con un stack que incluye Drupal como backend de contenidos. Resultado: un 80% de mejora en tiempos de carga y un aumento notable en páginas vistas por sesión.

A nivel europeo, varios periódicos digitales y plataformas de e-learning han adoptado Drupal como CMS headless alimentando una PWA en el frontend. La arquitectura decoupled (Drupal como API + frontend React/Vue como PWA) es especialmente popular cuando se necesita máxima flexibilidad en la experiencia móvil.

Pero para pymes españolas, la aproximación más práctica suele ser la PWA integrada, no headless: usar el módulo PWA directamente sobre un Drupal estándar. Requiere menos recursos de desarrollo y te da el 80% de los beneficios con un 20% del esfuerzo.

Consideraciones antes de empezar

Hay un par de requisitos innegociables.

Tu sitio tiene que servirse por HTTPS. Sin certificado SSL, los Service Workers directamente no funcionan. En 2026 esto debería ser obvio, pero todavía nos encontramos con proyectos en HTTP.

También necesitas pensar en la estrategia de actualización del Service Worker. Cuando despliegas cambios en tu Drupal, el Service Worker antiguo puede seguir sirviendo contenido cacheado como si nada hubiera pasado. Implementa un mecanismo de versionado que fuerce la actualización: incluir un hash del build en el nombre del Service Worker es lo más habitual.

Y un consejo práctico: empieza pequeño. No intentes cachear todo tu sitio el primer día. Identifica las 10 páginas más visitadas, implementa la PWA para esas rutas, mide resultados y ve escalando de forma progresiva.

Siguiente paso

Implementar una PWA en Drupal no es un proyecto de fin de semana, pero tampoco requiere meses de desarrollo. Con la arquitectura adecuada, los módulos correctos y una estrategia de caché bien pensada, puedes transformar la experiencia móvil de tu sitio en cuestión de semanas.

Si necesitas que un equipo con experiencia en Drupal y rendimiento web evalúe tu sitio y diseñe la estrategia PWA más adecuada, consulta con nuestro equipo de especialistas en Drupal. Lo que marca la diferencia no es solo instalar un módulo, sino saber configurar cada pieza para que el resultado sea sólido, rápido y mantenible a largo plazo.