Notificacoes push: contas a vencer (diario) e lembrete de anotar gastos (5 em 5 dias)

Web Push completo: service worker proprio (injectManifest) com handler de push,
botao Ativar/Desativar na aba Conta, tabela push_subscriptions (RLS) e Edge
Function notificar (VAPID, agendada via pg_cron, valida X-Notify-Secret).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: Thales-Chagas

.gitignore

@@ -19,5 +19,8 @@ PASSO-A-PASSO-TELEGRAM.md
 # Guia local do backup automático — contém segredo (BACKUP_SECRET). Nunca publicar.
 PASSO-A-PASSO-BACKUP.md
 
+# Guia local das notificações push — contém segredo (NOTIFY_SECRET). Nunca publicar.
+PASSO-A-PASSO-NOTIFICACOES.md
+
 # Configura��o local do Claude Code
 .claude/

package-lock.json

@@ -20,6 +20,9 @@
     "@vitejs/plugin-react": "^4.3.4",
     "tailwindcss": "^4.0.0",
     "vite": "^6.0.0",
-    "vite-plugin-pwa": "^1.3.0"
+    "vite-plugin-pwa": "^1.3.0",
+    "workbox-core": "^7.4.1",
+    "workbox-precaching": "^7.4.1",
+    "workbox-routing": "^7.4.1"
   }
 }

package.json

