DataFirefly PWA — Guía completa

Presentación

El módulo DataFirefly PWA (dfpwa) convierte tu tienda PrestaShop en una Progressive Web App: tus clientes pueden instalarla en su pantalla de inicio, recibir notificaciones push web y seguir navegando incluso sin conexión. El módulo es totalmente autónomo: el cifrado de las notificaciones se gestiona en PHP nativo, sin Composer, sin servicios externos y sin suscripción.

Compatibilidad

• PrestaShop 8.0 a 9.x
• Monotienda y multitienda
• 5 idiomas: FR, EN, ES, DE, IT
• Sin dependencias (ni Composer ni framework)

Requisitos

• HTTPS obligatorio: las PWA y el push web solo funcionan en una tienda servida por HTTPS. Casi todas las tiendas en producción ya lo tienen.
• Extensión PHP openssl: se utiliza para el cifrado VAPID de las notificaciones. El módulo comprueba su presencia durante la instalación.

Instalación

1. En el back office, abre Módulos > Gestor de módulos.
2. Haz clic en Subir un módulo y selecciona el archivo dfpwa.zip.
3. Una vez instalado, haz clic en Configurar.

Configuración

Aplicación (PWA)

• Nombre de la aplicación y nombre corto: se muestran bajo el icono una vez instalada la tienda.
• Color del tema y color de fondo: se usan para la barra del sistema y la pantalla de inicio.
• Modo de visualización: standalone (pantalla completa, recomendado), fullscreen o minimal-ui.
• URL de inicio: página que se abre al lanzar la aplicación instalada.
• Iconos de 192 y 512 px: sube tus propios iconos (PNG o WebP). En su defecto, se usa automáticamente el logo de la tienda.

Banner de instalación

• Mostrar el banner: propone la instalación a los visitantes elegibles.
• Retardo de aparición: número de segundos antes de que aparezca el banner, para no molestar al llegar al sitio.
• Ayuda iOS: muestra una guía paso a paso «Añadir a la pantalla de inicio» para los usuarios de Safari en iPhone y iPad.

Notificaciones push

• Activar el push: permite la suscripción y el envío de notificaciones.
• Consentimiento previo: muestra un mensaje explícito antes del aviso nativo del navegador, conforme al RGPD.
• Retardo antes del aviso: tiempo de espera antes de proponer la suscripción al push.
• Asunto VAPID: dirección de contacto (mailto o URL) enviada a los servidores de push, según la especificación.
• Notificación al cambiar el estado del pedido: avisa automáticamente al cliente (pedido enviado, por ejemplo).
• Recuperación de carritos abandonados y retardo de recuperación: lanzan una notificación tras un carrito dejado sin pedido.

Modo sin conexión

• Activar el modo sin conexión: registra el service worker y la página de respaldo.
• Estrategia de caché: stale-while-revalidate (visualización inmediata y actualización en segundo plano, recomendada), red primero o caché primero.
• Título y mensaje sin conexión: textos que se muestran en la página de respaldo.
• Pre-caché: lista de URL que se almacenan en caché en cuanto se instala el service worker.

Compartir

Activa el botón de compartir nativo para que tus clientes compartan una ficha de producto mediante la ventana de compartir de su dispositivo (Web Share API). Añade el atributo data-dfpwa-share a cualquier elemento de tu plantilla para convertirlo en un disparador de compartición.

Notificaciones push: funcionamiento

El módulo implementa el push web estándar (VAPID + cifrado conforme a las RFC 8291 y 8188), íntegramente en PHP mediante openssl. Ningún dato de suscripción sale de tu servidor.

Enviar una campaña

1. Abre la página Campañas push en el menú de administración.
2. Introduce un título, un mensaje y una URL de destino.
3. Segmenta por idioma y grupo de clientes si es necesario.
4. Usa el modo de prueba para enviarte la notificación antes de un envío masivo y luego confirma.

Las notificaciones se envían en paralelo por lotes y las suscripciones caducadas (códigos 404 / 410) se eliminan automáticamente. Cada envío se registra en el historial con el número de destinatarios, entregas y clics.

Disparadores automáticos

• Seguimiento del pedido: en cada cambio de estado, el cliente suscrito recibe una notificación (si aceptó el push).
• Carrito abandonado: una tarea cron detecta los carritos con artículos, vinculados a un cliente suscrito y sin pedido, dentro de la ventana de recuperación configurada.

Modo sin conexión: funcionamiento

El service worker se registra en el ámbito raíz de la tienda gracias a la cabecera Service-Worker-Allowed, lo que le permite controlar todas las páginas. Según la estrategia elegida, sirve las páginas desde la caché, la red o ambas. Cuando la conexión se pierde por completo y no hay versión en caché disponible, se muestra una página de respaldo autónoma con los colores de tu tienda, con un botón «Reintentar» y un enlace de vuelta al inicio.

Cuadro de mando

La página de configuración muestra de un vistazo el número de suscriptores al push, el número de notificaciones enviadas y la tasa de clics de tus campañas. Como las suscripciones caducadas se eliminan automáticamente, estas estadísticas siguen siendo fiables.

FAQ y resolución de problemas

El banner de instalación no aparece

Comprueba que la tienda se sirve por HTTPS, que el módulo está activado y que la PWA no está ya instalada. En navegadores de escritorio, la instalación suele hacerse mediante el icono dedicado en la barra de direcciones. En iOS, usa la guía «Añadir a la pantalla de inicio».

Las notificaciones no se envían

Asegúrate de que el push está activado, de que las claves VAPID están presentes (en caso contrario se muestra un aviso en el cuadro de mando) y de que hay clientes suscritos. El modo de prueba permite validar toda la cadena de envío de principio a fin.

La recuperación de carritos no se activa

Comprueba que el programador llama realmente a la URL de cron y que contiene el token correcto. Revisa también el retardo de recuperación configurado y la presencia de clientes suscritos con un carrito elegible.

¿Funciona el push en iPhone?

Sí, a partir de iOS 16.4, pero solo una vez instalada la tienda en la pantalla de inicio. Por eso la guía de instalación iOS es esencial para activar el push en estos dispositivos.