Configuración SDK Web

Agrega web push de OneSignal a tu sitio configurando el dashboard, subiendo un service worker e inicializando el SDK de JavaScript. OneSignal soporta Chrome, Firefox, Edge, Safari y otros navegadores principales. Si usas WordPress o Shopify, sigue la integración de la plataforma en lugar de esta guía del SDK de JavaScript. Si necesitas una personalización más profunda, prompts, opciones de init y la ruta del service worker en código, usa Código personalizado.

Configuración de WordPress

Instala el plugin oficial de OneSignal. El plugin agrega el SDK y el service worker por ti.

Configuración de Shopify

Conecta Shopify a través de la integración con Vendo. Vendo despliega el SDK en tu tienda sin editar el código del tema.

Configuración con código personalizado

Establece prompts, opciones de init y la ruta del service worker en OneSignal.init().

Si tu sitio está construido con Angular, React o Vue, usa la guía del framework correspondiente en lugar del fragmento de código de esta página.

Requisitos

Sitio web HTTPS: Web push no funciona en HTTP o en modos incógnito/privado.
Acceso al servidor: Necesitas subir un archivo service worker a tu sitio.
Origen único: Web push sigue la política de mismo origen. Si tienes múltiples orígenes (dominios/subdominios), necesitas múltiples apps OneSignal (una por origen). Para cumplir con esta limitación del navegador, puedes:
- Redirigir tráfico a un único origen para suscripciones.
- Crear múltiples apps OneSignal, una por origen.

Si tu equipo ya creó una cuenta con OneSignal, solicita ser invitado como rol admin para que puedas configurar la app. De lo contrario, regístrate para una cuenta gratuita en onesignal.com para comenzar.

Configurar tu app OneSignal y plataforma

En el dashboard de OneSignal:

Ve a Settings > Push & In-App > Web.

Página de Settings del dashboard de OneSignal mostrando la activación de la plataforma Web — Activa la plataforma web en tu configuración de OneSignal

Selecciona el tipo de integración:

Sitio típico (recomendado)

Gestiona prompts y configuraciones directamente a través del dashboard de OneSignal sin codificación adicional.

WordPress

Requerido si usas WordPress con nuestro plugin oficial.

Código personalizado

Para desarrolladores que necesitan control completo sobre prompts y configuración del SDK.

Configuración del sitio

Agrega los detalles del sitio:

Nombre del sitio: El nombre de tu sitio y título de notificación predeterminado.
URL del sitio: La URL de tu sitio. Ver URL del sitio para más detalles.
Resuscripción automática: Habilita esto para resuscribir automáticamente a usuarios que limpian sus datos del navegador cuando regresan a tu sitio (sin nuevo prompt de permiso requerido).
URL de icono predeterminado: Sube un PNG, JPG o GIF no animado cuadrado de 256×256 que aparece en notificaciones y prompts. Si no se establece, se usa un icono de campana como predeterminado. Ver Iconos de notificación.

Si los usuarios limpian sus datos del navegador, dejan de recibir push hasta que regresen. Habilita Resuscripción automática para que se suscriban de nuevo sin un nuevo prompt de permiso. Ver Suscripciones.

Configuración web push de OneSignal mostrando nombre del sitio, URL y configuración de icono — Configuración web en el dashboard de OneSignal

URL del sitio

Ingresa el origen exacto de tu sitio, ej., https://yourdomain.com. Evita usar www. si tu sitio no está configurado de esa manera. Si tienes múltiples orígenes, ver Requisitos.

Pruebas locales

El SDK web puede probarse en entornos localhost. Si estás probando en localhost, usa una app OneSignal separada de tu app de producción.

Configuración de Localhost

Establece la URL DEL SITIO para que coincida exactamente con la URL de tu entorno localhost. La URL debe coincidir con uno de estos formatos comunes de localhost:

http://localhost
https://localhost:3000
http://127.0.0.1
https://127.0.0.1:5000

