Configuración SDK Web

​

Descripción general

​

Requisitos

• Sitio web HTTPS: Web push no funciona en HTTP o en modos incógnito/privado.
• Acceso al servidor: Necesitarás 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), necesitarás 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.

​

Configurar tu app OneSignal y plataforma

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

Activa la plataforma web en tu configuración de OneSignal

​

Configuración 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 una imagen PNG o JPG cuadrada de 256x256px que aparece en notificaciones y prompts. Si no se establece, usamos una campana para el icono predeterminado.

Configuración web en el dashboard de OneSignal

​

URL del sitio

• Redirige a un único origen.
• O configura una app OneSignal por origen.

​

Pruebas locales

Configuración de Localhost

Establece la URL DEL SITIO para que coincida exactamente con la URL de tu entorno localhost. Debe ser una URL localhost común, ejemplos:

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

Si tu localhost está usando HTTP, selecciona Tratar HTTP localhost como HTTPS para pruebas.Google Chrome trata http://localhost y http://127.0.0.1 como orígenes seguros, permitiendo integraciones HTTPS incluso en HTTP. Por esto no puedes probar otros orígenes no estándar en HTTPS localhost.

Pruebas locales en el dashboard de OneSignal

​

Agregar allowLocalhostAsSecureOrigin a tus opciones init de OneSignal

Al inicializar OneSignal en tu sitio localhost, agrega allowLocalhostAsSecureOrigin: true, a tus opciones init de OneSignal.Adicionalmente, 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

Copy

Ask AI

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

​

Prompt de permisos

​

Notificación de bienvenida (opcional)

​

Configuraciones avanzadas

​

Webhooks

​

Service workers

• Ruta a archivos service worker es la ruta al directorio donde pondrás estos archivos.
• Nombres de archivo service worker principal y actualizador pueden ser simplemente OneSignalSDKWorker.js o si quieres renombrar este archivo. Debe usar extensión de archivo .js.
• Alcance de registro de service worker son las páginas en las que este archivo puede funcionar. Para notificaciones push, esto no importa y fue diseñado originalmente para casos donde quieres agregar más funcionalidad al archivo service worker. Deberías establecer esto como la misma ruta que tu ubicación.

Configuración de service worker

​

Comportamiento de clic

• Si los usuarios no tienen tu sitio abierto en ninguna pestaña del navegador, y hacen clic en una notificación que los lleva a tu sitio, el navegador abrirá una nueva pestaña y navegará a la URL de la notificación.
• Si los usuarios tienen tu sitio abierto en una o más pestañas del navegador, y hacen clic en una notificación que los lleva a tu sitio, hay varias formas posibles en que el navegador puede comportarse que puedes configurar:
  • Navegación exacta (predeterminado) - Si la URL exacta de la notificación (ej. example.com/product) coincide con una pestaña que el navegador ya tiene abierta, el navegador navegará a la URL de la notificación en esa pestaña.
  • Navegación de origen - Si el origen de la notificación (ej. example.com) coincide con una pestaña que el navegador ya tiene abierta, el navegador navegará a la URL de la notificación en esa pestaña.
  • Enfoque exacto - Si la URL exacta de la notificación (ej. example.com/product) coincide con una pestaña que el navegador ya tiene abierta, el navegador enfocará en esa pestaña, pero no refrescará la página.
  • Enfoque de origen - Si el origen de la notificación (ej. example.com) coincide con una pestaña que el navegador ya tiene abierta, el navegador enfocará en esa pestaña, pero no refrescará la página.

​

Persistencia

​

Certificado Safari (Opcional)

Configuración de certificado Safari

​

Subir archivo service worker

Paso de subir archivo service worker

​

Agregar código a tu sitio

  <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

​

Testing the OneSignal SDK integration

​

Check web push subscriptions

1

Launch your site on a test device.