@@ -54,6 +54,8 @@ import {
   EllipsisVertical,
   Lightbulb,
   CircleCheck,
+  Bell,
+  BellOff,
 } from "lucide-react";
 import {
   ResponsiveContainer,
@@ -87,6 +89,7 @@ import {
 } from "./cloudAuth";
 import { carregarTudo, sincronizar, migrarLocalParaNuvem } from "./cloudData";
 import { gerarCodigoTelegram, statusTelegram, desconectarTelegram, BOT_URL, BOT_USERNAME } from "./telegramLink";
+import { suportePush, assinaturaAtual, ativarPush, desativarPush } from "./push";
 import {
   temAutenticadorPlataforma,
   registrarBiometria,
@@ -3086,6 +3089,90 @@ const NAV_EMPRESA = [
 // Aba "Minha Conta": mostra quem está logado, ONDE os dados ficam (nuvem x
 // aparelho) e o status do Telegram. Ajuda a entender por que o saldo pode
 // parecer diferente entre o computador e o celular.
+// Cartão de notificações push da aba Conta: liga/desliga neste aparelho.
+function CartaoNotificacoes({ userId, showToast }) {
+  const suporte = suportePush();
+  const [ativa, setAtiva] = useState(undefined); // undefined=carregando
+  const [ocupado, setOcupado] = useState(false);
+
+  useEffect(() => {
+    let vivo = true;
+    assinaturaAtual()
+      .then((s) => vivo && setAtiva(!!s))
+      .catch(() => vivo && setAtiva(false));
+    return () => {
+      vivo = false;
+    };
+  }, []);
+
+  async function alternar() {
+    if (ocupado) return;
+    setOcupado(true);
+    try {
+      if (ativa) {
+        await desativarPush();
+        setAtiva(false);
+        showToast?.("Notificações desligadas neste aparelho.");
+      } else {
+        await ativarPush(userId);
+        setAtiva(true);
+        showToast?.("Notificações ativadas! 🔔");
+      }
+    } catch (e) {
+      showToast?.(e.message || "Não deu certo. Tente de novo.", true, 6000);
+    } finally {
+      setOcupado(false);
+    }
+  }
+
+  const descricao =
+    suporte === "ios-precisa-instalar"
+      ? "No iPhone, primeiro instale o app na tela de início (veja em Dicas do app)."
+      : suporte === "bloqueado"
+        ? "As notificações estão bloqueadas nas configurações do navegador."
+        : suporte === "sem-suporte"
+          ? "Este navegador não aceita notificações."
+          : ativa === undefined
+            ? "Verificando..."
+            : ativa
+              ? "Ativas neste aparelho ✅ — contas a vencer e lembrete de anotar os gastos."
+              : "Avisa das contas a vencer e, de tempos em tempos, lembra de anotar os gastos.";
+
+  return (
+    <div className="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <h3 className="text-sm font-bold text-slate-700 dark:text-slate-200">
+            Notificações no celular
+          </h3>
+          <p className="mt-0.5 text-sm text-slate-400">{descricao}</p>
+        </div>
+        {suporte === "ok" && ativa !== undefined && (
+          <button
+            onClick={alternar}
+            disabled={ocupado}
+            className={
+              "flex shrink-0 items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium transition disabled:opacity-50 " +
+              (ativa
+                ? "bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
+                : "bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-950/50 dark:text-emerald-300 dark:hover:bg-emerald-950")
+            }
+          >
+            {ocupado ? (
+              <Loader2 size={15} className="animate-spin" />
+            ) : ativa ? (
+              <BellOff size={15} />
+            ) : (
+              <Bell size={15} />
+            )}
+            {ativa ? "Desativar" : "Ativar"}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
 function PaginaConta({ login, sessao, userId, onConectarTelegram, onLimparDados, onSair, showToast, onVerTour }) {
   const email = sessao?.user?.email || null;
   const naNuvem = !!sessao;
@@ -3193,6 +3280,9 @@ function PaginaConta({ login, sessao, userId, onConectarTelegram, onLimparDados,
         </div>
       </div>
 
+      {/* Notificações push — só faz sentido logado na nuvem */}
+      {userId && <CartaoNotificacoes userId={userId} showToast={showToast} />}
+
       {/* Explicação do saldo diferente entre aparelhos */}
       <div className="flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-200">
         <AlertTriangle size={18} className="mt-0.5 shrink-0" />

src/App.jsx

@@ -0,0 +1,90 @@
+// ============================================================
+//  Notificações push no celular (Web Push)
+//  O navegador cria uma "assinatura" única deste aparelho, que fica
+//  guardada em push_subscriptions (RLS: cada um só vê a própria).
+//  A Edge Function `notificar` usa essas assinaturas pra enviar:
+//  contas a vencer (diário) e lembrete de anotar gastos (a cada 5 dias).
+// ============================================================
+import { supabase } from "./supabaseClient";
+
+// Chave PÚBLICA do servidor de push (VAPID) — não é segredo.
+// A privada correspondente vive só nos secrets do Supabase.
+const VAPID_PUBLIC_KEY =
+  "BDrr3qE6H5iFXENcCtXFpT4f1WwAMCKiIzn4W4zBm1mHkBcKJ5FbsHYWx6H2jR4HTYtVjHYi116bCz77sHwNxCo";
+
+const b64UrlParaBytes = (s) => {
+  const pad = "=".repeat((4 - (s.length % 4)) % 4);
+  const b64 = (s + pad).replace(/-/g, "+").replace(/_/g, "/");
+  const bin = atob(b64);
+  return Uint8Array.from(bin, (c) => c.charCodeAt(0));
+};
+
+const ehIos = () => /iphone|ipad|ipod/i.test(navigator.userAgent || "");
+const rodandoInstalado = () =>
+  window.matchMedia?.("(display-mode: standalone)")?.matches ||
+  window.navigator.standalone === true;
+
+// O que este aparelho consegue fazer:
+//  "ok" | "ios-precisa-instalar" | "bloqueado" | "sem-suporte"
+export function suportePush() {
+  if (
+    !("serviceWorker" in navigator) ||
+    !("Notification" in window) ||
+    !("PushManager" in window)
+  ) {
+    // iPhone sem o app instalado nem expõe PushManager — orienta a instalar
+    if (ehIos() && !rodandoInstalado()) return "ios-precisa-instalar";
+    return "sem-suporte";
+  }
+  if (ehIos() && !rodandoInstalado()) return "ios-precisa-instalar";
+  if (Notification.permission === "denied") return "bloqueado";
+  return "ok";
+}
+
+// Assinatura deste aparelho, se já existir (null se não)
+export async function assinaturaAtual() {
+  if (!("serviceWorker" in navigator)) return null;
+  const reg = await navigator.serviceWorker.getRegistration();
+  if (!reg?.pushManager) return null;
+  return await reg.pushManager.getSubscription();
+}
+
+// Liga as notificações neste aparelho (pede permissão) e guarda na nuvem
+export async function ativarPush(userId) {
+  const permissao = await Notification.requestPermission();
+  if (permissao !== "granted") {
+    throw new Error("Permissão negada. Libere as notificações nas configurações do navegador.");
+  }
+  const reg = await navigator.serviceWorker.getRegistration();
+  if (!reg) {
+    throw new Error("O app ainda está terminando de carregar — tente de novo em instantes.");
+  }
+  const sub = await reg.pushManager.subscribe({
+    userVisibleOnly: true,
+    applicationServerKey: b64UrlParaBytes(VAPID_PUBLIC_KEY),
+  });
+  const json = sub.toJSON();
+  const { error } = await supabase.from("push_subscriptions").upsert(
+    {
+      endpoint: sub.endpoint,
+      user_id: userId,
+      p256dh: json.keys.p256dh,
+      auth: json.keys.auth,
+      aparelho: (navigator.userAgent || "").slice(0, 200),
+    },
+    { onConflict: "endpoint" }
+  );
+  if (error) {
+    await sub.unsubscribe().catch(() => {});
+    throw new Error("Não consegui guardar a assinatura: " + error.message);
+  }
+  return sub;
+}
+
+// Desliga neste aparelho: apaga da nuvem e cancela no navegador
+export async function desativarPush() {
+  const sub = await assinaturaAtual();
+  if (!sub) return;
+  await supabase.from("push_subscriptions").delete().eq("endpoint", sub.endpoint);
+  await sub.unsubscribe().catch(() => {});
+}

src/push.js

@@ -0,0 +1,53 @@
+// ============================================================
+//  Service worker do Thayfinance (PWA)
+//  - Precache dos arquivos do app (mesmo comportamento de antes,
+//    que o vite-plugin-pwa gerava sozinho)
+//  - Recebe notificações push (contas a vencer + lembrete de anotar)
+// ============================================================
+import { precacheAndRoute, cleanupOutdatedCaches, createHandlerBoundToURL } from "workbox-precaching";
+import { NavigationRoute, registerRoute } from "workbox-routing";
+import { clientsClaim } from "workbox-core";
+
+self.skipWaiting();
+clientsClaim();
+cleanupOutdatedCaches();
+precacheAndRoute(self.__WB_MANIFEST);
+
+// navegação (URLs do app) cai no index.html precacheado — app abre offline
+registerRoute(new NavigationRoute(createHandlerBoundToURL("index.html")));
+
+// chegou um push do servidor → mostra a notificação
+self.addEventListener("push", (event) => {
+  let dados = {};
+  try {
+    dados = event.data ? event.data.json() : {};
+  } catch {
+    dados = { corpo: event.data ? event.data.text() : "" };
+  }
+  const titulo = dados.titulo || "Thayfinance";
+  event.waitUntil(
+    self.registration.showNotification(titulo, {
+      body: dados.corpo || "",
+      icon: "/pwa-192.png",
+      badge: "/pwa-192.png",
+      tag: dados.tag || undefined, // mesma tag substitui a anterior (não acumula)
+      data: { url: dados.url || "/" },
+    })
+  );
+});
+
+// tocou na notificação → foca o app aberto ou abre uma janela nova
+self.addEventListener("notificationclick", (event) => {
+  event.notification.close();
+  const url = event.notification.data?.url || "/";
+  event.waitUntil(
+    self.clients
+      .matchAll({ type: "window", includeUncontrolled: true })
+      .then((janelas) => {
+        for (const j of janelas) {
+          if ("focus" in j) return j.focus();
+        }
+        return self.clients.openWindow(url);
+      })
+  );
+});

src/sw.js

@@ -14,3 +14,8 @@ verify_jwt = false
 # A própria função valida o header X-Backup-Secret.
 [functions.backup]
 verify_jwt = false
+
+# Notificações push (chamada pelo agendador pg_cron, sem login Supabase).
+# A própria função valida o header X-Notify-Secret.
+[functions.notificar]
+verify_jwt = false