> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Web SDK - Configuración de código personalizado

> 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.

export const SdkReleasesIframe = ({sdkFilter = undefined, viewMode = undefined, height, ...frameProps}) => {
  const baseUrl = 'https://onesignal.github.io/sdk-releases';
  const buildUrl = (theme, sdkFilter, viewMode) => {
    const url = new URL(baseUrl);
    const params = new URLSearchParams();
    if (theme) {
      params.set('theme', theme);
    }
    if (sdkFilter) {
      params.set('sdk', sdkFilter);
    }
    if (viewMode) {
      params.set('viewMode', viewMode);
    }
    if (params.toString()) {
      url.search = params.toString();
    }
    return url.toString();
  };
  const detectTheme = () => {
    if (document.documentElement.classList.contains('dark')) {
      return 'dark';
    }
    return 'light';
  };
  const [theme, setTheme] = useState('light');
  const [iframeSrc, setIframeSrc] = useState(() => {
    const initialTheme = detectTheme();
    return buildUrl(initialTheme, sdkFilter, viewMode);
  });
  useEffect(() => {
    const currentTheme = detectTheme();
    setTheme(currentTheme);
    setIframeSrc(buildUrl(currentTheme, sdkFilter, viewMode));
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleThemeChange = () => {
      const newTheme = detectTheme();
      setTheme(newTheme);
      setIframeSrc(buildUrl(newTheme, sdkFilter, viewMode));
    };
    if (mediaQuery.addEventListener) {
      mediaQuery.addEventListener('change', handleThemeChange);
    } else {
      mediaQuery.addListener(handleThemeChange);
    }
    window.addEventListener('storage', handleThemeChange);
    const observer = new MutationObserver(handleThemeChange);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class', 'data-theme']
    });
    return () => {
      if (mediaQuery.removeEventListener) {
        mediaQuery.removeEventListener('change', handleThemeChange);
      } else {
        mediaQuery.removeListener(handleThemeChange);
      }
      window.removeEventListener('storage', handleThemeChange);
      observer.disconnect();
    };
  }, [sdkFilter, viewMode]);
  const getIframeHeight = () => {
    if (viewMode === 'table') {
      return '450';
    }
    if (viewMode === 'mini') {
      return '170';
    }
    return '800';
  };
  const iframeHeight = height || getIframeHeight();
  return <Frame {...frameProps}>
      <iframe src={iframeSrc} width="100%" height={iframeHeight} frameBorder="0" style={{
    border: "none"
  }} title="SDK Releases" key={iframeSrc} />
    </Frame>;
};

<SdkReleasesIframe sdkFilter="react,vue,vue3,angular,wordpress" viewMode="table" height="380" />

<Warning>
  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:

  * [Configuración Web Push típica](./web-push-setup)
  * [Configuración WordPress](./wordpress)
  * [Configuración Shopify](./shopify)
</Warning>

Si estás usando un framework JavaScript, sigue estas guías especializadas:

* [Configuración Angular](./angular-setup)
* [Configuración React JS](./react-js-setup)
* [Configuración Vue JS](./vue-js-setup)

## Requisitos

* 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](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy). 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.

***

## Configurar tu aplicación y plataforma OneSignal

En el panel de OneSignal:

* Ve a **Settings > Push & In-App > Web**.
* Selecciona el tipo de integración **Custom Code**.

### Configuración del sitio

Agrega los detalles del sitio:

