Saltar al contenido principal

​
Descripción general

Las notificaciones web push son una forma poderosa de re-involucrar a los usuarios y entregar información importante cuando no están navegando activamente tu sitio web. Soportan contenido rico incluyendo texto, imágenes, botones de acción, y pueden ayudar a aumentar la retención y el engagement del usuario.

Las notificaciones web push te ayudan a alcanzar usuarios incluso cuando no están en tu sitio

Para que web push funcione:
  • Sitio web HTTPS: Web push solo funciona en sitios seguros con un certificado SSL válido
  • Origen de dominio único: Debe seguir la política de mismo origen
  • Permiso del usuario: Los usuarios deben otorgar permiso explícitamente para recibir notificaciones
  • Navegadores soportados: Funciona en la mayoría de navegadores modernos (Chrome, Firefox, Safari, Edge)
Limitaciones importantes:
  • Los usuarios no pueden suscribirse mientras están en modo Incógnito o navegación privada
  • Los dispositivos iOS requieren configuración adicional (ver Web push para iOS)
  • Algunos navegadores pueden tener límites de notificaciones o requerir interacción del usuario, ver Preguntas frecuentes Web Push
Esta guía recorre cada paso—desde la configuración del SDK hasta enviar mensajes push personalizados—para ayudarte a implementar exitosamente las notificaciones push de OneSignal.

​
Guías para desarrolladores web push

Antes de que puedas enviar notificaciones web push, tu desarrollador necesita completar los siguientes pasos.
¿No eres desarrollador? Ver Gestionar miembros del equipo para invitar a un compañero de equipo con acceso de desarrollador a tu proyecto OneSignal.

Configuración SDK Web

Guía completa para instalar y configurar el SDK Web de OneSignal, incluyendo pruebas en localhost y prompts de permiso.

Plugin WordPress

Integra rápidamente notificaciones push en WordPress usando nuestro plugin oficial—sin codificación requerida.

Configuración iOS web push

Sigue los pasos específicos de Apple para habilitar web push en iPhones e iPads ejecutando iOS 16.4+.

Migración desde otro proveedor

Aprende a hacer la transición desde otro proveedor web push y retener tus suscriptores.

​
Opciones de configuración

Configura tu sitio web para web push en el dashboard de OneSignal bajo Settings > Push & In-App > Web.

Activa la plataforma web en tu configuración de OneSignal

Selecciona el tipo de integración que coincida con tu sitio:

Elige tu tipo de integración basado en la configuración de tu sitio web


Sitio típico

Recomendado - Configura prompts, notificación de bienvenida y configuración de service worker directamente en el dashboard—sin codificación backend requerida.

WordPress

Usa el plugin oficial de OneSignal para configurar fácilmente push en tu sitio WordPress con configuración completa basada en UI.

Código personalizado

Configuración de control completo para desarrolladores que quieren personalizar todo a través de código.
Detalles del sitio:
  • Nombre del sitio: Usado en títulos de notificación predeterminados
  • URL del sitio: Debe coincidir exactamente con tu origen de dominio (sin rutas o desajuste de www)
  • Resuscripción automática: Recomendado - Resuscribe automáticamente a usuarios recurrentes que limpiaron datos del navegador
  • URL de icono predeterminado: Imagen de 256x256px mostrada en notificaciones (si no se establece, se usa un icono de campana predeterminado)

​
Resuscripción automática

Un concepto importante con web push es que si los usuarios limpian sus datos del navegador, dejarán de recibir notificaciones push. Habilita esta opción para resuscribir automáticamente a los usuarios cuando regresen a tu sitio. Ver Suscripciones para más detalles.

Configuración web en el dashboard de OneSignal

​
Prompts de permiso web

Solicitar permiso de notificación a los usuarios es crítico para el opt-in. Puedes personalizar el comportamiento y apariencia de las solicitudes de permiso según tu configuración. Mejores prácticas:
  • Usa mensajería clara que explique el beneficio
  • Solicita a los usuarios en el momento correcto (ej. después del engagement)
  • Usa un pre-prompt antes de activar el diálogo nativo del navegador

Prompts de permiso web

Compara diferentes tipos de prompt (slidedown, basado en categorías, nativo, campana de suscripción y más) y aprende cuándo usar cada uno.

Referencia SDK Web

Aprende a controlar programáticamente cuándo y cómo se muestran los prompts usando el SDK.

​
Notificación de bienvenida

Puedes habilitar un push de confirmación opcional que se envía inmediatamente después de que un usuario se suscriba. La integración Típica y Wordpress puede establecer esto en el dashboard.

Las notificaciones de bienvenida confirman la suscripción exitosa y demuestran valor

La integración de Código personalizado usa el objeto welcomeNotification en la función OneSignal.init. Ver Referencia SDK Web para detalles. ¿Por qué enviar notificaciones de bienvenida?
  • Permite que los usuarios sepan que se han suscrito exitosamente
  • Muestra cómo se verán las futuras notificaciones
  • Proporciona contenido de incorporación o siguientes pasos

​
Entender usuarios y suscripciones

Cuando un usuario se suscribe a push, OneSignal automáticamente crea una suscripción única vinculada a su navegador/dispositivo. Las suscripciones web push se crean cuando los usuarios:
  • Otorgan permiso para notificaciones push en tu sitio web usando un navegador y dispositivo específico
  • Regresan a tu sitio después de limpiar datos del navegador (si la Resuscripción automática está habilitada)
  • Se suscriben desde un nuevo navegador o dispositivo