Si tu URL de localhost usa HTTP, selecciona Treat HTTP localhost as HTTPS for testing. Chrome trata http://localhost y http://127.0.0.1 como orígenes seguros, por lo que el SDK puede inicializarse sobre HTTP solo en esos hosts. Otros nombres de host (por ejemplo http://mysite.local) no se tratan como seguros y no pueden usarse para pruebas de web push.

Configuración de localhost de OneSignal con la opción Tratar HTTP localhost como HTTPS — Pruebas locales en el dashboard de OneSignal

Agrega allowLocalhostAsSecureOrigin: true a tus opciones init de OneSignal al inicializar en localhost.Si estás probando localhost en HTTPS con un certificado autofirmado, puede que tengas que pedir a Chrome que ignore certificados inválidos para pruebas con: --allow-insecure-localhost. Firefox y Safari proporcionan mecanismos integrados para agregar excepciones para certificados de seguridad.

HTML

<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  OneSignalDeferred.push(async function(OneSignal) {
    await OneSignal.init({
      appId: "YOUR_ONESIGNAL_APP_ID",
      allowLocalhostAsSecureOrigin: true,
    });
  });
</script>

Prompt de permisos

La configuración de sitio típico te permite a ti o a los miembros de tu equipo agregar, eliminar y actualizar prompts de permiso a través del dashboard de OneSignal en cualquier momento.

Prompts de permiso web

Configura cuándo y cómo aparece el diálogo de permisos del navegador a tus usuarios.

Notificación de bienvenida (opcional)

También puedes establecer una notificación de bienvenida para ser enviada a los usuarios cuando se suscriban a notificaciones push. Sitio típico y WordPress la configuran en el dashboard. Código personalizado establece welcomeNotification en OneSignal.init(). Para configurar esto en el dashboard, ve a Settings > Push & In-App > Web:

Configuración de la notificación de bienvenida

Para configuraciones con código personalizado, consulta los parámetros de welcomeNotification en la referencia del SDK Web.

Configuraciones avanzadas

Las siguientes características son configurables en el dashboard de OneSignal.

Webhooks

El SDK web puede hacer POST de ciertos eventos web push a una URL de tu elección. Los Webhooks Web Push son una implementación separada de los Webhooks de eventos y no pueden usarse de manera intercambiable.

Webhooks web push

Envía eventos web push a tu servidor mediante solicitudes POST.

Service workers

