Como transformar o site do seu servidor de MU Online em um PWA instalável
Transforme o site do seu servidor de MU Online em um Progressive Web App instalável, com manifest, service worker, cache offline e notificações push para aumentar retenção de jogadores.
O site de um servidor de MU Online normalmente concentra ranking, notícias, loja de VIP/WCoin e o painel de conta — mas a maioria ainda é consumida como um site comum, sem ícone na tela inicial e sem funcionar offline. Transformar esse site em um Progressive Web App (PWA) aproxima a experiência de u
O site de um servidor de MU Online normalmente concentra ranking, notícias, loja de VIP/WCoin e o painel de conta — mas a maioria ainda é consumida como um site comum, sem ícone na tela inicial e sem funcionar offline. Transformar esse site em um Progressive Web App (PWA) aproxima a experiência de um aplicativo nativo: o jogador instala o ícone no celular, recebe notificações push de eventos e acessa páginas já visitadas mesmo sem internet, tudo isso sem passar por loja de aplicativos. Este tutorial mostra o caminho completo — manifest, service worker, estratégia de cache e notificações — aplicado à realidade de um site de servidor de MU.
Por que vale a pena para um servidor de MU
Jogadores de MU acessam o site majoritariamente pelo celular para conferir ranking, horário de eventos (Devil Square, Castle Siege, Chaos Castle) e status da loja. Um PWA reduz a distância entre "lembrar que o servidor existe" e "abrir o site" para um único toque no ícone da tela inicial, e permite reengajar jogadores inativos via notificação push quando um evento importante está prestes a começar — uma vantagem de retenção que um site comum não oferece.
Pré-requisito obrigatório: HTTPS
Service workers só são registrados em contextos seguros. Se o domínio do seu servidor ainda serve o site em HTTP, configure um certificado (Let's Encrypt é gratuito e amplamente suportado por painéis como cPanel e Plesk) antes de qualquer outro passo deste tutorial — nenhuma das funcionalidades de PWA funcionará sem isso.
Passo 1 — Criar o arquivo manifest.json
O manifest descreve como o site se comporta quando instalado: nome, ícones, cor de tema e modo de exibição.
{
"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: standaloneremove a barra de endereço do navegador, dando aparência de app nativo.start_urlcom parâmetro UTM permite medir quantos acessos vêm do app instalado versus navegador comum.- Prepare os ícones em pelo menos duas resoluções (192x192 e 512x512), com a versão "maskable" recortável pelos diferentes formatos de ícone do Android.
Referencie o manifest no <head> de todas as páginas:
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#c9a24b">Passo 2 — Registrar o Service Worker
O service worker é o script que roda em segundo plano no navegador e intercepta requisições de rede, permitindo cache e funcionamento 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('Falha ao registrar SW:', err));
});
}
</script>Passo 3 — Definir a estratégia de cache
Nem todo conteúdo do site deve ser cacheado da mesma forma. Separe por tipo de conteúdo:
| Tipo de conteúdo | Estratégia recomendada | Motivo |
|---|---|---|
| CSS, JS, fontes, logos | Cache-first (usa cache, atualiza em segundo plano) | Muda raramente, ganho de velocidade grande |
| Página de ranking | Network-first com fallback para cache | Dado dinâmico, mas útil ver a última versão offline |
| Página de notícias | Stale-while-revalidate | Mostra rápido o que já tem em cache e atualiza silenciosamente |
| Login/painel/loja | Network-only, sem cache | Envolve dados sensíveis e transações, nunca deve usar dado desatualizado |
Passo 4 — Implementar o 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/painel/loja: 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;
}
// demais páginas: network-first com fallback offline
event.respondWith(
fetch(event.request).catch(() => caches.match(event.request).then((r) => r || caches.match('/offline.html')))
);
});Crie uma página offline.html simples, com o logo do servidor e uma mensagem informando que a conexão caiu — ela aparece quando o jogador tenta acessar algo não cacheado sem internet.
Passo 5 — Configurar notificações push
Notificações push exigem um backend que gerencie inscrições e um serviço de envio (Firebase Cloud Messaging é o mais usado por sites PHP/Node por ter tier gratuito generoso). O fluxo básico:
- O navegador pede permissão de notificação ao jogador (
Notification.requestPermission()). - O service worker se inscreve em um endpoint push e recebe uma
subscriptionúnica. - Essa subscription é salva no banco de dados do painel, vinculada à conta do jogador.
- Quando um evento começa (Castle Siege, Boss especial), seu backend dispara a notificação para todas as subscriptions ativas.
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'
})
);
});Passo 6 — Testar a instalabilidade
Use o Chrome DevTools (aba Application → Manifest e Application → Service Workers) para confirmar que o manifest é válido e o service worker está ativo. O Lighthouse (aba Lighthouse, categoria PWA) audita automaticamente os critérios de instalabilidade e aponta o que falta — ícones ausentes, falta de HTTPS, start_url inacessível offline são os problemas mais comuns detectados.
Diferenças de comportamento entre Android e iOS
| Aspecto | Android (Chrome) | iOS (Safari) |
|---|---|---|
| Prompt de instalação | Automático, banner "Adicionar à tela inicial" | Manual, via botão Compartilhar → Adicionar à Tela de Início |
| Notificações push | Suportadas nativamente | Suportadas apenas a partir do iOS 16.4+, e só após instalação manual |
| Ícone maskable | Suportado, recorta conforme o launcher | Ignorado, usa o ícone normal |
| Atualização do service worker | Automática em segundo plano | Pode exigir reabrir o app instalado |
Métricas para acompanhar após o lançamento
Monitore, no Google Analytics ou ferramenta equivalente, o tráfego filtrado pelo parâmetro utm_source=pwa definido no start_url do manifest — isso isola quantos acessos vêm de jogadores que instalaram o app. Acompanhe também a taxa de opt-in em notificações push e a taxa de retorno de jogadores que receberam notificação de evento versus os que não instalaram o PWA; essa comparação costuma justificar rapidamente o investimento de tempo na implementação.
Erros comuns e soluções
| Sintoma | Causa provável | Solução |
|---|---|---|
| Prompt de instalação não aparece | Site sem HTTPS ou manifest inválido | Corrija o certificado e valide o manifest no DevTools |
| Login some ou trava com dado antigo | Service worker cacheando páginas de painel/loja | Exclua essas rotas da estratégia de cache no sw.js |
| Ícone aparece cortado no Android | Ícone sem versão maskable | Adicione ícone 512x512 com purpose: maskable |
| Notificações não chegam no iOS | Versão do iOS anterior a 16.4 ou app não instalado manualmente | Oriente o jogador a instalar via Safari antes de habilitar notificações |
| Conteúdo desatualizado mesmo após update | Cache antigo não invalidado | Incremente o nome do CACHE_NAME a cada deploy para forçar a limpeza |
Checklist de lançamento do PWA
- HTTPS ativo em todo o domínio do site.
manifest.jsoncriado, referenciado e validado no DevTools.- Ícones 192x192 e 512x512 (incluindo versão maskable) publicados.
- Service worker registrado com estratégia de cache por tipo de página.
- Rotas de login/painel/loja excluídas do cache.
- Página offline.html criada e testada sem conexão.
- Notificações push configuradas e testadas em ao menos um evento real.
- Auditoria do Lighthouse (categoria PWA) sem pendências críticas.
Com o PWA no ar, o próximo passo natural é integrar as notificações push ao seu calendário de eventos automatizado, avisando jogadores minutos antes de cada Castle Siege ou boss especial. Se o site ainda está em estágio inicial de estrutura, vale revisar o guia de criação de servidor de MU Online para alinhar o planejamento de infraestrutura web desde o começo. </content>
Perguntas frequentes
Preciso reescrever o site inteiro para virar um PWA?
Não. Um PWA é uma camada adicionada sobre o site que já existe — você inclui um arquivo manifest.json, registra um service worker e ajusta alguns detalhes de HTTPS e ícones. O HTML, CSS e backend continuam os mesmos.
O PWA funciona sem internet?
Parcialmente. Com um service worker bem configurado, páginas e recursos já visitados (ranking, notícias, itens estáticos) ficam disponíveis offline via cache. Ações que dependem do banco de dados em tempo real, como login ou compra na loja, continuam exigindo conexão.
Preciso publicar na Google Play ou App Store?
Não é obrigatório. Um PWA pode ser instalado direto do navegador (Chrome, Edge, Safari em iOS recente) sem passar por loja de aplicativos. Publicar em loja é opcional e exige um passo extra de empacotamento (TWA para Android, por exemplo).
PWA ajuda em quê na retenção de jogadores?
O ícone instalado na tela inicial do celular reduz a fricção de acesso — o jogador não precisa lembrar a URL nem buscar no navegador, só toca no ícone. Combinado com notificações push, isso aumenta significativamente o retorno de jogadores inativos aos eventos e novidades.
Preciso de HTTPS obrigatoriamente?
Sim, sem exceção. Service workers e a instalação de PWA só funcionam em conexões HTTPS (ou localhost para desenvolvimento). Se o site do seu servidor ainda roda em HTTP puro, esse é o primeiro pré-requisito a resolver.