Saltar al contenido principal

Descripción general

Esta guía te guía a través de la solución de problemas de tu configuración del Web SDK de OneSignal. Antes de continuar, revisa la Configuración del Web SDK para asegurarte de haber completado todos los pasos. Las razones más comunes por las que el web push parece no funcionar están realmente relacionadas con la configuración de notificaciones de tu navegador y dispositivo:

Compatibilidad del navegador

Los usuarios pueden ver solicitudes de permiso web pero no pueden suscribirse a notificaciones push en los modos de navegación de incógnito, privado o invitado.
BrowserWindowsmacOSAndroidiOS
Chrome✅ ¹
Firefox✅ ¹
Safari 10+✅ ¹
Microsoft Edge✅ ¹
Opera ²✅ ¹
Samsung Internet ²✅ ¹
Yandex ²✅ ¹
UC Browser ²✅ ¹
Internet Explorer
DuckDuckGo
¹ iOS requiere la instalación de una aplicación web (consulte Configuración de push web en iOS)² Los navegadores basados en Chromium aparecen como “Chrome” en los análisis de OneSignal

Configuración de notificaciones del dispositivo

La configuración de notificaciones y los modos de concentración de su dispositivo (No molestar, Batería baja, etc.) pueden estar bloqueando la aparición de notificaciones. También es posible que tenga las notificaciones desactivadas para aplicaciones específicas como sus navegadores. Compruebe lo siguiente para asegurarse de que su dispositivo esté configurado para recibir notificaciones.
  • Windows
  • macOS
  • Android
  • iOS
  1. Seleccione Inicio > Configuración > Notificaciones y acciones > Obtener notificaciones de aplicaciones y otros remitentes
  2. Asegúrese de que su sitio y navegador también estén habilitados.

Configuración de notificaciones en Windows 10

Configuración de notificaciones en Windows 11:
  1. Seleccione Inicio > Configuración > Sistema > Notificaciones

Configuración de notificaciones en Windows 11

  1. Active Notificaciones
  2. Desactive No molestar (durante las pruebas, las notificaciones push se mostrarán cuando esto esté desactivado)
  3. Desplácese hacia abajo hasta Notificaciones de aplicaciones y otros remitentes
  1. Asegúrese de que sus navegadores estén Activados.

Lista de navegadores en la configuración de notificaciones de Windows 11

Problemas de visualización del mensaje

Las siguientes son razones comunes por las que la solicitud de notificación push web puede no mostrarse como se esperaba.
1

Confirme que se haya configurado una solicitud

Revise su configuración de Solicitud de permiso web para asegurarse de haber configurado una solicitud y comprender los diferentes comportamientos del navegador.Por ejemplo, algunos navegadores como Safari requieren una acción del usuario (hacer clic en un botón) antes de que pueda aparecer la solicitud nativa. Los detalles de cada navegador se pueden encontrar en nuestra sección Solicitud de permiso web > Solicitud de permiso nativa.
2

Verifique la compatibilidad del navegador, los modos de incógnito, navegador privado o navegador de invitado.

Los navegadores no permiten que los usuarios se suscriban a notificaciones en estos modos. Es por eso que la solicitud deslizante puede mostrarse pero la solicitud de permiso nativa no se mostrará.Asegúrese de estar utilizando un navegador y dispositivo que admita push web.
3

Verifique la configuración de notificaciones de su navegador

Navegue a la configuración de su navegador y verifique la configuración de permisos de “Notificaciones”. Ejemplo de Chrome: chrome://settings/content/notifications

Configuración de notificaciones de Chrome

En este ejemplo:
  • El usuario ha seleccionado “No permitir que los sitios envíen notificaciones”, lo que impedirá que se muestre la solicitud de permiso nativa. Esto debe mostrar “Los sitios pueden solicitar enviar notificaciones” para permitir que se muestre la solicitud de permiso nativa.
  • El usuario ha agregado https://yoursite.com a la lista “No se permite enviar notificaciones”, lo que impedirá que se muestre la solicitud de permiso nativa. Esto debe eliminarse de la lista para permitir que se muestre la solicitud de permiso nativa.