El SDK Web busca OneSignalSDKWorker.js en la raíz de tu sitio (https://yourdomain.com/OneSignalSDKWorker.js) a menos que le indiques una ubicación diferente. Cómo le indicas al SDK una ubicación fuera de la raíz depende del tipo de integración que seleccionaste. Sitio típico: Establece la ruta en el dashboard. No establezcas serviceWorkerPath en código. Si alojas el archivo en la raíz, deja la configuración de ruta predeterminada. Si lo alojas en un subdirectorio, debes establecer la ruta a continuación o el SDK seguirá solicitando /OneSignalSDKWorker.js y el registro fallará.

Ve a Settings > Push & In-App > Web.
Abre Advanced Push Settings.
Habilita Customize service worker paths and filenames.
Configura los campos para que coincidan con la URL pública del archivo:

Campo	Qué ingresar	Ejemplo
Path to service worker files	Directorio donde alojarás el archivo.	`/push/onesignal/`
Service worker filename	El nombre del archivo `.js`. Si el dashboard también muestra un nombre de archivo de actualización, establece ambos campos con el mismo archivo.	`OneSignalSDKWorker.js`
Service worker registration scope	La misma ruta que la ubicación del archivo.	`/push/onesignal/`

Campos de configuración de ruta, nombre de archivo y alcance del service worker — Configuración de service worker

Con los valores de ejemplo anteriores, el archivo debe ser públicamente accesible en https://yourdomain.com/push/onesignal/OneSignalSDKWorker.js. Código personalizado: No uses los campos de ruta del dashboard. Pasa serviceWorkerPath y serviceWorkerParam en OneSignal.init(). Consulta Configuración con código personalizado para las opciones de init, y Service worker de OneSignal para combinar workers y la migración.

Comportamiento de clic

El comportamiento de clic solo cambia lo que sucede cuando el usuario ya tiene tu sitio abierto en una pestaña del mismo origen. Si no hay una pestaña coincidente abierta, el navegador abre una nueva pestaña con la URL de la notificación. Esta configuración no cambia eso. El comportamiento de clic funciona en Chrome, Edge, Firefox y Safari. Si no se establece una URL de destino, la URL de la notificación es tu página de inicio. Establece una URL de destino para enviar a los usuarios a una página específica, agregar seguimiento UTM o añadir ?_osp=do_not_open para descartar sin abrir una página. Si ya hay una pestaña del mismo origen abierta, el comportamiento depende de la configuración que elijas:

Configuración	Coincide en	Acción
Exact Navigate (predeterminado)	URL exacta (ej. `example.com/product`)	Navega a la URL de la notificación en la pestaña correspondiente
Origin Navigate	Origen (ej. `example.com`)	Navega a la URL de la notificación en la pestaña correspondiente
Exact Focus	URL exacta	Enfoca la pestaña correspondiente sin recargar
Origin Focus	Origen	Enfoca la pestaña correspondiente sin recargar

URLs, enlaces y enlaces profundos

Dirige a los usuarios a una página específica, agrega seguimiento UTM o descarta la notificación con ?_osp=do_not_open.

Botones de acción

Permite a los usuarios realizar una acción desde la notificación sin usar el clic predeterminado.

Listeners de eventos push del SDK Web

Escucha eventos de clic y ejecuta comportamiento in-app con código personalizado.

Persistencia

La persistencia mantiene la notificación en pantalla hasta que el usuario interactúa con ella. Funciona solo en Chrome y Edge en escritorio. Firefox, Safari y todos los navegadores móviles la ignoran. Una notificación persistente puede desplazar texto, imágenes y botones de acción, por lo que puedes desactivarla si esto es un problema para tus usuarios. Cuando el valor no está establecido, el SDK actualmente trata la persistencia como activada.

Sitio típico: Usa el interruptor de Persistencia en Settings > Push & In-App > Web.
Código personalizado: Establece persistNotification en OneSignal.init(). El interruptor del dashboard no aplica. Ver persistNotification.

Los cambios en la persistencia solo entran en efecto para suscriptores que visiten tu sitio después de la actualización. Si no ves el cambio, espera a que los suscriptores vuelvan a visitar tu sitio o pídeles que limpien los datos de su navegador.

Certificado .p12 de Safari Web Push (opcional, heredado)

Deja esto desactivado a menos que ya tengas tu propio certificado .p12 de Safari Web Push y quieras dar soporte a usuarios de Safari heredado. Safari moderno (macOS 13+ e iOS 16.4+) usa Web Push basado en estándares con VAPID (Voluntary Application Server Identification). OneSignal gestiona VAPID automáticamente. No subes un certificado para esos navegadores. Apple no ofrece un token o clave .p8 para web push en Safari. Las apps nativas de iOS y macOS usan un .p8 para autenticarse con APNs. Safari web push no. La única credencial de Apple que aplica a Safari es un certificado .p12 de Safari Web Push, y solo para la ruta heredada de Website Push ID. Esa ruta heredada todavía aplica a:

Safari en macOS 12 y anteriores (sin VAPID)
Suscriptores existentes que ya otorgaron permiso a través de la API antigua de Safari (Safari no migra esas suscripciones a VAPID)

OneSignal aún puede proporcionar un certificado para esa ruta heredada restante. Un .p12 proporcionado por el cliente no se usa para nuevos suscriptores en Safari 16.4+ (macOS 13+ o iOS 16.4+). Esas suscripciones usan VAPID. Si ya tienes tu propio certificado, habilita Safari Web Push .p12 certificate (optional, advanced) en Settings > Push & In-App > Web > Advanced Push Settings. Sube el archivo .p12 y su contraseña. Tanto Sitio típico como Código personalizado configuran esto en el dashboard. No lo estableces en OneSignal.init().

Interruptor y campos para subir el certificado .p12 de Safari Web Push en Advanced Push Settings — Certificado .p12 de Safari Web Push (opcional, heredado)

Subir archivo service worker

Agrega el archivo service worker OneSignalSDKWorker.js a tu sitio. Descárgalo desde el dashboard de OneSignal, o crea un archivo llamado OneSignalSDKWorker.js con esta única línea:

importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");

Paso de descarga y configuración del archivo service worker de OneSignal — Paso de subir archivo service worker

El SDK Web busca este archivo en la raíz de tu sitio a menos que le indiques lo contrario. Esta página es Sitio típico, así que haces coincidir la ubicación del archivo en el dashboard. Si seleccionaste Código personalizado, establece la ruta en OneSignal.init() en su lugar. Consulta Configuración con código personalizado. Raíz (predeterminado): Sube el archivo para que esté disponible en https://yourdomain.com/OneSignalSDKWorker.js. Deja la configuración de ruta del service worker sin cambios. El SDK solicita esta URL automáticamente. Subdirectorio: Si tu sitio ya tiene un service worker (por ejemplo una PWA), coloca el archivo de OneSignal en un subdirectorio como /push/onesignal/ para que no entre en conflicto con el worker que posee /. Luego indícale al SDK dónde buscar: sigue Service workers y habilita Customize service worker paths and filenames. Establece Path to service worker files y Service worker registration scope en ese subdirectorio (por ejemplo /push/onesignal/). El archivo debe ser públicamente accesible en https://yourdomain.com/push/onesignal/OneSignalSDKWorker.js.

Si el archivo no está en la raíz del sitio y no configuras esos campos del dashboard, el SDK seguirá solicitando https://yourdomain.com/OneSignalSDKWorker.js y el registro del service worker fallará. Las configuraciones con código personalizado deben establecer serviceWorkerPath en OneSignal.init() en lugar de estos campos del dashboard.

Una vez que el archivo esté en tu servidor, verifica lo siguiente para asegurarte de que funciona:

Verifica la ubicación

Visita la URL que el SDK está configurado para usar. Si dejaste la configuración predeterminada, esa URL es la raíz del sitio. Si personalizaste la ruta, debe coincidir con Path to service worker files más el nombre del archivo:

Predeterminado: https://yourdomain.com/OneSignalSDKWorker.js
Ejemplo de subdirectorio: https://yourdomain.com/push/onesignal/OneSignalSDKWorker.js

Debe ser públicamente accesible en tu origen

El archivo OneSignalSDKWorker.js debe ser públicamente accesible y disponible en tu origen. No puede alojarse a través de un CDN o colocarse en un origen diferente con redirección.Cuando visites la URL del archivo, deberías ver el código.

Debe servirse con content-type: application/javascript

Este es un archivo JavaScript y debe servirse como tal. No puede tener un content-type de text/html.

Service worker de OneSignal

Configuración avanzada y migración desde otros proveedores de web push.

Agregar código a tu sitio

Para inicializar OneSignal en tu sitio con el SDK de JavaScript, copia el código proporcionado en las etiquetas <head> de tu sitio web. El dashboard de OneSignal proporciona este mismo fragmento de código prellenado con tu app ID. Si cargas scripts con Google Tag Manager, detente aquí y sigue la configuración de Google Tag Manager. Esa guía usa este mismo trabajo de dashboard y service worker, y luego inicializa el SDK en GTM en lugar de pegar el fragmento de abajo.

HTML

<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  OneSignalDeferred.push(async function(OneSignal) {
    await OneSignal.init({
      appId: "YOUR_ONESIGNAL_APP_ID",
    });
  });
</script>

Soporte iOS web push

Apple comenzó a soportar notificaciones web push en iPhones e iPads con iOS 16.4+. A diferencia de los dispositivos Android, donde web push funciona en un navegador compatible sin configuración adicional, Apple requiere un archivo manifest.json y una acción del usuario para agregar tu sitio a su pantalla de inicio.

Configuración iOS web push

Agrega el archivo manifest.json requerido y guía a los usuarios para agregar tu sitio a su pantalla de inicio.

Probar la integración del SDK de OneSignal

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.

Verificar suscripciones de web push

Inicie su sitio en un dispositivo de prueba.

Use Chrome, Firefox, Edge o Safari durante las pruebas.
No use el modo incógnito o navegación privada. Los usuarios no pueden suscribirse a notificaciones push en estos modos.
Los avisos deben aparecer según la configuración de sus solicitudes de permiso.
Haga clic en Permitir en el aviso nativo para suscribirse a notificaciones push.

Aviso de permiso nativo del navegador preguntando al usuario si permite o bloquea las notificaciones — Aviso de permiso nativo de web push

Revise su panel de OneSignal

Vaya a Audiencia > Suscripciones.
Debería ver una nueva entrada con el 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.

Configurar suscripciones de prueba

Las suscripciones de prueba son útiles para probar una notificación push antes de enviar un mensaje.

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.

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.

Cree un segmento de usuarios de prueba.

Vaya a Audiencia > Segmentos > Nuevo segmento.

Nombre el segmento.

Nombre el segmento Test Users (el nombre es importante porque se usará más adelante).

Agregue el filtro Test Users y haga clic en Crear segmento.

Editor de segmentos con el filtro Test Users seleccionado y el segmento nombrado Test Users — 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.

Enviar push de prueba mediante API

Obtenga su clave API de aplicación y ID de aplicación.

En su panel de OneSignal, vaya a Configuración > Claves e IDs.

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.

curl -X \
POST --url 'https://api.onesignal.com/notifications' \
 --header 'content-type: application/json; charset=utf-8' \
 --header 'authorization: Key YOUR_APP_API_KEY' \
 --data \
 '{
  "app_id": "YOUR_APP_ID",
  "target_channel": "push",
  "name": "Testing basic setup",
  "headings": {
  	"en": "👋"
  },
  "contents": {
    "en": "Hello world!"
  },
  "included_segments": [
    "Test Users"
  ],
  "chrome_web_image": "https://avatars.githubusercontent.com/u/11823027?s=200&v=4"
}'

