“Necesitamos una aplicación para poder enviar notificaciones automáticas”. Durante una década, esta fue la única razón por la que las marcas gastaron 100.000 euros en crear aplicaciones nativas. La red estaba en silencio. Si el usuario cerró la pestaña, lo perdiste.

Esa era ha terminado. Con iOS 16.4 (2023), Apple finalmente habilitó Web Push para las aplicaciones web de la pantalla de inicio. La brecha entre “aplicación nativa” y “sitio web” se ha cerrado efectivamente.

En Maison Code Paris, consideramos Push no como un canal de marketing, sino como una Extensión de la interfaz de usuario. Es una forma de mostrar el estado crítico (“Su taxi está aquí”, “Su pedido se ha enviado”) en la superficie más personal del dispositivo del usuario: la pantalla de bloqueo.

Por qué Maison Code habla de esto

En Maison Code Paris, actuamos como la conciencia arquitectónica de nuestros clientes. A menudo heredamos stacks “modernos” construidos sin una comprensión fundamental de la escala.

Discutimos este tema porque representa un punto de inflexión crítico en la madurez de la ingeniería. Implementarlo correctamente diferencia un MVP frágil de una plataforma resistente de nivel empresarial.

La arquitectura: cómo funciona Web Push

A diferencia de Native Push (que se basa en protocolos propietarios APN/FCM), Web Push es un estándar abierto (RFC 8291). Involucra a tres actores:

El Agente de Usuario (Navegador): Genera una suscripción.
El servicio Push: un servidor administrado por el proveedor del navegador (Mozilla, Google, Apple) que enruta mensajes.
El servidor de aplicaciones (usted): activa el mensaje.

Claves VAPID (La capa de seguridad)

¿Cómo sabe Apple que eres tú quien envía la notificación y no un spammer que falsifica tu dominio? VAPID (Identificación voluntaria del servidor de aplicaciones).

Generas un par de claves pública/privada.

Clave pública: Enviada al navegador durante la suscripción.
Clave privada: Se utiliza para firmar cada mensaje push (JWT).

Si la firma no coincide con la clave pública almacenada en el dispositivo, el servicio Push descarta el mensaje. Esto evita el “secuestro de empuje”.

Fase de implementación 1: El trabajador del servicio

El Service Worker es el cerebro de la operación. Vive en segundo plano, incluso cuando la pestaña está cerrada. No puede manejar eventos push en su paquete principal de React (app.js). Debes manejarlos en sw.js.

// público/sw.js

self.addEventListener('empujar', función(evento) {
  si (!event.data) regresa;

  carga útil constante = event.data.json();
  const {título, cuerpo, icono, URL, acciones} = carga útil;

  opciones constantes = {
    cuerpo,
    icono: icono || '/icono-192.png',
    insignia: '/badge-monochrome.png', // Pequeño ícono para la barra de estado de Android
    datos: {url}, // Almacenar enlace profundo
    acciones: acciones || [], // Botones interactivos
    tag: 'order-update', // Contrae múltiples notificaciones en una
    renotificar: verdadero,
  };

  evento.esperar hasta (
    self.registration.showNotification(título, opciones)
  );
});

// Manejando el clic
self.addEventListener('notificaciónclick', función(evento) {
  evento.notificación.close(); //Cierra la alerta
  const urlToOpen = evento.notificación.datos.url || '/';

  evento.esperar hasta (
    clientes.matchAll({ tipo: 'ventana', incluirUncontrolado: verdadero }).entonces(windowClients => {
      // Si la pestaña ya está abierta, enfócala
      para (dejar cliente de windowClients) {
        if (client.url === urlToOpen && 'enfoque' en el cliente) {
          devolver cliente.focus();
        }
      }
      // De lo contrario abre una nueva pestaña
      si (clientes.openWindow) {
        devolver clientes.openWindow(urlToOpen);
      }
    })
  );
});

Fase de implementación 2: la suscripción frontend

El mensaje del navegador (“ejemplo.com quiere enviarle notificaciones”) es aterrador. Los usuarios lo bloquean por reflejo. Nunca llame a Notification.requestPermission() al cargar la página.

Usamos el Patrón de doble permiso.

contexto: el usuario hace clic en “Notificarme cuando esté disponible”.
Mensaje suave: muestra un buen modal HTML. “Le enviaremos una alerta única cuando este producto vuelva a estar disponible. ¿Permitir?”
Aviso difícil: si hacen clic en “Sí”, entonces activará la verificación del navegador nativo.

// componentes/PushToggle.tsx
importar {urlBase64ToUint8Array} desde './utils';

const PUBLIC_VAPID_KEY = 'BM...'; // Tu clave pública

exportar constante PushToggle = () => {
  suscripción constante = asíncrono () => {
    registro constante = esperar navigator.serviceWorker.ready;
    
    // 1. Solicitar permiso
    resultado constante = esperar Notificación.requestPermission();
    si (resultado! == 'concedido') retorno;

// 2. Suscríbete al servicio Push
    suscripción constante = espera registro.pushManager.subscribe({
      userVisibleOnly: verdadero,
      applicationServerKey: urlBase64ToUint8Array(PUBLIC_VAPID_KEY)
    });

    // 3. Enviar punto final de suscripción a su backend
    espera a buscar('/api/push/subscribe', {
      método: 'POST',
      cuerpo: JSON.stringify (suscripción),
      encabezados: { 'Tipo de contenido': 'aplicación/json' }
    });
  };

  return <button onClick={subscribe}>Habilitar alertas</button>;
};

