Notificaciones push web: cómo configurarlas sin molestar

Qué son las notificaciones push web y cómo funcionan

Las notificaciones push web son mensajes cortos de un sitio que llegan al navegador incluso cuando la pestaña está cerrada. El usuario otorga permiso una vez, el navegador devuelve una suscripción con un endpoint y claves, y tu servidor envía mensajes a través de un servicio de push utilizando un protocolo firmado por VAPID. La regla de oro es pedir permiso en el momento adecuado y nunca inundar a las personas.

UX de opt-in: cómo preguntar bien

Activar el aviso nativo del navegador en el primer segundo casi siempre resulta en un “Bloquear”. Un patrón de dos pasos funciona: primero tu propio aviso suave explicando el beneficio, y solo después de la aceptación, la solicitud del sistema.

• No instantáneamente. Muestra el aviso después de una primera acción útil, no al llegar.
• Explica por qué. “¿Notificarte cuando baje el precio?” supera a un aviso silencioso.
• Respeta un no. Si declinan, no vuelvas a preguntar durante semanas.
• Contexto. Pregunta en una página de producto, no en la página de inicio.

Claves VAPID

VAPID (Identificación de Servidor de Aplicación Voluntaria) identifica tu servidor ante el servicio de push. Necesitas un par de claves: la clave pública va al navegador al suscribirse, la clave privada se queda en el servidor y firma las solicitudes.

# Generar un par de claves VAPID
npx web-push generate-vapid-keys

Clave Pública:  BQ8...prqZk
Clave Privada: 3Kf...9dQ
Asunto:     mailto:push@yourtrend.online

La clave pública se pasa al suscribirse en el navegador:

registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: 'BQ8...prqZk'
});

Frecuencia: cómo no molestar

El push molesta más rápido que el correo electrónico porque aparece sobre todo. Guía de frecuencia:

Siempre ofrece horas silenciosas y una fácil opción de exclusión. Un push nocturno es un camino directo a ser desactivado.

Segmentación de push web

Al igual que con el correo electrónico, no envíes a todos. Segmenta por categorías vistas, ciudad, idioma y comportamiento. Carrito abandonado, una caída de precio en un favorito, de vuelta en stock: los escenarios dirigidos se hacen clic mucho más que los envíos masivos. En YourTrend, el push web vive junto al correo electrónico, SMS, segmentos y automatizaciones, por lo que el canal se elige para adaptarse a la audiencia: visión general en la página de características.

Casos de uso útiles

1. Carrito abandonado después de 1–2 horas.
2. Caída de precio en un artículo favorito.
3. De vuelta en stock para quienes esperaron.
4. Estado del pedido: enviado, entregado.
5. Contenido: un nuevo artículo sobre un tema que siguen.

Cómo se ve el envío y la recepción

El servidor envía un mensaje encriptado al punto de suscripción, y el trabajador de servicio en el navegador captura el evento de push y muestra una notificación incluso con la pestaña cerrada. La carga útil es un JSON corto:

{
  "title": "El precio bajó un 20%",
  "body": "Las zapatillas en tus favoritos ahora son más baratas",
  "icon": "/icons/push-192.png",
  "url": "/catalog/sneakers/42"
}

// service-worker.js
self.addEventListener('push', function(event) {
  const d = event.data.json();
  event.waitUntil(
    self.registration.showNotification(d.title, {
      body: d.body, icon: d.icon, data: { url: d.url }
    })
  );
});

Al hacer clic, envía al usuario al producto específico desde el campo de url, no a la página de inicio — eso aumenta notablemente la conversión.

Soporte del navegador y iOS

Las notificaciones web funcionan en Chrome, Firefox, Edge y Opera en escritorio y Android. La advertencia clave es Safari: en iPhone y iPad, las notificaciones solo llegan si el usuario agregó el sitio a la pantalla de inicio como una PWA (disponible desde iOS 16.4+). Así que las notificaciones web complementan el correo electrónico, pero no lo reemplazan: parte de tu audiencia técnicamente no lo tendrá. Combina canales: correo electrónico, SMS y notificaciones, por segmento.

Errores comunes

• Solicitud de permiso en el primer segundo sin contexto.
• Solo promociones, cero notificaciones útiles.
• Sin segmentación: la misma notificación para todos.
• Sin horas silenciosas ni opción clara de exclusión.
• El enlace va a la página de inicio, no al producto específico.

Conclusión

Las notificaciones web son un canal rápido y atractivo, pero requieren tacto: pregunta en el momento adecuado, explica el beneficio, segmenta y mantén una frecuencia razonable. Entonces, las notificaciones ayudan en lugar de molestar. Elige un plan con los canales que necesitas en la página de precios.