Ejecute el código.

Ejecute el código en su terminal.

Verifique imágenes y entrega confirmada.

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 en Chrome macOS mostrando una imagen personalizada — Notificación push expandida con imagen en Chrome macOS

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)
Su ID de suscripción
La URL de su sitio web con el código de OneSignal

Identificación de usuarios

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.

Asignar ID externo

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.

Agregar etiquetas de datos

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

Agregar suscripciones de email y/o SMS

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 addEmail para crear suscripciones de email.
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.

Privacidad y consentimiento del usuario

Para controlar cuándo OneSignal recopila datos del usuario, use los métodos de control de consentimiento del SDK:

setConsentRequired(true): Previene la recopilación de datos hasta que se otorgue el consentimiento.
setConsentGiven(true): Habilita la recopilación de datos una vez que se otorgue el consentimiento.

Para más información sobre privacidad y seguridad:

Datos recopilados por el SDK

Revise qué datos recopila el SDK de OneSignal de los usuarios.

Manejo de datos personales

Gestione y proteja los datos de usuarios en cumplimiento con las normativas de privacidad.

Escuchar eventos de push, usuario e in-app

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.

Eventos de notificación push

Listener de evento de clic: Detecte cuándo se toca una notificación.
Listener de ciclo de vida en primer plano: Controle cómo se comportan las notificaciones en primer plano.

