Cómo implementar notificaciones push en el app móvil de tu servidor de MU Online

Las notificaciones push transforman el portal o app de tu servidor de MU Online en un canal de comunicación en tiempo real, capaz de avisar al jugador sobre el inicio de un Castle Siege, la apertura de un evento raro o una promoción relámpago en la tienda — incluso con el navegador o app cerrado. A diferencia del correo o Discord, el push llega instantáneamente a la pantalla del dispositivo, con una tasa de atención mucho más alta. Implementar esto correctamente exige integrar Firebase Cloud Messaging, configurar un Service Worker en el PWA, conectar eventos reales del servidor de juego a disparadores de envío, y sobre todo respetar la preferencia del jugador para no generar cancelación masiva del permiso. Este tutorial cubre la implementación completa, desde cero hasta la integración con eventos del GameServer.

Por qué push notification y no solo correo o Discord

Cada canal de comunicación tiene un papel distinto en la retención de jugadores. El correo es asíncrono y bueno para contenido más largo (patch notes, resúmenes semanales); Discord depende de que el jugador tenga las notificaciones activas en ese servidor específico; el push llega directo a la pantalla de bloqueo del celular o como notificación del sistema operativo, con un tiempo de reacción mucho más rápido. Para avisos sensibles al tiempo — "El Castle Siege empieza en 10 minutos", "Invasion de Kundun activa ahora" — el push es el único canal con posibilidades reales de que el jugador lo vea a tiempo para actuar.

Eligiendo entre PWA y app nativo

Antes de implementar el push, define la plataforma. Para la mayoría de los servidores de MU Online, un PWA bien configurado es la opción más eficiente:

Para la mayoría de los casos, empieza con PWA y solo evalúa un app nativo si la base de jugadores en iOS es lo suficientemente grande para justificar el costo adicional.

Configurando Firebase Cloud Messaging

Firebase Cloud Messaging (FCM) es el servicio de envío más usado por ser gratuito y cubrir Android, iOS y Web. Los pasos iniciales de configuración:

1. Crear un proyecto en la consola de Firebase (console.firebase.google.com).
2. Agregar un app Web al proyecto y copiar las credenciales (apiKey, projectId, messagingSenderId, etc.).
3. Generar un par de claves VAPID en la pestaña de Cloud Messaging, necesario para Web Push.
4. Instalar el SDK en el proyecto del sitio (npm install firebase).

Ejemplo de configuración inicial en un proyecto Next.js:

// lib/firebase.js
import { initializeApp } from 'firebase/app';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);
export const messaging = typeof window !== 'undefined' ? getMessaging(app) : null;

Registrando el Service Worker

El push solo funciona con un Service Worker registrado, responsable de recibir la notificación incluso con la pestaña/app cerrada:

// public/firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/10.7.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.7.0/firebase-messaging-compat.js');

firebase.initializeApp({
  apiKey: 'SUA_API_KEY',
  projectId: 'SEU_PROJECT_ID',
  messagingSenderId: 'SEU_SENDER_ID',
  appId: 'SEU_APP_ID',
});

const messaging = firebase.messaging();

messaging.onBackgroundMessage((payload) => {
  self.registration.showNotification(payload.notification.title, {
    body: payload.notification.body,
    icon: '/icons/icon-192.png',
  });
});

Este archivo debe quedar en la raíz pública del sitio (public/firebase-messaging-sw.js), accesible directamente por URL, para que el navegador pueda registrarlo.

Solicitando el permiso del jugador correctamente

Pedir permiso de notificación tan pronto el jugador entra al sitio por primera vez es el error más común y la principal causa de rechazo. El enfoque correcto es contextual:

• Espera a que el jugador realice una acción relevante (ej.: registrarse, visitar la página de eventos) antes de pedir el permiso.
• Explica el valor antes del prompt nativo del navegador: un pequeño banner "¿Quieres que te avisemos cuando empiece el Castle Siege? Activa las notificaciones" antes de llamar a la API real de permiso.
• Nunca pidas de nuevo de forma insistente si el jugador lo niega — respeta su elección y ofrece la opción de activarlo después en la configuración del perfil.