* **Site Name**: El nombre de tu sitio y el título de notificación predeterminado.
* **Site URL**: El [origen](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) exacto de tu sitio, por ejemplo `https://yourdomain.com`. Evita usar `www.` si tu sitio no está configurado así. Consulta los [Requisitos](#requirements) 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.

<Frame caption="Configuración Web en el panel de OneSignal">
  <img src="https://mintcdn.com/onesignal/uaUYB-ILUGPSRvKB/images/docs/web-push-site-settings.png?fit=max&auto=format&n=uaUYB-ILUGPSRvKB&q=85&s=893a536c16cb4c439bc8fe53892861da" alt="OneSignal web push configuration showing site name, URL, and icon settings" width="2072" height="712" data-path="images/docs/web-push-site-settings.png" />
</Frame>

#### Pruebas locales

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.

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

### Certificado Safari web push (opcional)

OneSignal proporciona certificados Safari automáticamente sin costo. Solo habilita esto si tienes certificados Safari Web Push existentes que necesitas usar.

<Frame caption="Opción de carga de certificado Safari para certificados existentes">
  <img src="https://mintcdn.com/onesignal/uaUYB-ILUGPSRvKB/images/docs/web-push-safari-cert.png?fit=max&auto=format&n=uaUYB-ILUGPSRvKB&q=85&s=a7bbe7cac04c5b2b90988b67f6abc38c" alt="Safari certificate upload option" width="1876" height="882" data-path="images/docs/web-push-safari-cert.png" />
</Frame>

Si está habilitado, sube tu `Safari Web .p12 Push Certificate` e ingresa la contraseña.

Haz clic en **Save** para continuar.

### Subir archivos service worker

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.

<Card title="Service worker de OneSignal" icon="gear" href="./onesignal-service-worker">
  Configuración avanzada del service worker, integración personalizada y migración desde otros proveedores.
</Card>

### Agregar código al sitio

Agrega este código a la sección `<head>` de tu sitio web. Reemplaza:

* `YOUR_ONESIGNAL_APP_ID` con tu App ID real del panel de OneSignal
* `YOUR_SAFARI_WEB_ID` con tu Safari Web ID real del panel de OneSignal

```html HTML theme={null}
<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",
      safari_web_id: "YOUR_SAFARI_WEB_ID",
      notifyButton: {
        enable: true,
      },
    });
  });
</script>
```

### Soporte de push web para iOS

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.

<Card title="Configuración push web para iOS" icon="apple" href="./web-push-for-ios">
  Agrega el archivo `manifest.json` requerido y guía a los usuarios para agregar tu sitio a su pantalla de inicio.
</Card>

***

## 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

<Steps>
  <Step title="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](/docs/es/permission-requests).
    * Haga clic en **Permitir** en el aviso nativo para suscribirse a notificaciones push.

    <Frame caption="Aviso de permiso nativo de web push">
      <img src="https://mintcdn.com/onesignal/FXJz6yFfOqztaEND/images/push/web-push-native-permission-prompt.png?fit=max&auto=format&n=FXJz6yFfOqztaEND&q=85&s=91c15dd6677de6a0ba37da20449ccca1" alt="Aviso de permiso nativo del navegador preguntando al usuario si permite o bloquea las notificaciones" width="1724" height="974" data-path="images/push/web-push-native-permission-prompt.png" />
    </Frame>
  </Step>

  <Step title="Revise su panel de OneSignal">
    * Vaya a **Audiencia > Suscripciones**.
    * Debería ver una nueva entrada con el estado **Suscrito**.

    <Frame caption="Panel mostrando suscripción con estado 'Suscrito'">
      <img src="https://mintcdn.com/onesignal/KPVdijCt4_xCbkO8/images/dashboard/web-push-subscription-status.png?fit=max&auto=format&n=KPVdijCt4_xCbkO8&q=85&s=786e9c5e4131f01fef20d11bebd1a3d0" alt="Página de Suscripciones del panel OneSignal mostrando una suscripción de web push con estado Suscrito" width="1188" height="742" data-path="images/dashboard/web-push-subscription-status.png" />
    </Frame>

    <Check>Ha creado exitosamente una [suscripción de web push](/docs/es/subscriptions).
    Las suscripciones de web push se crean cuando los usuarios se suscriben por primera vez a notificaciones push en su sitio.</Check>
  </Step>
</Steps>

### Configurar suscripciones de prueba

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

<Steps>
  <Step title="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**.

    <Frame caption="Agregar un dispositivo a Suscripciones de prueba">
      <img src="https://mintcdn.com/onesignal/NCUI56Tiw7V-s0dT/images/dashboard/add-to-test-subscriptions.png?fit=max&auto=format&n=NCUI56Tiw7V-s0dT&q=85&s=2455d4cd74ea4ad686f76730cd95bbaa" alt="Menú de opciones en una suscripción mostrando la opción Agregar a suscripciones de prueba" width="1188" height="742" data-path="images/dashboard/add-to-test-subscriptions.png" />
    </Frame>
  </Step>

  <Step title="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**.
  </Step>

  <Step title="Cree un segmento de usuarios de prueba.">
    Vaya a **Audiencia > Segmentos > Nuevo segmento**.
  </Step>

  <Step title="Nombre el segmento.">
    Nombre el segmento `Test Users` (el nombre es importante porque se usará más adelante).
  </Step>

  <Step title="Agregue el filtro Test Users y haga clic en Crear segmento.">
    <Frame caption="Crear un segmento 'Test Users' con el filtro Test Users">
      <img src="https://mintcdn.com/onesignal/NCUI56Tiw7V-s0dT/images/dashboard/create-test-users-segment.png?fit=max&auto=format&n=NCUI56Tiw7V-s0dT&q=85&s=91b8a021be6e83662854e68ec3e1da04" alt="Editor de segmentos con el filtro Test Users seleccionado y el segmento nombrado Test Users" width="1188" height="742" data-path="images/dashboard/create-test-users-segment.png" />
    </Frame>

    <Check>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.</Check>
  </Step>
</Steps>

### Enviar push de prueba mediante API

<Steps>
  <Step title="Obtenga su clave API de aplicación y ID de aplicación.">
    En su panel de OneSignal, vaya a **Configuración > [Claves e IDs](/docs/es/keys-and-ids)**.
  </Step>

  <Step title="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 theme={null}
    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"
    }'
    ```
  </Step>

  <Step title="Ejecute el código.">
    Ejecute el código en su terminal.
  </Step>

  <Step title="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.

    <Warning>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.</Warning>

    <Frame caption="Notificación push expandida con imagen en Chrome macOS">
      <img src="https://mintcdn.com/onesignal/FXJz6yFfOqztaEND/images/push/web-push-image.png?fit=max&auto=format&n=FXJz6yFfOqztaEND&q=85&s=8dd90279daff9e24d3fd281e73aa1e74" alt="Notificación push expandida en Chrome macOS mostrando una imagen personalizada" width="740" height="896" data-path="images/push/web-push-image.png" />
    </Frame>
  </Step>

  <Step title="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.

    <Note>Safari no admite Entrega confirmada.</Note>

    <Card title="Informes de mensajes de notificaciones push" icon="chart-bar" href="/docs/es/push-notification-message-reports">
      Vea estadísticas de entrega, clics y conversiones para sus notificaciones push.
    </Card>
  </Step>
</Steps>

<Check>Ha enviado exitosamente una notificación mediante la API a un segmento.</Check>

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](/docs/es/subscriptions) de web push. Esta sección expande la identificación de [usuarios](/docs/es/users) 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](/docs/es/integrations)).

Establezca el ID externo con el [método `login`](/docs/es/web-sdk-reference#login-external-id) del SDK cada vez que un usuario sea identificado por su aplicación.

<Note>
  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.
</Note>

### Agregar etiquetas de datos

Las [etiquetas](/docs/es/add-user-data-tags) 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](/docs/es/message-personalization) y [segmentación](/docs/es/segmentation) avanzadas, permitiendo casos de uso más avanzados.

Establezca etiquetas con los [métodos `addTag` y `addTags`](/docs/es/web-sdk-reference#addtag-%2C-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`.

