Como enviar Push Notifications com wsocket.io: Web Push, FCM e APNs — Guia prático

Push notifications permitem engajar usuários mesmo quando não estão no seu site. Com o wsocket.io você envia Web Push (VAPID), FCM (Android) e APNs (iOS) de qualquer backend — sem precisar configurar servidores de push, gerenciar tokens ou lidar com as APIs do Google/Apple diretamente.

TL;DR: Registre o service worker no browser, inscreva o dispositivo via SDK, envie notificações do seu backend com 3 linhas de código. Broadcast, segmentos e tracking inclusos.

---

Arquitetura

Seu Backend (Node.js, Python, Go, etc.)
    │
    ▼
wsocket.io Push Engine
    │
    ├── Web Push (VAPID) → Browsers (Chrome, Firefox, Edge, Safari)
    ├── FCM → Dispositivos Android
    └── APNs → Dispositivos iOS

O wsocket.io gerencia toda a complexidade: tokens VAPID, chaves FCM, certificados APNs, retry com backoff exponencial e delivery tracking.

---

1. Setup: Registrando o Service Worker

O Web Push requer um service worker no browser. Crie o arquivo na raiz do seu projeto:

// public/sw.js
self.addEventListener('push', (event) => {
  const data = event.data?.json() || {};

  event.waitUntil(
    self.registration.showNotification(data.title || 'Nova notificação', {
      body: data.body || '',
      icon: data.icon || '/icon-192.png',
      badge: data.badge || '/badge-72.png',
      data: { url: data.url || '/' },
      actions: data.actions || [],
    })
  );
});

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

---

2. Inscrevendo o dispositivo no Browser

<!-- index.html -->
<script>
  const WSOCKET_API_KEY = 'wsk_live_SUA_API_KEY';
  const WSOCKET_PUSH_URL = 'wss://node00.wsocket.online';

  async function subscribePush() {
    // 1. Registrar service worker
    const registration = await navigator.serviceWorker.register('/sw.js');

    // 2. Solicitar permissão
    const permission = await Notification.requestPermission();
    if (permission !== 'granted') {
      console.log('❌ Permissão negada');
      return;
    }

    // 3. Inscrever para push via wsocket.io
    const ws = new WebSocket(`${WSOCKET_PUSH_URL}/?key=${WSOCKET_API_KEY}`);

    ws.onopen = () => {
      ws.send(JSON.stringify({
        action: 'push.subscribe',
        registration: {
          endpoint: registration.pushManager.getSubscription()
            .then(sub => sub?.endpoint),
          // wsocket.io gerencia as VAPID keys automaticamente
        },
        tags: ['news', 'promotions'],  // Segmentos opcionais
        userId: 'user_123'             // ID do usuário (opcional)
      }));
    };

    ws.onmessage = (e) => {
      const msg = JSON.parse(e.data);
      if (msg.action === 'push.subscribed') {
        console.log('✅ Inscrito para push notifications');
      }
    };
  }

  // Chamar ao clicar no botão "Ativar notificações"
  document.getElementById('btn-push')?.addEventListener('click', subscribePush);
</script>

Botão na UI

<button id="btn-push" class="btn btn-primary">
  🔔 Ativar Notificações
</button>

---

3. Enviando Push do Backend (Node.js)

npm install @wsocket-io/sdk

// push.js
const { WSocket } = require('@wsocket-io/sdk');

const client = new WSocket({
  url: 'wss://node00.wsocket.online',
  apiKey: process.env.WSOCKET_API_KEY
});

await client.connect();

// ── Enviar para um usuário específico ──
await client.push.send({
  userId: 'user_123',
  title: 'Pedido confirmado! 🎉',
  body: 'Seu pedido #4521 foi confirmado e está sendo preparado.',
  icon: '/icon-192.png',
  url: '/pedidos/4521',
  data: { orderId: 4521 }
});

// ── Broadcast para TODOS os inscritos ──
await client.push.broadcast({
  title: 'Novidade! 🚀',
  body: 'Nova funcionalidade disponível. Confira agora!',
  icon: '/icon-192.png',
  url: '/novidades'
});

// ── Enviar para um segmento ──
await client.push.send({
  tags: ['promotions'],
  title: 'Oferta especial 💰',
  body: '50% de desconto no plano Pro — só hoje!',
  url: '/pricing',
  ttl: 3600  // Expira em 1 hora
});

---

4. Enviando Push do Backend (Python)

pip install wsocket-io

# push.py
from wsocket import WSocket
import asyncio

