Cómo transformar el sitio de tu servidor de MU Online en un PWA instalable
Transforma el sitio de tu servidor de MU Online en una Progressive Web App instalable, con manifest, service worker, caché offline y notificaciones push para aumentar la retención de jugadores.
El sitio de un servidor de MU Online normalmente concentra ranking, noticias, tienda de VIP/WCoin y el panel de cuenta — pero la mayoría todavía se consume como un sitio común, sin ícono en la pantalla de inicio y sin funcionar offline. Transformar ese sitio en una Progressive Web App (PWA) acerca l
El sitio de un servidor de MU Online normalmente concentra ranking, noticias, tienda de VIP/WCoin y el panel de cuenta — pero la mayoría todavía se consume como un sitio común, sin ícono en la pantalla de inicio y sin funcionar offline. Transformar ese sitio en una Progressive Web App (PWA) acerca la experiencia a la de una aplicación nativa: el jugador instala el ícono en el celular, recibe notificaciones push de eventos y accede a páginas ya visitadas incluso sin internet, todo esto sin pasar por una tienda de aplicaciones. Este tutorial muestra el camino completo — manifest, service worker, estrategia de caché y notificaciones — aplicado a la realidad de un sitio de servidor de MU.
Por qué vale la pena para un servidor de MU
Los jugadores de MU acceden al sitio mayoritariamente desde el celular para consultar el ranking, el horario de eventos (Devil Square, Castle Siege, Chaos Castle) y el estado de la tienda. Un PWA reduce la distancia entre "recordar que el servidor existe" y "abrir el sitio" a un solo toque en el ícono de la pantalla de inicio, y permite reenganchar a jugadores inactivos vía notificación push cuando un evento importante está por comenzar — una ventaja de retención que un sitio común no ofrece.
Requisito obligatorio: HTTPS
Los service workers solo se registran en contextos seguros. Si el dominio de tu servidor todavía sirve el sitio en HTTP, configura un certificado (Let's Encrypt es gratuito y ampliamente compatible con paneles como cPanel y Plesk) antes de cualquier otro paso de este tutorial — ninguna de las funciones de PWA funcionará sin esto.
Paso 1 — Crear el archivo manifest.json
El manifest describe cómo se comporta el sitio cuando está instalado: nombre, íconos, color de tema y modo de visualización.
{
"name": "ViciadosMU - Servidor de MU Online",
"short_name": "ViciadosMU",
"start_url": "/?utm_source=pwa",
"display": "standalone",
"background_color": "#0d0d1a",
"theme_color": "#c9a24b",
"orientation": "portrait",
"icons": [
{ "src": "/assets/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/assets/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}display: standaloneelimina la barra de direcciones del navegador, dando apariencia de app nativa.start_urlcon parámetro UTM permite medir cuántos accesos provienen de la app instalada versus el navegador común.- Prepara los íconos en al menos dos resoluciones (192x192 y 512x512), con la versión "maskable" recortable según los diferentes formatos de ícono de Android.
Referencia el manifest en el <head> de todas las páginas:
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#c9a24b">Paso 2 — Registrar el Service Worker
El service worker es el script que corre en segundo plano en el navegador e intercepta solicitudes de red, permitiendo caché y funcionamiento offline.
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registrado:', reg.scope))
.catch(err => console.error('Error al registrar SW:', err));
});
}
</script>Paso 3 — Definir la estrategia de caché
No todo el contenido del sitio debe cachearse de la misma forma. Sepáralo por tipo de contenido:
| Tipo de contenido | Estrategia recomendada | Motivo |
|---|---|---|
| CSS, JS, fuentes, logos | Cache-first (usa caché, actualiza en segundo plano) | Cambia raramente, gran ganancia de velocidad |
| Página de ranking | Network-first con fallback a caché | Dato dinámico, pero útil ver la última versión offline |
| Página de noticias | Stale-while-revalidate | Muestra rápido lo que ya está en caché y actualiza en silencio |
| Login/panel/tienda | Network-only, sin caché | Involucra datos sensibles y transacciones, nunca debe usar datos desactualizados |
Paso 4 — Implementar el sw.js
const CACHE_NAME = 'viciadosmu-v1';
const ASSETS_ESTATICOS = [
'/css/style.css',
'/js/app.js',
'/assets/icons/icon-192.png',
'/offline.html'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS_ESTATICOS))
);
self.skipWaiting();
});
self.addEventListener('activate', (event) => {
event.waitUntil(
caches.keys().then((chaves) =>
Promise.all(chaves.filter((c) => c !== CACHE_NAME).map((c) => caches.delete(c)))
)
);
});
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
// login/panel/tienda: nunca cachear
if (url.pathname.startsWith('/painel') || url.pathname.startsWith('/loja')) {
return;
}
// estáticos: cache-first
if (ASSETS_ESTATICOS.some((a) => url.pathname.endsWith(a))) {
event.respondWith(
caches.match(event.request).then((resp) => resp || fetch(event.request))
);
return;
}
// demás páginas: network-first con fallback offline
event.respondWith(
fetch(event.request).catch(() => caches.match(event.request).then((r) => r || caches.match('/offline.html')))
);
});Crea una página offline.html simple, con el logo del servidor y un mensaje informando que la conexión se cayó — aparece cuando el jugador intenta acceder a algo no cacheado sin internet.
Paso 5 — Configurar notificaciones push
Las notificaciones push requieren un backend que gestione las suscripciones y un servicio de envío (Firebase Cloud Messaging es el más usado por sitios PHP/Node por tener un nivel gratuito generoso). El flujo básico:
- El navegador pide permiso de notificación al jugador (
Notification.requestPermission()). - El service worker se suscribe a un endpoint push y recibe una
subscriptionúnica. - Esa subscription se guarda en la base de datos del panel, vinculada a la cuenta del jugador.
- Cuando un evento comienza (Castle Siege, Boss especial), tu backend dispara la notificación a todas las subscriptions activas.
self.addEventListener('push', (event) => {
const dados = event.data.json();
event.waitUntil(
self.registration.showNotification(dados.titulo, {
body: dados.corpo,
icon: '/assets/icons/icon-192.png',
badge: '/assets/icons/badge-72.png'
})
);
});Paso 6 — Probar la instalabilidad
Usa Chrome DevTools (pestaña Application → Manifest y Application → Service Workers) para confirmar que el manifest es válido y el service worker está activo. Lighthouse (pestaña Lighthouse, categoría PWA) audita automáticamente los criterios de instalabilidad y señala lo que falta — íconos faltantes, falta de HTTPS, start_url inaccesible offline son los problemas más comunes detectados.
Diferencias de comportamiento entre Android e iOS
| Aspecto | Android (Chrome) | iOS (Safari) |
|---|---|---|
| Prompt de instalación | Automático, banner "Agregar a la pantalla de inicio" | Manual, vía botón Compartir → Agregar a la pantalla de inicio |
| Notificaciones push | Compatibles de forma nativa | Compatibles solo desde iOS 16.4+, y solo tras instalación manual |
| Ícono maskable | Compatible, se recorta según el launcher | Ignorado, usa el ícono normal |
| Actualización del service worker | Automática en segundo plano | Puede requerir reabrir la app instalada |
Métricas para seguir después del lanzamiento
Monitorea, en Google Analytics o herramienta equivalente, el tráfico filtrado por el parámetro utm_source=pwa definido en el start_url del manifest — esto aísla cuántos accesos provienen de jugadores que instalaron la app. Sigue también la tasa de opt-in en notificaciones push y la tasa de retorno de jugadores que recibieron notificación de evento versus los que no instalaron el PWA; esta comparación suele justificar rápidamente la inversión de tiempo en la implementación.
Errores comunes y soluciones
| Síntoma | Causa probable | Solución |
|---|---|---|
| El prompt de instalación no aparece | Sitio sin HTTPS o manifest inválido | Corrige el certificado y valida el manifest en DevTools |
| El login desaparece o se traba con datos antiguos | Service worker cacheando páginas de panel/tienda | Excluye esas rutas de la estrategia de caché en el sw.js |
| El ícono aparece recortado en Android | Ícono sin versión maskable | Agrega ícono 512x512 con purpose: maskable |
| Las notificaciones no llegan en iOS | Versión de iOS anterior a 16.4 o app no instalada manualmente | Indica al jugador que instale vía Safari antes de habilitar notificaciones |
| Contenido desactualizado incluso después de una actualización | Caché antigua no invalidada | Incrementa el nombre del CACHE_NAME en cada despliegue para forzar la limpieza |
Lista de verificación de lanzamiento del PWA
- HTTPS activo en todo el dominio del sitio.
manifest.jsoncreado, referenciado y validado en DevTools.- Íconos 192x192 y 512x512 (incluyendo versión maskable) publicados.
- Service worker registrado con estrategia de caché por tipo de página.
- Rutas de login/panel/tienda excluidas de la caché.
- Página offline.html creada y probada sin conexión.
- Notificaciones push configuradas y probadas en al menos un evento real.
- Auditoría de Lighthouse (categoría PWA) sin pendientes críticos.
Con el PWA en funcionamiento, el siguiente paso natural es integrar las notificaciones push a tu calendario de eventos automatizado, avisando a los jugadores minutos antes de cada Castle Siege o boss especial. Si el sitio todavía está en etapa inicial de estructura, vale la pena revisar la guía de creación de servidor de MU Online para alinear la planificación de infraestructura web desde el comienzo. </content>
Preguntas frecuentes
¿Necesito reescribir todo el sitio para convertirlo en un PWA?
No. Un PWA es una capa que se agrega sobre el sitio que ya existe — incluyes un archivo manifest.json, registras un service worker y ajustas algunos detalles de HTTPS e íconos. El HTML, CSS y backend siguen siendo los mismos.
¿El PWA funciona sin internet?
Parcialmente. Con un service worker bien configurado, las páginas y recursos ya visitados (ranking, noticias, ítems estáticos) quedan disponibles offline vía caché. Las acciones que dependen de la base de datos en tiempo real, como el login o una compra en la tienda, siguen requiriendo conexión.
¿Necesito publicar en Google Play o App Store?
No es obligatorio. Un PWA puede instalarse directamente desde el navegador (Chrome, Edge, Safari en iOS reciente) sin pasar por una tienda de aplicaciones. Publicar en una tienda es opcional y exige un paso extra de empaquetado (TWA para Android, por ejemplo).
¿En qué ayuda el PWA a la retención de jugadores?
El ícono instalado en la pantalla de inicio del celular reduce la fricción de acceso — el jugador no necesita recordar la URL ni buscar en el navegador, solo toca el ícono. Combinado con notificaciones push, esto aumenta significativamente el regreso de jugadores inactivos a los eventos y novedades.
¿Necesito HTTPS obligatoriamente?
Sí, sin excepción. Los service workers y la instalación de PWA solo funcionan en conexiones HTTPS (o localhost para desarrollo). Si el sitio de tu servidor todavía funciona en HTTP puro, ese es el primer requisito a resolver.