• Use Chrome, Firefox, Edge, or Safari while testing.
• Do not use Incognito or private browsing mode. Users cannot subscribe to push notifications in these modes.
• The prompts should appear based on your permission prompts configuration.
• Click Allow on the native prompt to subscribe to push notifications.

Web push native permission prompt

2

Check your OneSignal dashboard

Check the OneSignal dashboard:

• Go to Audience > Subscriptions.
• You should see a new entry with the status Subscribed.

Dashboard showing subscription with 'Subscribed' status

You have successfully created a web push subscription. Web push subscriptions are created when users first subscribe to push notifications on your site.

​

Set up test subscriptions

1

Add to Test Subscriptions.

In the dashboard, next to the subscription, click the Options (three dots) button and select Add to Test Subscriptions.

Adding a device to Test Subscriptions

2

Name your subscription.

Name the subscription so you can easily identify your device later in the Test Subscriptions tab.

Dashboard showing the 'Name your subscription' field

3

Create a test users segment.

Go to Audience > Segments > New Segment.

4

Name the segment.

Name the segment Test Users (the name is important because it will be used later).

5

Add the Test Users filter and click Create Segment.

Creating a 'Test Users' segment with the Test Users filter

You have successfully created a segment of test users. We can now test sending messages to this individual device and groups of test users.

​

Send test push via API

1

Get your App API Key and App ID.

In your OneSignal dashboard, go to Settings > Keys & IDs.

2

Update the provided code.

Replace YOUR_APP_API_KEY and YOUR_APP_ID in the code below with your actual keys. This code uses the Test Users segment we created earlier.

Copy

Ask AI

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"
}'

3

Run the code.

Run the code in your terminal.

4

Check images and confirmed delivery.

If all setup steps were completed successfully, the test subscriptions should receive a notification.

Only Chrome supports images. Images will appear small in the collapsed notification view. Expand the notification to see the full image.

Expanded push notification with image on Chrome macOS

5

Check for confirmed delivery.

In your dashboard, go to Delivery > Sent Messages, then click the message to view stats.You should see the confirmed stat, meaning the device received the push.

Safari does not support Confirmed Delivery.

Delivery stats showing confirmed delivery

If you’re on a Professional plan or higher, scroll to Audience Activity to see subscription-level confirmation:

Confirmed delivery at the device level in Audience Activity

You have successfully sent a notification via our API to a segment.

Need help? Contact support@onesignal.com with the following information:

• Copy-paste the API request and response into a .txt file
• Your Subscription ID
• Your website URL with the OneSignal code

We’ll be happy to help!

​

User identification

​

Assign External ID

​

Add data tags

A user profile in OneSignal with a tag called "current_level" set to "6"

Segment editor showing a segment targeting users with a current_level value of greater than 4 and less than 10

Screenshot showing a push notification targeting the Level 5-10 segment with a personalized message

​

Add email and/or SMS subscriptions

• Use the addEmail method to create email subscriptions.
• Use the addSms method to create SMS subscriptions.

A user profile with push, email, and SMS subscriptions unified by External ID

​

Privacy & user consent

• setConsentRequired(true): Prevents data collection until consent is given.
• setConsentGiven(true): Enables data collection once consent is granted.

• Data collected by the SDK
• Handling personal data

​

Listen to push, user, and in-app events

​

Push notification events

• Click event listener: Detect when a notification is tapped.
• Foreground lifecycle listener: Control how notifications behave in foreground.

​

User state changes

• User state change event listener: Detect when the External ID is set.
• Permission observer: Track the user’s specific interaction with the native push permission prompt.
• Push subscription change observer: Track when the push subscription status changes.

​

Advanced setup & capabilities

• 🔁 Migrating to OneSignal from another service
• 🔌 Integrations
• 🛎️ Action buttons
• 🌐 Multi-language messaging
• 🛡️ Identity Verification
• 📊 Custom Outcomes

​

Web SDK setup & reference