Web SDK - Configuración de código personalizado

• Configuración Angular
• Configuración React JS
• Configuración Vue JS

​

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

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

​

Configuración del sitio

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

​

Pruebas locales

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

​

Subir archivos service worker

​

Agregar código al sitio

• 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

<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

​

Probar la integración del SDK de OneSignal

​

Verificar suscripciones de web push

1

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.

2

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

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.

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.

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

1

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.

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

Ejecute el código.

Ejecute el código en su terminal.

4

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.

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.

• 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

​

Asignar ID externo

​

Agregar etiquetas de datos

​

Agregar suscripciones de email y/o SMS

• Use el método addEmail para crear suscripciones de email.
• Use el método addSms para crear suscripciones de SMS.

​

Privacidad y consentimiento del usuario

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

​

Escuchar eventos de push, usuario e in-app

​

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

​

Configuración y referencia del Web SDK

​

Preguntas frecuentes

​

¿Necesito HTTPS para las notificaciones push web?

​

¿Puedo usar esta configuración con una aplicación de página única (SPA)?

​

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

​

Páginas relacionadas