Configuración de ReactJS y NextJS

​

Descripción general

​

Requisitos

• App y plataforma de OneSignal configuradas. Consulta Configuración de Web Push para comenzar.

​

Instalación

yarn add react-onesignal

​

Inicialización

"use client";

import { useEffect } from 'react';
import OneSignal from 'react-onesignal';

export default function Page() {
  useEffect(() => {
    // Asegúrate de que este código se ejecute solo en el lado del cliente
    if (typeof window !== 'undefined') {
      OneSignal.init({
        appId: 'YOUR_APP_ID',
        // Puedes agregar otras opciones de inicialización aquí
        notifyButton: {
          enable: true,
        }
      });
    }
  }, []);

  return (
    <div>
      <h1>Hello, world!</h1>
      {/* Resto del contenido de tu página */}
    </div>
  );
}

​

Personalizar opciones init

​

Configuración del Service Worker

​

Alojar el worker

• Raíz pública (predeterminado): /OneSignalSDKWorker.js
• Carpeta personalizada (recomendado): ej., /onesignal/OneSignalSDKWorker.js como se estableció en el paso anterior.

​

Verificar alojamiento del service worker

https://your-site.com/OneSignalSDKWorker.js

https://your-site.com/onesignal/OneSignalSDKWorker.js

​

Notas importantes

• Evita inicialización duplicada en desarrollo
  • Al probar en un entorno de desarrollo, podrías ver el SDK de OneSignal inicializar dos veces, lo que puede causar errores de consola.
  • Esto sucede debido a que <React.StrictMode> causa que los efectos se ejecuten dos veces en desarrollo. Para resolverlo, elimina <React.StrictMode> de tu componente raíz durante el desarrollo.

​

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.

2

Check your OneSignal dashboard

Check the OneSignal dashboard:

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

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.

2

Name your subscription.

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

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.

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.

Copiar

Preguntar a la IA

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.

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.

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

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

Need help? Contact [email protected] 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

​

Add email and/or SMS subscriptions

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

​

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