Guía completa para configurar las notificaciones push web de OneSignal utilizando integración de código personalizado. Configure el SDK de JavaScript, los service workers y los certificados de Safari para Chrome, Firefox, Safari y otros navegadores web.
Solo usa esta configuración con Código personalizado si necesitas configuración avanzada o control programático. Para la mayoría de usuarios, recomendamos:
Sitio web HTTPS: El push web no funciona en HTTP ni en modos de navegación incógnito/privada.
Acceso al servidor: Necesitarás subir un archivo service worker a tu sitio.
Origen único: El push web sigue la política de mismo origen. Si tienes múltiples orígenes (dominios/subdominios), necesitarás múltiples aplicaciones OneSignal (una por origen). Para cumplir con esta limitación del navegador, puedes:
Redirigir el tráfico a un único origen para las suscripciones.
Crear múltiples aplicaciones OneSignal, una por origen.
Site Name: El nombre de tu sitio y el título de notificación predeterminado.
Site URL: El origen exacto de tu sitio, por ejemplo https://yourdomain.com. Evita usar www. si tu sitio no está configurado así. Consulta los Requisitos si tienes múltiples orígenes.
Auto Resubscribe: Habilita esto para resuscribir automáticamente a los usuarios que borren sus datos del navegador cuando regresen a tu sitio (sin necesidad de una nueva solicitud de permiso).
Default Icon URL: Sube una imagen PNG o JPG cuadrada de 256x256px que aparece en notificaciones y prompts. Si no se configura, se usa un ícono de campana como predeterminado.
Para probar en localhost, usa una aplicación OneSignal separada de tu aplicación de producción y agrega allowLocalhostAsSecureOrigin: true a tus opciones de init.Si estás probando localhost en HTTPS con un certificado autofirmado, puede que necesites indicarle a Chrome que ignore certificados inválidos con --allow-insecure-localhost. Firefox y Safari proporcionan mecanismos integrados para agregar excepciones para certificados de seguridad.
OneSignal proporciona certificados Safari automáticamente sin costo. Solo habilita esto si tienes certificados Safari Web Push existentes que necesitas usar.
Opción de carga de certificado Safari para certificados existentes
Si está habilitado, sube tu Safari Web .p12 Push Certificate e ingresa la contraseña.Haz clic en Save para continuar.
En la siguiente página de configuración de push web, recibirás el archivo service worker OneSignalSDKWorker.js.El SDK web busca este archivo en la raíz de tu sitio de forma predeterminada, por ejemplo https://yourdomain.com/OneSignalSDKWorker.js. Puedes cambiar la ubicación del archivo, el nombre y el alcance en el código.
Service worker de OneSignal
Configuración avanzada del service worker, integración personalizada y migración desde otros proveedores.
Apple comenzó a soportar notificaciones push web en iPhones y iPads con iOS 16.4+. A diferencia de los dispositivos Android donde el push web simplemente “funciona” si se visita en un navegador compatible, Apple agregó algunos requisitos adicionales como un archivo manifest.json y una acción del usuario para agregar tu sitio a su pantalla de inicio.
Configuración push web para iOS
Agrega el archivo manifest.json requerido y guía a los usuarios para agregar tu sitio a su pantalla de inicio.
Esta guía le ayuda a verificar que su integración del SDK de OneSignal funciona correctamente mediante la prueba de notificaciones push y el registro de suscripciones.
Haga clic en Permitir en el aviso nativo para suscribirse a notificaciones push.
Aviso de permiso nativo de web push
2
Revise su panel de OneSignal
Vaya a Audiencia > Suscripciones.
Debería ver una nueva entrada con el estado Suscrito.
Panel mostrando suscripción con estado 'Suscrito'
Ha creado exitosamente una suscripción de web push.
Las suscripciones de web push se crean cuando los usuarios se suscriben por primera vez a notificaciones push en su sitio.
Las suscripciones de prueba son útiles para probar una notificación push antes de enviar un mensaje.
1
Agregar a Suscripciones de prueba.
En el panel, junto a la suscripción, haga clic en el botón Opciones (tres puntos) y seleccione Agregar a suscripciones de prueba.
Agregar un dispositivo a Suscripciones de prueba
2
Nombre su suscripción.
Nombre la suscripción para que pueda identificar fácilmente su dispositivo más tarde en la pestaña Suscripciones de prueba.
3
Cree un segmento de usuarios de prueba.
Vaya a Audiencia > Segmentos > Nuevo segmento.
4
Nombre el segmento.
Nombre el segmento Test Users (el nombre es importante porque se usará más adelante).
5
Agregue el filtro Test Users y haga clic en Crear segmento.
Crear un segmento 'Test Users' con el filtro Test Users
Ha creado exitosamente un segmento de usuarios de prueba.
Ahora podemos probar el envío de mensajes a este dispositivo individual y grupos de usuarios de prueba.
Obtenga su clave API de aplicación y ID de aplicación.
En su panel de OneSignal, vaya a Configuración > Claves e IDs.
2
Actualice el código proporcionado.
Reemplace YOUR_APP_API_KEY y YOUR_APP_ID en el código a continuación con sus claves reales. Este código usa el segmento Test Users que creamos anteriormente.
Si todos los pasos de configuración se completaron exitosamente, las suscripciones de prueba deberían recibir una notificación.
Solo Chrome admite imágenes. Las imágenes aparecerán pequeñas en la vista de notificación contraída. Expanda la notificación para ver la imagen completa.
Notificación push expandida con imagen en Chrome macOS
5
Verifique la entrega confirmada.
En su panel, vaya a Entrega > Mensajes enviados, luego haga clic en el mensaje para ver las estadísticas. Debería ver la estadística confirmado, lo que significa que el dispositivo recibió el push.
Safari no admite Entrega confirmada.
Informes de mensajes de notificaciones push
Vea estadísticas de entrega, clics y conversiones para sus notificaciones push.
Ha enviado exitosamente una notificación mediante la API a un segmento.
Si las notificaciones no llegan, contacte a support@onesignal.com con lo siguiente:
La solicitud y respuesta de la API (copie y pegue en un archivo .txt)
La sección anterior cubrió la creación de suscripciones de web push. Esta sección expande la identificación de usuarios en todas sus suscripciones (incluyendo push, email y SMS) usando el SDK de OneSignal. Cubre IDs externos, etiquetas, suscripciones multicanal, privacidad y seguimiento de eventos para ayudarle a unificar e involucrar usuarios en todas las plataformas.
Use un ID externo para identificar usuarios de manera consistente en dispositivos, direcciones de correo electrónico y números de teléfono usando el identificador de usuario de su backend. Esto asegura que sus mensajes permanezcan unificados en todos los canales y sistemas de terceros (especialmente importante para integraciones).Establezca el ID externo con el método login del SDK cada vez que un usuario sea identificado por su aplicación.
OneSignal genera IDs únicos de solo lectura para suscripciones (ID de suscripción) y usuarios (ID de OneSignal).A medida que los usuarios descargan su aplicación en diferentes dispositivos, se suscriben a su sitio web y/o le proporcionan direcciones de correo electrónico y números de teléfono fuera de su aplicación, se crearán nuevas suscripciones.Se recomienda encarecidamente establecer el ID externo a través del SDK para identificar usuarios en todas sus suscripciones, independientemente de cómo se creen.
Las etiquetas son pares clave-valor de datos de cadena que puede usar para almacenar propiedades de usuario (como username, role o preferencias) y eventos (como purchase_date, game_level o interacciones de usuario). Las etiquetas alimentan la personalización de mensajes y segmentación avanzadas, permitiendo casos de uso más avanzados.Establezca etiquetas con los métodos addTag y addTags del SDK a medida que ocurren eventos en su aplicación.En este ejemplo, el usuario alcanzó el nivel 6 identificable por la etiqueta llamada current_level establecida en un valor de 6.
Un perfil de usuario en OneSignal con una etiqueta llamada "current_level" establecida en "6"
Podemos crear un segmento de usuarios que tengan un nivel entre 5 y 10, y usar eso para enviar mensajes dirigidos y personalizados:
Editor de segmentos mostrando un segmento dirigido a usuarios con un valor de current_level mayor que 4 y menor que 10
Captura de pantalla mostrando una notificación push dirigida al segmento Nivel 5-10 con un mensaje personalizado
El SDK de OneSignal crea suscripciones de web push automáticamente cuando los usuarios aceptan. También puede llegar a los usuarios a través de canales de email y SMS creando las suscripciones correspondientes.
Use el método addSms para crear suscripciones de SMS.
Si la dirección de correo electrónico y/o número de teléfono ya existen en la aplicación de OneSignal, el SDK lo agregará al usuario existente, no creará duplicados.Puede ver usuarios unificados a través de Audiencia > Usuarios en el panel o con la API de ver usuario.
Un perfil de usuario con suscripciones de push, email y SMS unificadas por ID externo
Mejores prácticas para comunicación multicanal
Obtenga consentimiento explícito antes de agregar suscripciones de email o SMS.
Explique los beneficios de cada canal de comunicación a los usuarios.
Proporcione preferencias de canal para que los usuarios puedan seleccionar qué canales prefieren.
Use los listeners del SDK para reaccionar a acciones de usuario y cambios de estado.El SDK proporciona varios listeners de eventos a los que puede conectarse. Consulte nuestra guía de referencia del SDK para más detalles.
Sí. Todos los navegadores modernos requieren HTTPS para el soporte de notificaciones push. Si tu sitio usa HTTP, debes migrar a HTTPS antes de configurar el push web.
¿Puedo usar esta configuración con una aplicación de página única (SPA)?
Sí. La configuración Custom Code es el enfoque recomendado para SPAs construidas con frameworks como React, Angular o Vue. Consulta las guías específicas por framework en la parte superior de esta página para Angular, React y Vue.