<Frame caption="Un perfil de usuario en OneSignal con una etiqueta llamada &#x22;current_level&#x22; establecida en &#x22;6&#x22;">
  <img src="https://mintcdn.com/onesignal/4HyuQPBpu-4xjmQC/images/docs/d4674261847231079fecc176ba88065409c90943e3854b9df200457325a0aed4-Screenshot_2025-03-18_at_14.47.25.png?fit=max&auto=format&n=4HyuQPBpu-4xjmQC&q=85&s=91083bf83a4c03ea40d485b23f072259" width="1380" height="941" data-path="images/docs/d4674261847231079fecc176ba88065409c90943e3854b9df200457325a0aed4-Screenshot_2025-03-18_at_14.47.25.png" />
</Frame>

Podemos crear un segmento de usuarios que tengan un nivel entre 5 y 10, y usar eso para enviar mensajes dirigidos y personalizados:

<Frame caption="Editor de segmentos mostrando un segmento dirigido a usuarios con un valor de current_level mayor que 4 y menor que 10">
  <img src="https://mintcdn.com/onesignal/3zq1PvSaqvUE2bIx/images/docs/300d36b632a6f6d7017780457bbe2610b71767fd0db093c7611e59714dcbda5b-Screenshot_2025-03-18_at_14.49.56.png?fit=max&auto=format&n=3zq1PvSaqvUE2bIx&q=85&s=b84ab0d2c6eedbd6d4e7a2bf15afe103" width="1380" height="941" data-path="images/docs/300d36b632a6f6d7017780457bbe2610b71767fd0db093c7611e59714dcbda5b-Screenshot_2025-03-18_at_14.49.56.png" />
</Frame>

<br />

<Frame caption="Captura de pantalla mostrando una notificación push dirigida al segmento Nivel 5-10 con un mensaje personalizado">
  <img src="https://mintcdn.com/onesignal/tc0EvmtSSX56SX0c/images/docs/97e09b42d25c6d3f4c7cb0a6fff4dfb8893cbb4b283f7ff1f77977c33113319c-Screenshot_2025-03-18_at_14.55.47.png?fit=max&auto=format&n=tc0EvmtSSX56SX0c&q=85&s=c7839b12057d65a12a4eaddce6e2c11f" width="2764" height="2286" data-path="images/docs/97e09b42d25c6d3f4c7cb0a6fff4dfb8893cbb4b283f7ff1f77977c33113319c-Screenshot_2025-03-18_at_14.55.47.png" />
</Frame>