Cambios de estado del usuario

Listener de evento de cambio de estado del usuario: Detecte cuándo se establece el ID externo.
Observador de permisos: Rastree la interacción específica del usuario con el aviso de permiso push nativo.
Observador de cambio de suscripción push: Rastree cuándo cambia el estado de la suscripción push.

Configuración y capacidades avanzadas

Explore más capacidades para mejorar su integración:

Migrar a OneSignal

Migre desde otro proveedor de push a OneSignal.

Integraciones

Conecte OneSignal con herramientas y plataformas de terceros.

Botones de acción

Agregue botones interactivos a las notificaciones push.

Mensajería multiidioma

Envíe mensajes localizados a los usuarios en su idioma preferido.

Verificación de identidad

Proteja su integración del SDK con verificación de identidad en el servidor.

Resultados personalizados

Rastree eventos de conversión personalizados vinculados a sus mensajes.

Configuración y referencia del Web SDK

Configuración de web push

Habilite todas las funciones clave de web push para su integración.

Referencia del Web SDK

Detalles completos sobre métodos disponibles y opciones de configuración.

¡Felicitaciones! Ha completado exitosamente la guía de configuración del Web SDK.

Preguntas frecuentes

¿Funciona web push en sitios HTTP?

No. Web push requiere HTTPS. Los navegadores aplican esto como un requisito de seguridad. La única excepción es localhost y 127.0.0.1, que los navegadores tratan como orígenes seguros para fines de desarrollo.