async function solicitarPermissao() {
  const permissao = await Notification.requestPermission();
  if (permissao === 'granted') {
    const token = await getToken(messaging, { vapidKey: 'SUA_VAPID_KEY' });
    // enviar token para o backend, associado ao jogador logado
    await fetch('/api/push/registrar', {
      method: 'POST',
      body: JSON.stringify({ token }),
    });
  }
}

Segmentando notificaciones por tipo de evento

Igual que en la newsletter, notificar todo a todo el mundo genera cansancio y cancelación de permiso. Estructura categorías que el jugador pueda elegir:

Guarda la preferencia de cada jugador (qué categorías aceptó) en una tabla de la base de datos del sitio, vinculada al token de push, y siempre segmenta el envío por esa preferencia.

Integrando eventos reales del GameServer al envío

La parte más poderosa (y más laboriosa) es conectar el propio GameServer al sistema de push, para notificar el momento exacto en que un evento de juego comienza, no un horario fijo aproximado. Una arquitectura común:

1. Un pequeño servicio intermediario monitorea los logs del GameServer o consulta la base de datos del juego periódicamente (cada 10-30 segundos), buscando el cambio de estado de eventos (ej.: columna EventStatus en la tabla de configuración de evento).
2. Al detectar que un evento pasó de "cerrado" a "abierto", ese servicio llama a la API del backend del sitio.
3. El backend del sitio consulta la tabla de tokens de push segmentados por la categoría correspondiente y envía la notificación vía API de Firebase Admin SDK.

Ejemplo simplificado del envío en el backend, usando Firebase Admin:

// server: dispara notificação quando o serviço detecta evento aberto
const admin = require('firebase-admin');

async function notificarEvento(categoria, titulo, corpo) {
  const tokens = await buscarTokensPorCategoria(categoria); // consulta ao banco
  await admin.messaging().sendEachForMulticast({
    tokens,
    notification: { title: titulo, body: corpo },
  });
}

// exemplo de chamada quando o serviço detecta Devil Square aberto
notificarEvento('eventos_pve', 'Devil Square está aberto!', 'Corra para participar antes que feche.');

Probando en distintas plataformas

Antes de lanzar a todos los jugadores, prueba el flujo completo en cada entorno objetivo:

• Android (Chrome): soporte completo, prueba con el app/PWA en segundo plano y totalmente cerrado.
• iOS (Safari): exige que el jugador haya instalado el PWA en la pantalla de inicio (Agregar a la Pantalla de Inicio); el push no funciona solo con el navegador abierto normalmente.
• Escritorio (Chrome/Edge/Firefox): soporte completo, útil para jugadores que siguen desde la computadora.

Documenta las limitaciones de iOS claramente para los jugadores en el propio sitio, evitando tickets de soporte de quienes no lograron activarlo por no haber instalado el PWA correctamente.

Errores comunes y soluciones

Lista de verificación de notificaciones push

• Decisión tomada entre PWA y app nativo, según la base de jugadores.
• Proyecto Firebase configurado con claves VAPID generadas.
• Service Worker registrado y accesible en la raíz pública del sitio.
• Flujo de solicitud de permiso contextual implementado.
• Categorías de notificación definidas y preferencias guardadas por jugador.
• Integración entre eventos reales del GameServer y el envío de push.
• Pruebas realizadas en Android, iOS (PWA instalado) y escritorio.

Con el push funcionando de punta a punta, el servidor gana un canal de comunicación en tiempo real que complementa el correo y Discord — vale la pena revisar el tutorial de cómo crear un servidor de MU Online para garantizar que la infraestructura de backend soporte esta integración con el GameServer sin cuellos de botella de rendimiento.

Preguntas frecuentes