Notificaciones Push

Envía notificaciones Web Push a tus usuarios y deja que la IA conecte todo automáticamente.

Nota

La entrega real de push en el navegador está disponible cuando tu entorno de Proyecta Cloud tiene habilitado el adaptador de entrega web-push (PUSH_DELIVERY_ADAPTER=web-push). Con él activado, se emite un par de claves VAPID P-256 válido y las notificaciones se entregan a los navegadores suscritos. Sin él, todo sigue funcionando en round-trip — las suscripciones se almacenan y los envíos se resuelven — pero la clave VAPID es un marcador de posición, por lo que no se producen entregas reales y los mensajes se registran en lugar de enviarse. Si tus pushes no están llegando, este adaptador es lo primero que debes revisar.

Cualquier app de Proyecta puede enviar notificaciones push al navegador y a PWAs para sus usuarios. Proyecta se encarga de la generación de claves VAPID, el almacenamiento de suscripciones, la gestión de temas y la entrega — sin necesidad de una cuenta de terceros.

Cómo funciona

Las notificaciones push en Proyecta siguen el ciclo de vida estándar de Web Push en cuatro pasos:

1. Enable — las claves VAPID se generan para tu app la primera vez que se necesitan
2. Subscribe — registra el dispositivo de un visitante para recibir notificaciones
3. Identify — vincula una suscripción anónima a un usuario autenticado
4. Send — entrega una notificación a usuarios específicos, temas o a todos

Los primeros tres ocurren por ti dentro del hook usePush(); el cuarto lo haces desde tu panel de administración.

Suscribe el dispositivo de un usuario

Tu app viene con un hook usePush() que se encarga de todo el flujo del navegador — obtener la clave VAPID, registrar el service worker, crear la suscripción Web Push, guardar el secret y vincular una suscripción anónima al usuario en cuanto inicia sesión. Nada de eso lo haces a mano:

import { usePush } from '@/hooks/usePush.ts';

function NotifyMeButton() {
    const { supported, subscribed, subscribe, unsubscribe, isPending } = usePush();

    // `supported: false` means this browser cannot do push at all — hide the CTA.
    if (!supported) return null;

    return (
        <button onClick={subscribed ? unsubscribe : subscribe} disabled={isPending}>
            {subscribed ? 'Turn off notifications' : 'Notify me'}
        </button>
    );
}

También hay un bloque listo para usar si solo quieres el aviso de opt-in:

import { PushOptInButton } from '@/components/blocks/PushOptInButton.tsx';

<PushOptInButton description="Get told the moment a new drop lands." />;

Pídele a la IA: "Add a 'Notify me' button to the header that opts the visitor into push."

Los visitantes anónimos son compatibles — el hook los suscribe con un id generado y vuelve a vincular esa suscripción a su cuenta automáticamente cuando inician sesión, así que una notificación que envíes después les llega de cualquier forma.

Envía una notificación

Enviar es una acción del dueño, no algo que hagan las páginas públicas de tu app — el navegador de un visitante nunca debe poder mandar un push a toda tu audiencia. En el día a día envías desde la sección Push del panel de administración de tu app: escribes el título y el cuerpo, eliges un tema o haces broadcast a todos, y mandas una prueba a tu propio dispositivo primero.

Puedes dirigirte a todos, o solo a los visitantes suscritos a un tema en particular. Una notificación lleva un título, un cuerpo y, opcionalmente, un ícono y una imagen.

Después de enviar obtienes un conteo de a cuántos dispositivos llegó y cuántos fallaron. Una advertencia: esos números solo reflejan entregas reales en el navegador cuando el adaptador de entrega web-push está activado. Con él desactivado, el conteo refleja cuántas suscripciones almacenadas se apuntaron, no entregas reales — así que no lo leas como confirmación de entrega en ese caso.

Temas

Los visitantes pueden suscribirse a temas con nombre (p. ej., product-updates, weekly-digest) en lugar de una sola lista de todo o nada. Esta es la forma recomendada de gestionar los opt-ins — no necesitas rastrear los IDs de visitantes tú mismo para actualizaciones de tipo broadcast. Los temas aparecen como el selector de audiencia en la sección Push del panel de administración.

Cancelar suscripción

Llama a unsubscribe desde el mismo hook usePush() — ya tiene el secret de la suscripción, así que no hay nada que tengas que guardar ni pasar:

const { subscribed, unsubscribe } = usePush();

{
    subscribed && <button onClick={unsubscribe}>Turn off notifications</button>;
}

Deja que la IA lo conecte todo

No tienes que escribir nada de esto a mano. Pídele a la IA:

• "Add a 'Notify me' button to the header that opts the visitor into push notifications."
• "Put a push opt-in prompt on the product page, but only show it to visitors who haven't already subscribed."
• "Add a topic called 'breaking-news' that visitors can opt into from the footer."

Consideraciones importantes

• El preview no dispara pushes reales. Las notificaciones push solo funcionan en la versión publicada de tu app porque los navegadores requieren HTTPS en un origen real.
• iOS requiere una PWA. En iOS 16.4+, Web Push solo funciona desde una Progressive Web App instalada (agregada a la pantalla de inicio), no directamente desde Safari.
• El permiso es de una sola oportunidad. Si un usuario rechaza el permiso de notificaciones, los navegadores no te permiten volver a solicitarlo de forma programática. Debes guiarlo a la configuración de su navegador o dispositivo.

Próximamente

• Envíos programados y disparados por eventos — envía automáticamente según eventos de la app o un horario
• Deep linking — abre una pantalla específica en la app cuando se toca la notificación