### 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`](/docs/es/web-sdk-reference#addemail-%2C-removeemail) para crear suscripciones de email.
* Use el [método `addSms`](/docs/es/web-sdk-reference#addsms-%2C-removesms) 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](/reference/view-user).

<Frame caption="Un perfil de usuario con suscripciones de push, email y SMS unificadas por ID externo">
  <img src="https://mintcdn.com/onesignal/56ctKxZSV4m5VEkn/images/docs/b1cf9999d41da6e4ce333e1126612529b85eac47447bb0b434418d082f595acd-Screenshot_2025-03-18_at_14.43.46.png?fit=max&auto=format&n=56ctKxZSV4m5VEkn&q=85&s=7c3885b66e44e097fa0ed7c47f27c911" width="1506" height="848" data-path="images/docs/b1cf9999d41da6e4ce333e1126612529b85eac47447bb0b434418d082f595acd-Screenshot_2025-03-18_at_14.43.46.png" />
</Frame>

<Note>
  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.
</Note>

***

### 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)`](/docs/es/web-sdk-reference#setconsentrequired): Previene la recopilación de datos hasta que se otorgue el consentimiento.
* [`setConsentGiven(true)`](/docs/es/web-sdk-reference#setconsentgiven): Habilita la recopilación de datos una vez que se otorgue el consentimiento.

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

<Columns cols={2}>
  <Card title="Datos recopilados por el SDK" icon="database" href="/docs/es/data-collected-by-the-onesignal-sdk">
    Revise qué datos recopila el SDK de OneSignal de los usuarios.
  </Card>

  <Card title="Manejo de datos personales" icon="shield-halved" href="/docs/es/handling-personal-data">
    Gestione y proteja los datos de usuarios en cumplimiento con las normativas de privacidad.
  </Card>
</Columns>

***

## 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](/docs/es/web-sdk-reference) para más detalles.

### Eventos de notificación push

* [Listener de evento de clic](/docs/es/web-sdk-reference#click): Detecte cuándo se toca una notificación.
* [Listener de ciclo de vida en primer plano](/docs/es/web-sdk-reference#foregroundwilldisplay): Controle cómo se comportan las notificaciones en primer plano.

### Cambios de estado del usuario

* [Listener de evento de cambio de estado del usuario](/docs/es/web-sdk-reference#addeventlistener-user-state): Detecte cuándo se establece el ID externo.
* [Observador de permisos](/docs/es/web-sdk-reference#permissionchange): Rastree la interacción específica del usuario con el aviso de permiso push nativo.
* [Observador de cambio de suscripción push](/docs/es/web-sdk-reference#addeventlistener-push-subscription-changes): 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:

<Columns cols={3}>
  <Card title="Migrar a OneSignal" icon="rotate" href="/docs/es/migrating-to-onesignal">
    Migre desde otro proveedor de push a OneSignal.
  </Card>

  <Card title="Integraciones" icon="plug" href="/docs/es/integrations">
    Conecte OneSignal con herramientas y plataformas de terceros.
  </Card>

  <Card title="Botones de acción" icon="bell" href="/docs/es/action-buttons">
    Agregue botones interactivos a las notificaciones push.
  </Card>

  <Card title="Mensajería multiidioma" icon="globe" href="/docs/es/multi-language-messaging">
    Envíe mensajes localizados a los usuarios en su idioma preferido.
  </Card>

  <Card title="Verificación de identidad" icon="shield-check" href="/docs/es/identity-verification">
    Proteja su integración del SDK con verificación de identidad en el servidor.
  </Card>

  <Card title="Resultados personalizados" icon="chart-line" href="/docs/es/custom-outcomes">
    Rastree eventos de conversión personalizados vinculados a sus mensajes.
  </Card>
</Columns>

### Configuración y referencia del Web SDK

<Columns cols={2}>
  <Card title="Configuración de web push" icon="gear" href="/docs/es/web-push-setup">
    Habilite todas las funciones clave de web push para su integración.
  </Card>

  <Card title="Referencia del Web SDK" icon="code" href="/docs/es/web-sdk-reference">
    Detalles completos sobre métodos disponibles y opciones de configuración.
  </Card>
</Columns>

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

***

***

## Preguntas frecuentes

### ¿Necesito HTTPS para las notificaciones push web?

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](./angular-setup), [React](./react-js-setup) y [Vue](./vue-js-setup).

### ¿Qué sucede si un usuario borra los datos de su navegador?

La suscripción push del usuario se elimina. Si **Auto Resubscribe** está habilitado, se resuscribe automáticamente la próxima vez que visite tu sitio.

***

## Páginas relacionadas

<Columns cols={2}>
  <Card title="Solicitudes de permiso" icon="bell" href="./permission-requests">
    Configura cuándo y cómo se solicita a los usuarios que se suscriban.
  </Card>

  <Card title="Referencia SDK Web" icon="code" href="./web-sdk-reference">
    Referencia de API completa para el SDK Web de OneSignal.
  </Card>
</Columns>