Publiq

Web push

Notificaciones del navegador con identificación del usuario (external_id, email, atributos, etiquetas) — segmentables por las mismas reglas del email.

El web push capta visitantes que no dejaron email — solo aceptan el permiso. El SDK de Publiq identifica al usuario (external_id, email, atributos, etiquetas), así envías pushes segmentados por las mismas reglas que un segmento de email. Consigue tu App ID y la clave pública (VAPID) en la app, en Web push → Guía de integración.

Cómo funciona

  • Permiso — el visitante acepta recibir notificaciones.
  • Suscripción — el navegador crea una suscripción push (endpoint + claves).
  • Identidad — el SDK envía la suscripción + identify() (external_id, email, atributos, etiquetas) a Publiq.
  • Envío — envías pushes segmentados por etiqueta/atributo; los endpoints muertos se podan.

Paso 1 — Service worker

Aloja el archivo publiq-push-sw.js en la raíz de tu sitio (mismo origen — lo exige Web Push). Puedes usar el nuestro, servido en https://app.publiq.digital/publiq-push-sw.js:

// publiq-push-sw.js — hospede na RAIZ do seu site (same-origin, exigência do Web Push).
self.addEventListener('push', (event) => {
  const data = event.data ? event.data.json() : {};
  event.waitUntil(
    self.registration.showNotification(data.title || 'Notificação', {
      body: data.body || '',
      icon: data.icon || undefined,
      data: { url: data.url || '/' },
    })
  );
});

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  const url = (event.notification.data && event.notification.data.url) || '/';
  event.waitUntil(clients.openWindow(url));
});

Paso 2 — Añade el SDK

Pega antes de </body>. Sustituye YOUR_APP_ID por tu App ID.

<script src="https://app.publiq.digital/publiq-push.js" data-app="YOUR_APP_ID" async></script>
<script>
  // Pede permissão, assina e registra o service worker automaticamente.
  Publiq.push.init();
</script>

Paso 3 — Identifica al usuario

// Chame quando souber quem é o usuário. Vira segmentação (mesmas regras do e-mail).
Publiq.push.identify({
  externalId: 'user_42',
  email: 'ana@cliente.com',
  attributes: { plan: 'pro', city: 'SP' },
  tags: ['vip', 'black-friday'],
});

Integración manual (sin el SDK)

Si prefieres usar la clave pública directamente en tu frontend, este es el flujo completo con la Web Push API pura:

// Integração manual (sem o SDK) usando a chave pública VAPID direto no frontend.
const PUBLIQ = 'https://app.publiq.digital';
const APP_ID = 'YOUR_APP_ID';
const VAPID_PUBLIC_KEY = 'YOUR_PUBLIC_KEY'; // pegue em Web push → Guia de integração

function urlB64ToUint8Array(b64) {
  const pad = '='.repeat((4 - (b64.length % 4)) % 4);
  const raw = atob((b64 + pad).replace(/-/g, '+').replace(/_/g, '/'));
  return Uint8Array.from([...raw].map((c) => c.charCodeAt(0)));
}

async function subscribe(identity) {
  const reg = await navigator.serviceWorker.register('/publiq-push-sw.js');
  await navigator.serviceWorker.ready;
  if ((await Notification.requestPermission()) !== 'granted') return;

  const sub = await reg.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY),
  });
  const { endpoint, keys } = sub.toJSON();

  // 1) Registra a assinatura
  await fetch(PUBLIQ + '/api/public/push/subscribe', {
    method: 'POST', headers: { 'content-type': 'application/json' },
    body: JSON.stringify({ appId: APP_ID, endpoint, keys, userAgent: navigator.userAgent }),
  });

  // 2) Identifica o usuário (external_id, email, atributos, tags)
  await fetch(PUBLIQ + '/api/public/push/identify', {
    method: 'POST', headers: { 'content-type': 'application/json' },
    body: JSON.stringify({ endpoint, ...identity }),
  });
}

subscribe({ externalId: 'user_42', email: 'ana@cliente.com', attributes: { plan: 'pro' }, tags: ['vip'] });

El publiq-push-sw.js DEBE servirse desde tu propio origen (mismo dominio de la página). Los service workers son same-origin — no puedes registrarlo desde otro dominio.

Web push — Publiq Docs