async def main():
    client = WSocket(
        url="wss://node00.wsocket.online",
        api_key="wsk_live_SUA_API_KEY"
    )
    await client.connect()

    # Enviar para um usuário
    await client.push.send(
        user_id="user_123",
        title="Pedido enviado! 📦",
        body="Seu pedido está a caminho. Rastreie agora.",
        url="/pedidos/4521"
    )

    # Broadcast
    await client.push.broadcast(
        title="Manutenção programada ⚠️",
        body="Sistema ficará indisponível amanhã das 2h às 4h.",
        tags=["system"]
    )

asyncio.run(main())

---

5. Enviando Push do Backend (Go)

go get github.com/wsocket-io/sdk-go

// main.go
package main

import (
    "github.com/wsocket-io/sdk-go"
)

func main() {
    client := wsocket.New(wsocket.Config{
        URL:    "wss://node00.wsocket.online",
        APIKey: "wsk_live_SUA_API_KEY",
    })
    defer client.Close()

    // Enviar push
    client.Push.Send(wsocket.PushMessage{
        UserID: "user_123",
        Title:  "Nova mensagem! 💬",
        Body:   "Alice enviou uma mensagem para você.",
        URL:    "/chat",
    })

    // Broadcast para segmento
    client.Push.Send(wsocket.PushMessage{
        Tags:  []string{"news"},
        Title: "Atualização do sistema 🔄",
        Body:  "Versão 2.5 disponível com novas funcionalidades.",
        URL:   "/changelog",
    })
}

---

6. Integração com Express.js (API REST)

// routes/push.js
const express = require('express');
const { WSocket } = require('@wsocket-io/sdk');
const router = express.Router();

const ws = new WSocket({
  url: 'wss://node00.wsocket.online',
  apiKey: process.env.WSOCKET_API_KEY
});
ws.connect();

// POST /api/push/send — enviar push para um usuário
router.post('/send', async (req, res) => {
  const { userId, title, body, url } = req.body;

  await ws.push.send({ userId, title, body, url });

  res.json({ ok: true, sent: true });
});

// POST /api/push/broadcast — broadcast para segmento
router.post('/broadcast', async (req, res) => {
  const { tags, title, body, url } = req.body;

  await ws.push.send({ tags, title, body, url });

  res.json({ ok: true, broadcast: true });
});

module.exports = router;

---

7. Exemplos de uso real

E-commerce — Status de pedido

// Quando o status do pedido mudar:
await ws.push.send({
  userId: order.userId,
  title: `Pedido #${order.id} — ${statusLabel[order.status]}`,
  body: statusMessages[order.status],
  icon: '/icon-order.png',
  url: `/pedidos/${order.id}`,
  data: { orderId: order.id, status: order.status }
});

SaaS — Notificações do sistema

// Broadcast para todos os usuários do plano Pro
await ws.push.send({
  tags: ['plan:pro'],
  title: 'Nova funcionalidade disponível 🎉',
  body: 'Webhooks agora suportam retry automático com backoff.',
  url: '/docs/webhooks'
});

Chat — Mensagem direta

// Quando alguém envia DM
await ws.push.send({
  userId: recipientId,
  title: `${senderName} enviou uma mensagem`,
  body: message.text.substring(0, 100),
  icon: senderAvatar,
  url: `/chat/${conversationId}`
});

---

8. Planos de Push Notifications

Recurso	Free	Pro	Enterprise
Push subscriptions	100	50K	Ilimitado
Notificações/dia	1K	100K	Ilimitado
Web Push (VAPID)	✅	✅	✅
FCM + APNs	❌	✅	✅
Broadcast & segmentos	❌	✅	✅
Delivery tracking	❌	✅	✅
Dedicated infra	❌	❌	✅

---

9. Boas práticas

1. Peça permissão no momento certo — Não mostre o popup de notificação imediatamente. Espere o usuário interagir com alguma funcionalidade relevante
2. Segmente seus envios — Use tags para categorizar usuários (plan, interest, region)
3. Defina TTL — Notificações de promoção que expiram fazem mais sentido do que mensagens velhas
4. Use actions — Adicione botões na notificação (“Ver pedido”, “Responder”)
5. Respeite o horário — Evite enviar push de madrugada (faça server-side scheduling)

---

Conclusão

O wsocket.io elimina toda a complexidade de push notifications:

• Sem configurar VAPID keys manualmente
• Sem gerenciar tokens FCM/APNs
• Sem implementar retry com backoff
• Sem manter infraestrutura de push

Você foca no produto, o wsocket.io cuida do delivery.

Links:

• 📖 Documentação de Push
• 🚀 Criar conta gratuita
• 💻 GitHub — wsocket-io
• 📦 SDK Node.js
• 🐍 SDK Python
• 🔵 SDK Go