Documentación específica del navegador:
  • Chrome - Esta página explica cómo administrar las notificaciones en Chrome yendo a Configuración > Privacidad y seguridad > Configuración del sitio > Notificaciones, donde puede controlar el comportamiento predeterminado y administrar los permisos de sitios web individuales.
  • Firefox - Esta guía cubre las notificaciones push web de Firefox, explicando cómo administrar los permisos de notificación a través de Configuración > Privacidad y seguridad > Notificaciones, y cómo controlar los permisos de sitios específicos a través del icono de información del sitio en la barra de direcciones.
  • Safari - Esta guía de Apple explica cómo personalizar las notificaciones de Safari en Mac a través de Safari > Preferencias > Sitios web > Notificaciones, donde puede administrar qué sitios pueden enviar notificaciones y controlar el comportamiento de las notificaciones a través de Preferencias del Sistema.
  • Edge - Este artículo detalla cómo administrar las notificaciones de Edge navegando a Configuración > Privacidad, búsqueda y servicios > Permisos del sitio > Notificaciones, o haciendo clic en el icono de información del sitio en la barra de direcciones.
4

No se cumplen los requisitos de iOS/iPadOS.

Para iOS, existen algunos requisitos adicionales para solicitar a los usuarios su suscripción. Se puede ver más información en la guía Push web móvil para iOS/iPadOS.

Pasos para solucionar problemas

Después de verificar lo anterior, sigue estos pasos para solucionar problemas de tu configuración del Web SDK de OneSignal.
1

Abrir la consola de herramientas de desarrollador del navegador

Las herramientas de desarrollador del navegador se pueden usar para interactuar con nuestro Web SDK en tu página web y habilitar el registro para verificar errores.
  • Desktop
  • Android
  • iOS
  • Chrome: Haz clic derecho en la página, haz clic en Inspeccionar y haz clic en la pestaña Consola de la ventana emergente que se abre.
  • Firefox: Haz clic derecho en la página, haz clic en Inspeccionar elemento y haz clic en la pestaña Consola de la ventana emergente que se abre.
  • Safari: Ve a Safari → Preferencias → Avanzado y asegúrate de que Mostrar menú Desarrollar en la barra de menús esté marcado. Luego, en tu página web, haz clic derecho, haz clic en Inspeccionar elemento y haz clic en la pestaña Consola de la ventana emergente que se abre.

Consola de herramientas de desarrollador de escritorio

2

Verificar que OneSignal se haya cargado e inicializado en tu página

En la Consola, ejecuta:
JavaScript
  OneSignal.initialized
Lo que significa el resultado:
  • true ✅ - OneSignal está inicializado y listo. Continúa con el siguiente paso.
  • false ⚠️ - OneSignal se cargó pero aún no ha terminado de inicializarse. Espera un momento e intenta de nuevo.
  • Uncaught ReferenceError: OneSignal is not defined ❌ Verifica que el fragmento de JavaScript de OneSignal esté en la sección <head> de tu sitio, verifica que el script se cargue antes de intentar usar los métodos de OneSignal. Revisa la guía de configuración del Web SDK
  • OneSignal is already defined El SDK se está inicializando más de una vez en la misma página. Elimina un método de inicialización. Si usas el plugin de WordPress, elimina cualquier código manual de OneSignal de tus archivos de tema.
3

Habilitar el registro del Web SDK

Ahora puedes ejecutar comandos en la Consola de herramientas de desarrollador. Ejecuta el siguiente código:
JavaScript
  OneSignal.Debug.setLogLevel('trace');
  • Deberías ver undefined como resultado.
  • Cierra la pestaña y abre una nueva en la misma página. Solo actualizar no activará todos los eventos de inicialización del SDK.
  • Comenzarás a ver los registros del SDK de OneSignal en la Consola.

Consola con registros detallados del SDK

Errores de configuración

Puedes encontrar los siguientes errores después de que OneSignal se inicialice:
Error: SDK already initialized

Error de inicialización duplicada del SDK

Lo que esto significa: El código init del Web SDK de OneSignal se está llamando más de una vez, a menudo causado por combinar la configuración del plugin de WordPress con código manual o agregar accidentalmente el código init de OneSignal varias veces. Cómo solucionarlo: Elimina cualquier llamada init duplicada. Si usas el plugin de WordPress, elimina cualquier código manual de OneSignal de tus archivos de tema.
Error: Can only be used on: (URL establecida en el panel de OneSignal)

