# Configuración de web push Para empezar a enviar notificaciones push web con Pushwoosh, necesita configurar su plataforma de push web y habilitar el aviso de suscripción que se muestra a los usuarios. Para comenzar la configuración, vaya a **Ajustes > Configuración de la plataforma > Notificaciones Push Web** y haga clic en **Configurar**. ![Configurar notificaciones push web](/web-configuration-1.webp) ## Configurar web push 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 más antiguas de Safari (macOS 10.14–12) requieren una configuración aparte. Puede configurarlo en una sección dedicada. Más información Para comenzar la configuración, haga clic en **Configurar** en **Configuración de todos los navegadores**. ![Configurar web push para todos los navegadores](/web-configuration-2.webp) En la ventana de configuración, elija una de las siguientes opciones: * **Crear una nueva configuración de push** Recomendado si no ha 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** Elija esta opción si ya tiene claves VAPID, por ejemplo, de Firebase, y desea seguir usándolas sin pedir a los usuarios que se suscriban de nuevo. ### Crear una nueva configuración de push Elija **Crear una nueva configuración de push** si no ha configurado previamente notificaciones push web con otro servicio. Pushwoosh generará automáticamente las claves VAPID (Voluntary Application Server Identification) necesarias para usted.
¿Qué son las claves VAPID? Las claves VAPID son un par de claves pública-privada utilizadas en el Protocolo de 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 su servidor y se utiliza para firmar de forma segura cada mensaje que envía.
Haga clic en **Configurar** para generar y aplicar las claves. ![Crear una nueva configuración de push](/web-configuration-3.webp) Una vez creadas, Pushwoosh utilizará automáticamente estas claves en la configuración del SDK. [Más información sobre la integración del SDK de Web Push](/es/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/) ### Usar configuración existente Si ya tiene claves VAPID (como las generadas a través de Firebase), puede reutilizarlas para configurar las notificaciones push web en Pushwoosh. Para ello: 1. Seleccione **Usar configuración existente**. 2. En el campo **Certificado de Web Push**, introduzca su **clave pública VAPID**. 3. En el campo **Clave privada de Web Push**, introduzca su **clave privada VAPID**. 4. Haga clic en **Configurar** para guardar y aplicar los ajustes. ![Usar configuración existente](/web-configuration-4.webp) #### Cómo encontrar las claves VAPID en Firebase Si está migrando desde Firebase y necesita reutilizar sus claves VAPID existentes, siga estos pasos para encontrarlas. ##### Certificado de Web Push 1. En **Firebase**, vaya a **Configuración del proyecto → Cloud Messaging**. 2. Desplácese hasta la sección **Configuración web** y copie el par de claves existente. ![Encontrar certificado de Web Push](/web-configuration-6.webp) 3. Péguelo en el campo **Certificado de Web Push** en el formulario de configuración web de Pushwoosh. ![Pegarlo en el campo **Certificado de Web Push**](/web-configuration-7.webp) ##### Clave privada de Web Push 1. En la **Consola de Firebase**, vaya a **Configuración del proyecto → Cloud Messaging → Configuración web**. 2. Haga clic en el **menú de tres puntos** en **Acciones** junto al par de claves y seleccione **Mostrar clave privada**. Esta clave es esencial para garantizar que las notificaciones de Web Push funcionen correctamente. ![Encontrar clave privada de Web Push](/web-configuration-8.webp) 3. Copie la clave mostrada en su portapapeles. 4. En el formulario de **Configuración Web de Pushwoosh**, péguelo en el campo **Clave privada de Web Push**. ![Pegar clave privada de Web Push](/web-configuration-9.webp) 5. Haga clic en **Aplicar** para guardar los cambios. ### Reconfigurar la configuración de web push Si ya ha configurado las notificaciones push web pero necesita actualizar sus credenciales (como reemplazar sus claves VAPID), aquí le explicamos cómo hacerlo: 1. Haga clic en **Reconfigurar** en **Configuración de todos los navegadores**. ![Reconfigurar la configuración de web push](/web-configuration-5.webp) 2. En la ventana emergente que aparece, introduzca sus nuevas claves VAPID: * **Certificado de Web Push**: su nueva clave VAPID pública * **Clave privada de Web Push**: su nueva clave VAPID privada 3. Haga clic en **Configurar** para guardar los cambios. ### Configurar el aviso de suscripción Para enviar notificaciones push, los usuarios deben conceder permiso explícitamente a través del aviso a nivel de sistema del navegador. Sin este permiso, las notificaciones no se pueden entregar. Debido a los recientes cambios en las políticas de Chrome y Firefox, la ventana emergente de permisos 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](/es/developer/guides/messaging-channels/subscription-prompt/) por defecto. Este widget anima a los usuarios a optar por participar y, si están de acuerdo, activa el aviso nativo del navegador. Para personalizar el texto y la apariencia del aviso, haga clic en **Ajustes**. ![Configurar el aviso de suscripción](/web-configuration-16.webp) #### Tipos de aviso Hay dos tipos de avisos de suscripción disponibles: * **Widget por defecto** Proporcionado por Pushwoosh y mostrado automáticamente. [Aprenda a personalizar el widget por defecto](/es/developer/guides/messaging-channels/subscription-prompt/default-widget/). * **Widget personalizado** Utilice su propio diseño de widget. [Más información](/es/developer/guides/messaging-channels/subscription-prompt/custom-subscription-widget/) > **Nota:** Debido a las limitaciones de la plataforma, los cambios en el widget pueden tardar hasta 30 minutos en aparecer. Si los cambios no se reflejan, póngase en contacto con el 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), debe completar un proceso de configuración independiente utilizando sus credenciales de desarrollador de Apple. 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 web push incluida en la [Configuración de todos los navegadores](#configure-web-push-for-all-browsers-except-older-safari-versions). #### Obtener las credenciales necesarias de Apple 1. Vaya a la sección [Certificados, Identificadores y Perfiles](https://developer.apple.com/account/overview.action) del Portal de Desarrolladores de Apple. 2. Añada un nuevo certificado. Opción de añadir nuevo certificado en el Portal de Desarrolladores de Apple 3. Elija el tipo **Certificado de ID de Push de Sitio Web** y haga clic en **Continuar**. Selección del tipo de Certificado de ID de Push de Sitio Web en el Portal de Desarrolladores de Apple 4. Seleccione el **ID de Push de Sitio Web** - su cadena de dominio inverso única, como _web.com.example.domain_ (debe empezar por _web._). Selección del ID de Push de Sitio Web en el Portal de Desarrolladores de Apple 5. Suba una **Solicitud de Firma de Certificado**. Para obtener más información sobre la creación de Solicitudes de Firma de Certificados, consulte el [artículo de Ayuda de la Cuenta de Desarrollador](https://developer.apple.com/help/account/create-certificates/create-a-certificate-signing-request). 6. Después, descargue el certificado de notificación push. Descargar certificado de notificación push desde el Portal de Desarrolladores de Apple #### Configurar Safari en Pushwoosh 1. Haga clic en **Configurar** en **Configuración de Safari**. ![Configurar Safari en Pushwoosh](/web-configuration-11.webp) 2. Rellene los siguientes campos en el formulario de configuración: | | | | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- | | **Nombre del sitio web** | El nombre de su sitio web que aparece en el aviso de push. | | **Dominios permitidos** | Lista de dominios autorizados a 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** | Suba una imagen PNG cuadrada (256×256 px). Pushwoosh la redimensiona automáticamente para diferentes interfaces. | | **Archivo de clave** | Suba el certificado `.p12` exportado desde su cuenta de desarrollador de Apple. | | **Contraseña de la clave privada** | Contraseña utilizada al exportar el archivo `.p12`. | ![Rellenar el formulario de configuración de Safari](/web-configuration-12.webp) 3. Haga clic en **Configurar** para guardar los cambios. Pushwoosh generará automáticamente el paquete de push con el conjunto de iconos, el diccionario JSON del sitio web y el archivo de manifiesto que Safari solicita al servidor. Puede descargarlo siempre que lo necesite.