Configuración de notificaciones push web

Para empezar a enviar notificaciones push web con Pushwoosh, necesitas configurar tu plataforma de push web y habilitar el aviso de suscripción que se muestra a los usuarios.

Importante

Asegúrate de que el SDK de Web Push esté correctamente integrado en tu sitio web. Este es un paso obligatorio para permitir que los usuarios se suscriban y reciban notificaciones. Aprende más

Para comenzar la configuración, ve a Settings > Platform Configuration > Web Push Notifications y haz clic en Configure.

Configurar push web para todos los navegadores (excepto versiones antiguas de Safari)

Esta configuración se aplica a todos los navegadores modernos, incluidas las últimas versiones de Safari, que ahora admiten notificaciones push web de forma nativa.

Nota: Las versiones antiguas de Safari (macOS 10.14–12) requieren una configuración aparte. Puedes configurarlo en una sección dedicada. Aprende más

Para comenzar la configuración, haz clic en Configure en All browsers configuration.

En la ventana de configuración, elige una de las siguientes opciones:

• Crear una nueva configuración de push Recomendado si no has configurado previamente notificaciones push web a través de otro servicio. Pushwoosh generará automáticamente un nuevo par de claves VAPID.

• Usar configuración existente Elige esta opción si ya tienes claves VAPID, por ejemplo, de Firebase, y quieres seguir usándolas sin pedir a los usuarios que se suscriban de nuevo.

Crear una nueva configuración de push

Elige Create a new push configuration si no has configurado previamente notificaciones push web con otro servicio. Pushwoosh generará automáticamente las claves VAPID (Voluntary Application Server Identification) requeridas para ti.

¿Qué son las claves VAPID?

Las claves VAPID son un par de claves pública-privada utilizadas en el Protocolo Web Push para autenticar el servidor de la aplicación al enviar notificaciones push a los navegadores web. La clave pública se comparte con el navegador cuando un usuario se suscribe a las notificaciones. La clave privada permanece en tu servidor y se utiliza para firmar de forma segura cada mensaje que envías.

Haz clic en Configure para generar y aplicar las claves.

Una vez creadas, Pushwoosh utilizará automáticamente estas claves en la configuración del SDK. Aprende más sobre la integración del SDK de Web Push

Usar configuración existente

Si ya tienes claves VAPID (como las generadas a través de Firebase), puedes reutilizarlas para configurar las notificaciones push web en Pushwoosh.

Para ello:

1. Selecciona Use existing configuration.

2. En el campo Web Push Certificate, introduce tu clave pública VAPID.

3. En el campo Web Push Private Key, introduce tu clave privada VAPID.

4. Haz clic en Configure para guardar y aplicar los ajustes.

Cómo encontrar las claves VAPID en Firebase

Si estás migrando desde Firebase y necesitas reutilizar tus claves VAPID existentes, sigue estos pasos para encontrarlas.

Certificado de Web Push

1. En Firebase, navega a Project Settings → Cloud Messaging.
2. Desplázate hacia abajo hasta la sección Web Configuration y copia el par de claves existente.

3. Pégalo en el campo Web Push Certificate en el formulario de configuración web de Pushwoosh.

Clave privada de Web Push

1. En la Consola de Firebase, ve a Project Settings → Cloud Messaging → Web Configuration.
2. Haz clic en el menú de tres puntos en Actions junto al par de claves y selecciona Show private key. Esta clave es esencial para asegurar que las notificaciones Web Push funcionen correctamente.

3. Copia la clave mostrada en tu portapapeles.

4. En el formulario de Configuración Web de Pushwoosh, pégala en el campo Web Push Private Key.

5. Haz clic en Apply para guardar tus cambios.

Reconfigurar la configuración de push web

Si ya has configurado las notificaciones push web pero necesitas actualizar tus credenciales (como reemplazar tus claves VAPID), aquí te explicamos cómo hacerlo:

1. Haz clic en Reconfigure en All browsers configuration.

2. En la ventana emergente que aparece, introduce tus nuevas claves VAPID:

   • Web Push Certificate: tu nueva clave pública VAPID
   • Web Push Private Key: tu nueva clave privada VAPID

3. Haz clic en Configure para guardar los cambios.

Importante

Reemplazar tus claves VAPID afecta a toda tu configuración de push web y puede interrumpir la entrega de notificaciones si no se gestiona correctamente. Solo cambia las claves si es realmente necesario y asegúrate de entender el impacto antes de realizar cualquier actualización.

