Web Push do zero: Service Worker, VAPID e o pedido de permissão

NEXT_PUBLIC_VAPID_PUBLIC_KEY="BEl6...Wc4"
VAPID_PRIVATE_KEY="hK9...b2Q"
VAPID_SUBJECT="mailto:contato@seudominio.com"

self.addEventListener('push', (event) => {
  const dados = event.data?.json() ?? {};

  // waitUntil segura o worker vivo até a notificação aparecer. Sem ele, o
  // navegador pode encerrar o worker antes e o push some sem erro.
  event.waitUntil(
    self.registration.showNotification(dados.titulo ?? 'Atualização', {
      body: dados.corpo,
      icon: '/icons/192.png',
      badge: '/icons/badge.png',
      // Mesma tag substitui a notificação anterior em vez de empilhar.
      tag: dados.tag ?? 'geral',
      data: { url: dados.url ?? '/' },
    }),
  );
});

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  const destino = event.notification.data?.url ?? '/';

  event.waitUntil(
    (async () => {
      const janelas = await self.clients.matchAll({
        type: 'window',
        includeUncontrolled: true,
      });
      // Reaproveita uma aba aberta em vez de abrir a quarta cópia do app.
      for (const janela of janelas) {
        if (janela.url.includes(destino) && 'focus' in janela) {
          return janela.focus();
        }
      }
      return self.clients.openWindow(destino);
    })(),
  );
});

'use client';
import { useState, useEffect } from 'react';

type Estado = 'indisponivel' | 'pode-pedir' | 'ativo' | 'bloqueado';

export function AtivarAvisos({ pedidoId }: { pedidoId: string }) {
  const [estado, setEstado] = useState<Estado>('indisponivel');

  useEffect(() => {
    if (!('serviceWorker' in navigator) || !('PushManager' in window)) return;
    setEstado(
      Notification.permission === 'granted' ? 'ativo'
      : Notification.permission === 'denied' ? 'bloqueado'
      : 'pode-pedir',
    );
  }, []);

  if (estado === 'indisponivel') return null;

  if (estado === 'bloqueado') {
    // Não adianta oferecer o botão: requestPermission devolveria denied
    // na hora. A única saída é instruir sobre as configurações do navegador.
    return (
      <p className="text-sm text-neutral-500">
        Avisos bloqueados. Para reativar, abra as configurações deste site no
        seu navegador e permita notificações.
      </p>
    );
  }

  if (estado === 'ativo') return <p className="text-sm">Avisos ativados.</p>;

  return (
    <button
      type="button"
      // Sempre dentro de um clique: sem gesto do usuário, parte dos
      // navegadores nem mostra o diálogo.
      onClick={async () => {
        const permissao = await Notification.requestPermission();
        if (permissao !== 'granted') {
          setEstado(permissao === 'denied' ? 'bloqueado' : 'pode-pedir');
          return;
        }
        await assinar(pedidoId);
        setEstado('ativo');
      }}
      className="rounded-md bg-neutral-900 px-4 py-2 text-sm text-white"
    >
      Avisar quando meu pedido sair para entrega
    </button>
  );
}

/** A chave VAPID vem em base64url; o PushManager exige bytes. */
function base64UrlParaBytes(base64: string) {
  const preenchido = (base64 + '='.repeat((4 - (base64.length % 4)) % 4))
    .replace(/-/g, '+')
    .replace(/_/g, '/');
  const cru = atob(preenchido);
  return Uint8Array.from(cru, (c) => c.charCodeAt(0));
}

export async function assinar(pedidoId: string) {
  const registro = await navigator.serviceWorker.register('/sw.js');
  await navigator.serviceWorker.ready;

  const assinatura =
    (await registro.pushManager.getSubscription()) ??
    (await registro.pushManager.subscribe({
      // Obrigatório: sem isso o navegador recusa a assinatura.
      userVisibleOnly: true,
      applicationServerKey: base64UrlParaBytes(
        process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!,
      ),
    }));

  await fetch('/api/push/assinar', {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({ assinatura: assinatura.toJSON(), pedidoId }),
  });
}

model PushSubscription {
  id        String   @id @default(cuid())
  endpoint  String   @unique   // o endpoint identifica o dispositivo
  p256dh    String
  auth      String
  usuarioId String
  criadoEm  DateTime @default(now())

  @@index([usuarioId])
}

import webpush from 'web-push';

webpush.setVapidDetails(
  process.env.VAPID_SUBJECT!,
  process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!,
  process.env.VAPID_PRIVATE_KEY!,
);

export async function enviarPara(usuarioId: string, carga: object) {
  const assinaturas = await prisma.pushSubscription.findMany({ where: { usuarioId } });

  await Promise.allSettled(
    assinaturas.map(async (s) => {
      try {
        await webpush.sendNotification(
          { endpoint: s.endpoint, keys: { p256dh: s.p256dh, auth: s.auth } },
          JSON.stringify(carga),
          { TTL: 3600 },
        );
      } catch (err) {
        const status = (err as { statusCode?: number }).statusCode;
        // 404 e 410 significam assinatura morta: o usuário desinstalou,
        // limpou os dados ou revogou. Guardar não serve para nada.
        if (status === 404 || status === 410) {
          await prisma.pushSubscription.delete({ where: { id: s.id } });
          return;
        }
        throw err;
      }
    }),
  );
}