Fase de implementación 3: el envío de backend

Usamos la biblioteca Node.js web-push para manejar el cifrado y los encabezados VAPID.

// api/push/send.ts
importar webpush desde 'web-push';

webpush.setVapidDetails(
  'correo a:admin@maisoncode.paris',
  proceso.env.VAPID_PUBLIC,
  proceso.env.VAPID_PRIVATE
);

exportar función asíncrona sendNotification (suscripción de usuario, mensaje) {
  prueba {
    espere webpush.sendNotification (suscripción de usuario, JSON.stringify ({
      título: 'Pedido enviado',
      body: 'Su paquete está en camino a través de DHL.',
      URL: '/pedidos/TRX-123',
      acciones: [
        { acción: 'seguimiento', título: 'Paquete de seguimiento' },
        { acción: 'cerrar', título: 'Descartar' }
      ]
    }));
  } captura (error) {
    si (error.statusCode === 410) {
      // La suscripción está muerta (el usuario nos bloqueó). Eliminar de la base de datos.
      aguarde eliminar suscripción (suscripción de usuario.punto final);
    }
  }
}

La advertencia de iOS 16.4: el requisito de PWA

Apple introdujo un importante punto de fricción. En Safari (iOS), Web Push SÓLO está disponible si el usuario agrega el sitio a su pantalla de inicio. Una pestaña estándar no puede recibir push.

Esto significa que su estrategia debe centrarse primero en la Instalación de PWA. Necesita una interfaz de usuario de “Mensaje de instalación” (similar al mensaje Push Soft) que guíe al usuario: “Toque Compartir -> Agregar a la pantalla de inicio para recibir actualizaciones de pedidos”.

Una vez instalada (generalmente ejecutándose en modo de visualización “independiente”), Push API se desbloquea.

Notificaciones y acciones enriquecidas

Las notificaciones Acciones permiten a los usuarios interactuar sin abrir la aplicación.

“Nuevo mensaje recibido”.
Acción 1: “Responder” (Abre entrada de texto).
Acción 2: “Marcar como leído” (la API llama en segundo plano).

Esto transforma la notificación de un “Señalizador” a un “Panel de control”.

Ética: El niño que gritó lobo

La tasa de clics (CTR) del push es alta (8-12%), pero la tasa de cancelación de suscripción es brutal. Si envía una notificación irrelevante (“¡Está lloviendo! ¡Compre zapatos!”), el usuario desactivará los permisos globalmente. A diferencia del correo electrónico (carpeta de spam), no hay término medio. Está encendido o apagado.

Nuestra regla: Push es para Servicio. El correo electrónico es para Marketing.

✅Pedido Enviado.
✅Artículo nuevamente en stock (Solicitado por el usuario).
✅Vuelo retrasado.
❌ Las rebajas de invierno han comenzado.
❌ Consulta nuestra nueva publicación de blog.

10. Manejo de la fatiga del empuje (limitación de frecuencia)

Las notificaciones push tienen rendimientos estrictamente decrecientes.

Mensaje 1: 10% CTR.
Mensaje 2: 5% CTR.
Mensaje 3: 0,5% CTR (y 2% Bajas de suscripción). Implementamos Captación de frecuencia global en Redis. INCR usuario:123:push:count (TTL 24 horas). Si el recuento es > 3, descartamos silenciosamente los mensajes de marketing (pero siempre permitimos mensajes transaccionales). También implementamos la lógica de “Horas de silencio” (no despertar al usuario a las 3 a. m. a menos que su casa esté en llamas).

11. La estrategia de instalación de PWA de iOS

Dado que los usuarios deben instalar la PWA para activar iOS, necesita una estrategia. No puede simplemente mostrar un banner “Agregar a la pantalla de inicio”. Debes ofrecer Valor detrás de la pared de instalación.

“Instala la aplicación para rastrear tu paquete en tiempo real”.
“Instala la aplicación para desbloquear el descuento VIP del 10%”. Creamos “Instrucciones de instalación” personalizadas que detectan la versión del sistema operativo del usuario y muestran la flecha exacta que apunta al botón Compartir.

13. Rich Media: imágenes y GIF

El texto es aburrido. “Tus zapatos han sido enviados” está bien. “Tus zapatos han sido enviados” + [Foto de los zapatos reales] es mejor. Web Push admite la propiedad “imagen”. Sin embargo, debes tener cuidado con las proporciones.

Android: Paisaje (2:1).
Ventanas: Cuadrado (1:1). Construimos una lambda “Image Resizer” que genera miniaturas específicas del dispositivo sobre la marcha durante el envío de inserción.

14. Atribución de análisis

¿Cómo saber si Push genera ingresos? No puede confiar en el “tráfico directo”. Debes etiquetar tus URL. url: '/product/123?utm_source=web_push&utm_campaign=black_friday'. Pero también escuche el evento notificationclick para activar un ping de Analytics personalizado antes de abrir la ventana. Esto captura la “Interacción” incluso si la página no se carga.

15. Conclusión

Las notificaciones automáticas son el arma más potente del arsenal de retención. Para los minoristas de alta frecuencia (comestibles, tiendas de moda), son esenciales. Pero requieren un enfoque de ingeniería disciplinado: gestión sólida de los trabajadores de servicio, seguridad VAPID y una estrategia de UX respetuosa.

Maison Code ayuda a las marcas a navegar por este espacio, convirtiendo la pantalla de bloqueo en un canal de conversión, no en una molestia.

**[Contrate a nuestros arquitectos](/contact)**.