Notas importantes:
  • Cada combinación de navegador/dispositivo crea una suscripción separada
  • El modo incógnito/navegación privada no puede crear suscripciones
  • Las suscripciones web push permanecen anónimas hasta que les asignas un External ID

Dashboard OneSignal: Audience > Users


Usuarios

Aprende a gestionar usuarios, asignar External IDs y rastrear su actividad.

Suscripciones

Entiende cómo funcionan las suscripciones a través de navegadores y dispositivos.

Segmentos

Agrupa usuarios en segmentos para dirigirte basado en comportamiento, dispositivo y más.

​
Soporte iOS

Apple agregó soporte web push para iPhones e iPads ejecutando iOS 16.4+ pero con requisitos más estrictos:
  • Los usuarios deben agregar tu sitio a su pantalla de inicio
  • Los prompts de permiso se muestran solo después de ese paso
  • Las notificaciones se comportan como alertas de app nativa una vez habilitadas

Web push para iOS

Instrucciones paso a paso para habilitar soporte iOS, incluyendo configuración de service worker y manifest.

Hacer que tu audiencia agregue a pantalla de inicio

Consejos para alentar a los usuarios a instalar tu sitio para que puedan recibir iOS web push.

​
Diseñar notificaciones web push

Crear una buena notificación push involucra más que escribir texto. El diseño importa. Aprende qué elementos son personalizables y cómo usarlos efectivamente.

Anatomía de notificación web push - personaliza elementos 1-6, mientras 7-9 son controlados por el navegador

  1. Título: Encabezado que llama la atención (recomendado: menos de 50 caracteres)
  2. Mensaje: Contenido principal de la notificación (recomendado: menos de 120 caracteres)
  3. Icono: Tu icono de marca o imagen específica de notificación (recomendado: 256x256px PNG o JPG)
  4. Imagen grande: Contenido visual llamativo
  5. Botones de acción: Botones de llamado a la acción
  6. Navegador: El navegador/app mostrando el push
  7. Dominio: Tu origen de sitio establecido automáticamente por el navegador
  8. Marca de tiempo y Descartar: El navegador agrega estos controles
  9. Más opciones: Controles adicionales específicos del navegador

Descripción general Push

Descripción general completa de la creación de notificaciones push, opciones y comportamiento de entrega.

Plantillas

Ahorra tiempo con plantillas reutilizables para mensajería consistente.

​
Personalización y localización de mensajes

Puedes personalizar mensajes push para coincidir con las preferencias e idioma de cada usuario.

Personalización de mensajes

Inserta variables dinámicas (como nombre o preferencias) para adaptar mensajes.

Mensajería multi-idioma

Entrega automáticamente mensajes en el idioma preferido de cada usuario.

​
Configurar comportamiento web push

Controla cómo se comportan tus mensajes push después del envío—cuándo aparecen, cuánto tiempo se almacenan y cómo interactúan los usuarios.

​
Configuraciones de entrega, visualización y descarte

Throttling

Controla la velocidad de entrega de notificaciones.

Frequency Capping

Establece límites para prevenir el sobre-envío de notificaciones al mismo usuario.

Time To Live (TTL)

Define cuánto tiempo los servicios push retienen mensajes cuando el dispositivo está offline.

Web Push Topic

Usa temas para agrupar, reemplazar o suprimir notificaciones duplicadas.

​
Comportamiento de clic

Controla qué sucede cuando un usuario hace clic en una notificación. Por defecto: Hacer clic abre tu página de inicio. Personalízalo:
  • Dirige usuarios a una URL específica
  • Usa tracking UTM
  • Suprime el comportamiento predeterminado con ?_osp=do_not_open

URLs, enlaces y Deep Linking

Dirige usuarios a contenido o páginas relevantes usando deep links y tracking.

Botones de acción

Permite que los usuarios tomen acciones inmediatas desde tu notificación.

SDK Push Notification Event Listeners

Escucha eventos de clic y activa comportamiento in-app con código personalizado.

​
Prueba tu configuración

Antes de lanzar, prueba exhaustivamente tu implementación web push a través de dispositivos y navegadores.

​
Lista de verificación pre-lanzamiento

  • SDK está cargado correctamente sin errores
  • El prompt de permiso aparece y funciona
  • La notificación de prueba se envía y recibe
  • Los iconos e imágenes se renderizan correctamente
  • El service worker está actualizado
  • El certificado HTTPS es válido

​
Analytics push y solución de problemas

Mide y mejora el rendimiento de notificaciones:

Reportes de mensajes push

Ve métricas de entrega, tasa de apertura y clics para cada mensaje.

Descripción general de analytics

Explora métricas de engagement y comportamiento del usuario a través de canales.

Notificaciones no mostradas o retrasadas

Lista de verificación de solución de problemas si los mensajes no aparecen.

Imágenes de notificación no se muestran

Soluciona problemas de renderizado de imágenes a través de diferentes navegadores.
¡Felicidades! Tu configuración de notificaciones web push está completa.Siguientes pasos:
  • Pruebas A/B: Optimiza mensajes con experimentos
  • Journeys: Construye flujos de mensajería automatizados
  • Etiquetas: Agrega datos a nivel de usuario para targeting
  • Analytics: Rastrea métricas de engagement y conversión