¿Por qué necesito un archivo service worker?

El service worker se ejecuta en segundo plano y gestiona las notificaciones push entrantes incluso cuando el usuario no tiene tu sitio abierto. Sin él, el navegador no puede mostrar notificaciones. El archivo OneSignalSDKWorker.js debe ser públicamente accesible en tu origen.

¿Dónde busca el SDK Web el service worker?

El SDK Web busca OneSignalSDKWorker.js en la raíz de tu sitio (https://yourdomain.com/OneSignalSDKWorker.js) a menos que establezcas una ruta personalizada. Sitio típico establece la ruta en el dashboard: habilita Customize service worker paths and filenames en Settings > Push & In-App > Web > Advanced Push Settings. Código personalizado no usa esos campos del dashboard. Pasa serviceWorkerPath y serviceWorkerParam en OneSignal.init(). Consulta Configuración con código personalizado.

¿Debo usar esta guía si mi sitio está en WordPress o Shopify?

No. Usa la configuración de WordPress o la configuración de Shopify. Esas integraciones agregan el SDK y el service worker por ti.

¿Cuál es la diferencia entre Sitio típico y Código personalizado?

Sitio típico es la ruta recomendada en esta página: configuras prompts, la mayoría de las opciones y la ruta del service worker en el dashboard de OneSignal, y luego agregas el fragmento de JavaScript. Código personalizado es para control programático. Estableces prompts, opciones de init y la ruta del service worker en código con serviceWorkerPath y serviceWorkerParam. Consulta Configuración con código personalizado.

¿Necesito subir un certificado de Safari?

No, no para Safari en macOS 13+ o iOS 16.4+. OneSignal usa VAPID automáticamente. Sube un .p12 de Safari Web Push solo para la ruta heredada de Website Push ID (macOS 12 y anteriores, más los suscriptores heredados existentes). Ver Certificado .p12 de Safari Web Push.

¿Puedo usar una clave .p8 para web push en Safari?

No. Apple no ofrece un token o clave .p8 para web push en Safari. Usa un .p8 solo para apps nativas de iOS o macOS. Ver Conexión a APNs basada en token p8 de iOS. La única credencial de Safari es un .p12 de Safari Web Push, y solo para la ruta heredada.

¿Puedo usar web push en iOS (iPhone/iPad)?

Sí, a partir de iOS 16.4+. Sin embargo, Apple requiere un archivo manifest.json y el usuario debe agregar tu sitio a su pantalla de inicio primero. Consulta Configuración iOS web push para conocer todos los requisitos. iOS web push usa VAPID. No subes un .p12 de Safari ni un .p8 para esto.

¿Por qué no se muestran mis notificaciones?

Las causas comunes incluyen un archivo service worker colocado incorrectamente, una URL del sitio que no coincide en el dashboard, o el usuario tiene las notificaciones bloqueadas en la configuración de su navegador. Consulta Web push: Notificaciones no mostradas para obtener una lista completa de solución de problemas.

¿Necesita ayuda?Chatee con nuestro equipo de Soporte o envíe un correo electrónico a support@onesignal.comPor favor incluya:

Detalles del problema que está experimentando y pasos para reproducir si están disponibles
Su ID de aplicación de OneSignal
El ID externo o ID de suscripción si corresponde
La URL del mensaje que probó en el panel de OneSignal si corresponde
Cualquier registro o mensaje de error relevante

¡Estamos felices de ayudar!

Configuración de WordPress

Configuración de Shopify

Configuración con código personalizado

​Requisitos

​Configurar tu app OneSignal y plataforma

Sitio típico (recomendado)

WordPress

Código personalizado

​Configuración del sitio

​URL del sitio

​Pruebas locales

​Prompt de permisos

Prompts de permiso web

​Notificación de bienvenida (opcional)

​Configuraciones avanzadas

​Webhooks

Webhooks web push

​Service workers

​Comportamiento de clic

URLs, enlaces y enlaces profundos

Botones de acción

Listeners de eventos push del SDK Web

​Persistencia

​Certificado .p12 de Safari Web Push (opcional, heredado)

​Subir archivo service worker

Service worker de OneSignal

​Agregar código a tu sitio

​Soporte iOS web push

Configuración iOS web push

​Probar la integración del SDK de OneSignal

​Verificar suscripciones de web push

​Configurar suscripciones de prueba

​Enviar push de prueba mediante API

Informes de mensajes de notificaciones push

​Identificación de usuarios

​Asignar ID externo

​Agregar etiquetas de datos

​Agregar suscripciones de email y/o SMS

​Privacidad y consentimiento del usuario

Datos recopilados por el SDK

Manejo de datos personales

​Escuchar eventos de push, usuario e in-app

​Eventos de notificación push

​Cambios de estado del usuario

​Configuración y capacidades avanzadas

Migrar a OneSignal

Integraciones

Botones de acción

Mensajería multiidioma

Verificación de identidad

Resultados personalizados

​Configuración y referencia del Web SDK

Configuración de web push

Referencia del Web SDK

​Preguntas frecuentes

​¿Funciona web push en sitios HTTP?

​¿Por qué necesito un archivo service worker?

​¿Dónde busca el SDK Web el service worker?

​¿Debo usar esta guía si mi sitio está en WordPress o Shopify?

​¿Cuál es la diferencia entre Sitio típico y Código personalizado?

​¿Necesito subir un certificado de Safari?

​¿Puedo usar una clave .p8 para web push en Safari?

​¿Puedo usar web push en iOS (iPhone/iPad)?

​¿Por qué no se muestran mis notificaciones?

Requisitos

Configurar tu app OneSignal y plataforma

Configuración del sitio

URL del sitio

Pruebas locales

Prompt de permisos

Notificación de bienvenida (opcional)

Configuraciones avanzadas

Webhooks

Service workers

Comportamiento de clic

Persistencia

Certificado .p12 de Safari Web Push (opcional, heredado)

Subir archivo service worker

Agregar código a tu sitio

Soporte iOS web push

Probar la integración del SDK de OneSignal

Verificar suscripciones de web push

Configurar suscripciones de prueba

Enviar push de prueba mediante API

Identificación de usuarios

Asignar ID externo

Agregar etiquetas de datos

Agregar suscripciones de email y/o SMS

Privacidad y consentimiento del usuario

Escuchar eventos de push, usuario e in-app

Eventos de notificación push

Cambios de estado del usuario

Configuración y capacidades avanzadas

Configuración y referencia del Web SDK

Preguntas frecuentes

¿Funciona web push en sitios HTTP?

¿Por qué necesito un archivo service worker?

¿Dónde busca el SDK Web el service worker?

¿Debo usar esta guía si mi sitio está en WordPress o Shopify?

¿Cuál es la diferencia entre Sitio típico y Código personalizado?

¿Necesito subir un certificado de Safari?

¿Puedo usar una clave .p8 para web push en Safari?

¿Puedo usar web push en iOS (iPhone/iPad)?

¿Por qué no se muestran mis notificaciones?