Configurar el aviso de suscripción

Para enviar notificaciones push, los usuarios deben otorgar permiso explícitamente a través del aviso a nivel de sistema del navegador. Sin este permiso, no se pueden entregar las notificaciones.

Debido a los recientes cambios en las políticas de Chrome y Firefox, la ventana emergente de permiso nativa solo puede aparecer después de que el usuario interactúe con la página (por ejemplo, haciendo clic en un botón). Para cumplir con este requisito, Pushwoosh muestra un widget de Aviso de Suscripción por defecto. Este widget anima a los usuarios a optar por participar y, al aceptar, activa el aviso nativo del navegador.

Consejo

Un aviso bien diseñado que explique el valor de las notificaciones (por ejemplo, “Recibe las últimas noticias y actualizaciones”) puede mejorar significativamente las tasas de aceptación.

Para personalizar el texto y la apariencia del aviso, haz clic en Settings.

Tipos de aviso

Hay dos tipos de avisos de suscripción disponibles:

• Widget por defecto Proporcionado por Pushwoosh y mostrado automáticamente. Aprende a personalizar el widget por defecto.

• Widget personalizado Usa tu propio diseño de widget. Aprende más

Nota: Debido a limitaciones de la plataforma, los cambios en el widget pueden tardar hasta 30 minutos en aparecer. Si los cambios no se reflejan, contacta al equipo de Soporte de Pushwoosh.

Configuración de Safari (macOS 10.14–12)

Para admitir notificaciones push en versiones antiguas de Safari (macOS 10.14–12), necesitas completar un proceso de configuración separado utilizando tus credenciales de Apple Developer. Este paso solo es necesario para estas versiones antiguas, ya que las versiones más recientes de Safari (macOS Ventura y posteriores) admiten la configuración estándar de push web incluida en la Configuración para todos los navegadores.

Obtener las credenciales requeridas de Apple

1. Ve a la sección Certificates, Identifiers & Profiles del Portal de Desarrolladores de Apple.

2. Añade un nuevo certificado.

3. Elige el tipo Website Push ID Certificate y haz clic en Continue.

4. Selecciona el Website Push ID - tu cadena de dominio inverso única, como web.com.example.domain (debe comenzar con web.).

5. Sube una Solicitud de Firma de Certificado (Certificate Signing Request). Para obtener más información sobre cómo crear Solicitudes de Firma de Certificado, consulta el artículo de Ayuda de la Cuenta de Desarrollador.

6. Después, descarga el certificado de notificación push.

Nota

El certificado que descargas de Apple es un archivo .cer. Para obtener el archivo .p12 necesario para configurar Pushwoosh, debes exportar una clave privada. Consulta los detalles en la guía de Configuración de iOS.

Configurar Safari en Pushwoosh

1. Haz clic en Configure en Safari Configuration.

2. Rellena los siguientes campos en el formulario de configuración:

Nombre del sitio web	El nombre de tu sitio web que aparece en el aviso de push.
Dominios permitidos	Lista de dominios permitidos para solicitar permiso de notificación (uno por línea).
Plantilla de URL	URL que se abre cuando un usuario hace clic en la notificación. Admite marcadores de posición como %@ para insertar valores dinámicos. Ejemplo: https://yourwebsite.com/%@
Icono del sitio web	Sube una imagen PNG cuadrada (256×256 px). Pushwoosh la redimensiona automáticamente para diferentes interfaces.
Archivo de clave	Sube el certificado .p12 exportado desde tu cuenta de Apple Developer.
Contraseña de clave privada	Contraseña utilizada al exportar el archivo .p12.

3. Haz clic en Configure para guardar tus cambios.

Pushwoosh generará automáticamente el paquete push con el conjunto de iconos, el diccionario JSON del sitio web y el archivo de manifiesto que Safari solicita al servidor. Puedes descargarlo cuando lo necesites.

Importante

Cuando se le pide a un usuario permiso para recibir notificaciones push, Safari solicita a nuestro servidor web un push package. El paquete contiene datos utilizados por la interfaz de usuario de la notificación, como el nombre y el icono de tu sitio web, así como una firma criptográfica que verifica que tu notificación proviene de una fuente confiable: tú.

El paquete push con todo su contenido es descargado UNA SOLA VEZ por cada usuario suscrito al registrarse, y no se puede forzar su actualización en los dispositivos.

Considera esto al lanzar las notificaciones push de Safari para tu sitio web en producción.