Publiq

Web push

Notificações do navegador com identificação do usuário (external_id, email, atributos, tags) — segmentáveis pelas mesmas regras do e-mail.

O web push captura visitantes que não deixaram e-mail — basta aceitarem a permissão. O SDK do Publiq identifica o usuário (external_id, email, atributos, tags), então você dispara pushes segmentados pelas mesmas regras de um segmento de e-mail. Pegue seu App ID e a chave pública (VAPID) no app, em Web push → Guia de integração.

Como funciona

  • Permissão — o visitante aceita receber notificações.
  • Assinatura — o navegador cria uma subscription push (endpoint + chaves).
  • Identidade — o SDK envia a subscription + identify() (external_id, email, atributos, tags) ao Publiq.
  • Envio — você dispara pushes segmentados por tag/atributo; endpoints mortos são podados.

Passo 1 — Service worker

Hospede o arquivo publiq-push-sw.js na raiz do seu site (mesma origem — é exigência do Web Push). Você pode usar o nosso, servido em 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));
});

Passo 2 — Adicione o SDK

Cole antes de </body>. Troque YOUR_APP_ID pelo seu 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>

Passo 3 — Identifique o usuário

// 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'],
});

Integração manual (sem o SDK)

Se preferir usar a chave pública direto no seu frontend, este é o fluxo completo com a 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'] });

O publiq-push-sw.js DEVE ser servido pela sua própria origem (mesmo domínio da página). Service workers são same-origin — não dá para registrá-lo de outro domínio.

Web push — Publiq Docs