El ejemplo muestra que la URL establecida en el panel de OneSignal `http://127.0.0.1:5501` no es el origen del sitio actual que estás visitando.

Lo que esto significa: El dominio que estás visitando actualmente no coincide con la URL del sitio configurada en tu panel de OneSignal. Cómo solucionarlo: Copia la URL del sitio en tu navegador y pégala en la configuración de Configuración > Push e In-app > Web > URL del sitio de tu panel de OneSignal. Asegúrate de que sea el origen del sitio usando el siguiente formato:
  • Protocolo: Debe ser https:// (para pruebas locales, consulta Configuración de Localhost)
  • Dominio: example.com vs www.example.com
  • Subdominio: app.example.com vs example.com
Los tres componentes deben coincidir entre la URL real de tu sitio y la configuración de tu panel.

Errores de instalación del service worker

Si se te presenta el mensaje de permiso nativo y haces clic en “Permitir”, puedes encontrar los siguientes errores de instalación del service worker:
Y: Falló el registro de un Service Worker.
[Instalación del Service Worker] Falló la instalación del service worker TypeError: No se pudo registrar un ServiceWorker para el alcance (‘https://your-site.com/’) con el script (‘https://your-site.com/...’): Se recibió un código de respuesta HTTP incorrecto (404) al obtener el script.
[Instalación del Service Worker] Falló la instalación del service worker TypeError: No se pudo registrar un ServiceWorker para el alcance (‘https://www.yoursite.com/’) con el script (‘https://www.yoursite.com/...’): Se recibió un código de respuesta HTTP incorrecto (403) al obtener el script.

Ejemplo de un error de instalación del service worker

El script tiene un tipo MIME no compatible (‘tipo MIME actual’). [Instalación del Service Worker] Falló la instalación del service worker SecurityError: No se pudo registrar un ServiceWorker para el alcance (‘https://your-site.com/’) con el script (‘https://your-site.com/…’): El script tiene un tipo MIME no compatible (‘tipo MIME actual’).

Error de tipo MIME en el service worker

[Instalación del Service Worker] Falló la instalación del service worker SecurityError: No se pudo registrar un ServiceWorker para el alcance (‘https://your-site.com/’) con el script (‘https://your-site.com/…’): El recurso del script está detrás de una redirección, lo cual no está permitido.

Error de redirección en la consola

Lo que esto significa: Tu archivo de service worker está configurado incorrectamente. Cómo solucionarlo:
1

Encuentra la ruta de tu service worker

Nuestro SDK busca el archivo de service worker OneSignalSDKWorker.js en el directorio raíz de tu sitio a menos que especifiques un nombre de archivo o ubicación personalizada como se describe en la Guía de configuración del Service Worker.Asegúrate de haber configurado el nombre de archivo, ubicación y alcance correctos para que nuestro SDK encuentre el archivo del service worker.
2

Visita el archivo del service worker directamente en tu navegador

Según tu configuración, abre el archivo directamente en tu navegador.
  • Si no configuraste una ubicación personalizada, entonces deberías ver el código JavaScript del archivo del service worker en la raíz de tu sitio: https://yoursite.com/OneSignalSDKWorker.js
  • Si usas WordPress, deberías verlo aquí: https://yoursite.com/wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/OneSignalSDKWorker.js
  • Si usas una ubicación personalizada, deberías verlo aquí: https://yoursite.com/your-custom-location/OneSignalSDKWorker.js
Los nombres de archivo distinguen entre mayúsculas y minúsculas. Asegúrate de usar OneSignalSDKWorker.js o el nombre de archivo que configuraste.Algunos servidores convertirán automáticamente el nombre del archivo a minúsculas. Ten esto en cuenta si no puedes encontrar el archivo.
3

Verifica que el archivo se cargue

  • Deberías ver el siguiente código JavaScript:
    JavaScript
    importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
    
  • Este archivo debe servirse con un content-type de application/javascript.
  • No puede haber redirecciones a este archivo. Los archivos deben estar alojados en el mismo dominio que tu sitio (sin dominios CDN o proxy)
Revisa la Guía de configuración del Service Worker para obtener instrucciones de configuración más detalladas.

Notificaciones no mostradas

Esta sección asume:
  1. Has revisado la guía Notificaciones no mostradas: Web Push para conocer las razones comunes por las que las notificaciones pueden no estar apareciendo en tu dispositivo.
  2. Se te mostró el mensaje de permiso nativo y hiciste clic en “Permitir”. Consulta Problemas de visualización del mensaje arriba si no te suscribiste a través del mensaje de permiso nativo.
Si lo anterior es cierto, sigue estos pasos para verificar tu ID de suscripción y enviarte una notificación push:
1

Obtener tu ID de suscripción

Ejecuta el siguiente código en la consola de herramientas de desarrollador del navegador:
JavaScript
  function getUserInfo() {
  	console.log('getUserInfo()');
  	Promise.all([
      OneSignal.Notifications.isPushSupported(),
  		OneSignal.Notifications.permission,
      OneSignal.User.PushSubscription.optedIn,
      OneSignal.User.PushSubscription.id
  	]).then(([
      isPushSupported,
      isSubscribed,
      isOptedIn,
      subscriptionId
    ]) => {
      console.log('The current URL of this page: ', location.href);
      console.log('Push is supported on this browser: ', isPushSupported);
      console.log('You are subscribed to notifications in the browser: ', isSubscribed);
      console.log('You are opted-in with OneSignal: ' , isOptedIn);
      console.log('Your OneSignal Subscription ID: ', subscriptionId);
    }).catch(e => {
      console.error('Error getting user info:', e);
    });
  }
  getUserInfo();
Esto te dirá:
  • La URL de la página en la que estás si hay alguna confusión.
  • Si el navegador actual que estás usando soporta notificaciones push.
    • true significa que el navegador soporta notificaciones push.
    • false significa que el navegador no soporta notificaciones push.
  • Si estás suscrito a notificaciones en el navegador.
    • true significa que permitiste permisos push para esta URL.
    • false significa que no permitiste o denegaste permisos push para esta URL.
  • Si estás optado con OneSignal.
    • true significa que tu suscripción está suscrita a notificaciones push en OneSignal.
    • false significa que tu suscripción no está suscrita a notificaciones push en OneSignal. Verifica si el método optOut() se está llamando en tu sitio.
  • Tu ID de suscripción de OneSignal.
    • Guarda esto para el siguiente paso. Este es el ID que usarás para enviarte una notificación push.

    Ejemplo de información del usuario

    Guarda estos datos de la consola en un archivo de texto y compártelos con nuestro equipo de soporte si necesitas más ayuda.
2

Enviarte una notificación

Si estás suscrito a notificaciones, optado con OneSignal y tienes un ID de suscripción, puedes enviarte una notificación.Sigue los pasos en Buscar y configurar suscripciones de prueba para configurarte como probador y enviarte una notificación.
3

Probar con Chrome

Si no estás recibiendo notificaciones en Chrome, usa estas herramientas de diagnóstico específicas de Chrome para identificar el problema.
  1. En una nueva pestaña, abre chrome://gcm-internals.
  2. Haz clic en el botón “Start Recording” en la parte superior izquierda. Asegúrate de ver “Connection State: CONNECTED”.
  3. Deja esto abierto y envíate otra notificación push a tu suscripción de web push de Chrome.
  4. Deberías ver algo en el “Receive Message Log” si lo recibiste.

Registro de internos de GCM

  • Si no ves un “Data msg received”, entonces tu navegador Chrome no está recibiendo la notificación en absoluto. Por favor háznos saber sobre esto en soporte.
  • Si ves “Data msg received” pero aún no recibiste una notificación, continúa con el siguiente paso.
  1. Abre una nueva pestaña en chrome://serviceworker-internals
  2. Busca Scope: https://your-site.com (reemplaza your-site.com con el dominio real de tu sitio).
  3. Haz clic en Inspect, o Start -> Inspect. Aparecerá una ventana emergente de Chrome Developer Tools.

Inspeccionando el service worker

  1. En la ventana emergente de Chrome Developer Tools de nuestro service worker, haz clic en la pestaña Console y ejecuta OneSignalWorker.log.trace();. Debería devolver undefined. Cualquier mensaje de nuestro service worker debería aparecer ahora en esta ventana emergente.
¿Necesita ayuda?Chatee con nuestro equipo de Soporte o envíe un correo electrónico a [email protected]Por 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!