Como colocar jogos no seu app com WebView e HTML5
Como pôr um jogo HTML5 pronto dentro de um app Android ou iOS que você já tem: arquivos locais ou hospedados, progresso salvo, botão voltar e licença.
Para colocar jogos no seu app, você não precisa de uma engine de jogo lá dentro. Precisa de um WebView: o componente que o Android e o iOS oferecem para mostrar conteúdo web numa tela nativa. Você coloca a pasta de um jogo HTML5 pronto dentro do pacote do app ou no seu servidor HTTPS, aponta o WebView para o index.html e o app ganha uma área de jogos que roda o mesmo código da versão de navegador.
Este guia é para quem já tem um app (de varejo, banco, escola, clube ou veículo de mídia) e quer jogos dentro dele como um recurso, e não um app novo na loja. Ele trata da escolha entre arquivos locais e hospedados, das configurações do WebView que quebram jogos quando estão erradas, do progresso salvo, do botão voltar, de quais templates nossos se encaixam e de como a licença conta os apps. Os detalhes de plataforma vêm da documentação do Android Developers e do Apple Developer, lida em 30 de outubro de 2026.
Como colocar jogos no seu app: o caminho do WebView
Um WebView é o motor de um navegador sem o navegador em volta. O código nativo cria o componente, define tamanho e configurações e diz o que carregar. No Android a classe se chama WebView; no iOS, WKWebView. O jogo HTML5 nem percebe a diferença: ele vê uma página, um canvas e um armazenamento, como veria no Chrome ou no Safari.
Por isso esse caminho é tão usado para jogos dentro de apps. Quem faz o jogo trabalha com HTML, CSS e JavaScript, quem cuida do app acrescenta uma tela e algumas configurações, e a mesma pasta do jogo pode ficar também no site. São três partes para planejar:
- Onde ficam os arquivos: dentro do app ou no seu servidor HTTPS.
- Como o WebView é configurado: JavaScript, armazenamento e o endereço de onde o jogo roda.
- Como jogo e app conversam: abrir, pausar, botão voltar, fechar.
Nossos templates encaixam nesse formato porque cada um traz uma pasta game/ pronta com index.html, feita para hospedagem estática, sem PHP nem banco de dados para o jogo em si. O que nenhum deles inclui é a parte nativa. Toda edição lista apps nativos ou builds para lojas em "Não incluído nesta edição", então a tela com o WebView é trabalho da sua equipe ou um serviço que orçamos à parte.
Ver os templates de jogos HTML5
Local ou hospedado: onde guardar os arquivos do jogo
Local: o jogo vai dentro do app
O guia do Android sobre conteúdo dentro do app diz que conteúdo web empacotado no app não precisa de internet nem gasta o plano de dados do usuário. Você copia a pasta game/ para os assets do app e carrega de lá. O preço é o tamanho: o jogo pesa no download, e cada atualização do jogo exige uma versão nova do app, que passa pela revisão da loja.
Hospedado: o app busca o jogo no seu servidor
O WebView abre um endereço HTTPS do seu domínio. Você atualiza o jogo sem gerar outro build do app, e o app continua leve. O preço é que o jogo precisa de conexão, e rede lenta vira primeira carga lenta.
A Apple tem uma regra específica para isso. A diretriz 4.7 das App Review Guidelines trata de minijogos em HTML5 e JavaScript que não estão embutidos no binário. Entre as condições, o app não pode estender nem expor APIs nativas da plataforma a esse software sem permissão da Apple, e precisa oferecer um índice do que disponibiliza, com universal links. Leia a 4.7 inteira antes de escolher o caminho hospedado no iOS.
- Tamanho do app: local soma o peso do jogo; hospedado quase não soma nada.
- Atualizações: local exige versão nova do app; hospedado muda quando você sobe os arquivos.
- Conexão: local pode abrir sem rede depois de instalado; hospedado precisa de rede.
- Revisão: jogos locais são revisados junto com o app; jogos hospedados no iOS caem na diretriz 4.7.
Configurações do WebView no Android que salvam ou quebram o jogo
A maioria dos casos de "o jogo abre com a tela branca" vem de três padrões. Os três estão documentados no Android Developers.
- JavaScript desligado. O guia do WebView diz que o JavaScript vem desativado por padrão. Todo jogo HTML5 precisa dele, então ative em WebSettings.
- Armazenamento desligado. A referência de WebSettings diz que o valor padrão de setDomStorageEnabled é false. Jogos que guardam o progresso no localStorage precisam dele ligado, senão toda sessão começa do zero.
- file:// é o endereço errado. O guia de conteúdo no app explica que endereços file:// são origens opacas, que não usam APIs como fetch() ou XMLHttpRequest, e desaconselha ligar as configurações de acesso a arquivos. Nossas páginas de produto dizem o mesmo do lado do jogo: edições como Gridspark e Twirldrop não rodam a partir de file://.
A saída para o terceiro ponto é o WebViewAssetLoader, da biblioteca AndroidX Webkit. Ele serve os arquivos dos assets do app por um endereço HTTPS, e o próprio exemplo do Android carrega https://appassets.androidplatform.net/assets/index.html. Para o jogo, isso parece um site comum, então módulos ES, fetch e armazenamento funcionam como no seu servidor.
iOS: WKWebView, arquivos locais e o armazenamento de dados
No iOS o componente é o WKWebView. A Apple documenta o loadFileURL(_:allowingReadAccessTo:) para conteúdo local: o segundo argumento é o arquivo ou a pasta que o WebKit pode ler, e passar uma pasta deixa a página carregar os arquivos ao redor.
Como nossas edições não aceitam abrir por file://, teste esse caminho com cuidado ou evite. A Apple também oferece o WKURLSchemeHandler, um protocolo para carregar recursos com esquemas de URL que o WebKit não trata, e assim o app pode servir a pasta do jogo num esquema próprio. O Capacitor faz isso por você: o esquema padrão dele no iOS é capacitor.
Os dados ficam no WKWebsiteDataStore. A página da Apple diz que o armazenamento padrão grava os dados do site de forma persistente no disco, e que um armazenamento não persistente guarda tudo só na memória, pensado para navegação privada. Se alguém da equipe configurar um não persistente, o jogador perde o progresso toda vez que fecha o app.
O iOS não tem botão voltar do sistema, então a área de jogos precisa de uma saída própria: um botão de fechar na barra nativa, ou um que o jogo aciona por um message handler.
Progresso salvo dentro do app
Nossos jogos salvam no armazenamento do navegador do jogador, não num servidor. Solitaire Links e Deepforge dizem isso com todas as letras nas páginas: o progresso fica no localStorage, sem conta e sem sincronização na nuvem. Dentro de um app, isso tem três consequências.
- O endereço faz parte do save. O armazenamento do navegador pertence a uma origem. Se você troca de esquema ou de host, por exemplo de um domínio de teste para appassets.androidplatform.net, os jogadores recomeçam. Escolha o endereço uma vez só.
- A chave de salvamento faz parte do save. A página do Tenguin pede para manter a chave de salvamento igual num jogo publicado, senão os jogadores perdem o progresso. Várias edições em TypeScript guardam essa chave no brand.ts. Mude de propósito, antes do lançamento, nunca depois.
- Limpar os dados do app limpa o jogo. Desinstalar ou apagar o armazenamento do app remove o save, como acontece ao limpar um navegador.
Se o progresso tiver que acompanhar o usuário entre aparelhos, isso é um recurso de servidor que nenhuma edição nossa traz. Todas listam salvamento na nuvem ou contas como não incluídos. O Deepforge é o ponto de partida mais amigável: a página dele descreve exportar e importar o save pelo menu, e uma pequena API window.DeepForge que deixa a página hospedeira pausar, retomar, ler o save e ouvir os eventos de salvamento.
Ver o Deepforge e a API para a página hospedeira
Botão voltar, pausa e saída do jogo
Jogos HTML5 costumam ser uma página só. Isso pesa no Android, onde o botão voltar percorre o histórico do WebView. O guia do WebView mostra o padrão: verificar canGoBack() e chamar goBack(), ou deixar o sistema tratar o evento; com AndroidX, a mesma lógica vai no OnBackPressedDispatcher. Num jogo de página única o histórico costuma estar vazio, e aí o voltar fecha a área de jogos na hora, no meio da fase.
Decida o que o voltar faz e deixe por escrito:
- O primeiro toque abre o menu de pausa do jogo; o segundo sai da área de jogos.
- Ou o voltar sempre sai, depois que o jogo salvou. Toda edição salva no aparelho, mas confira quando ela grava: no fim da fase ou durante a partida.
- Quando o app vai para segundo plano, pause o jogo. Sem pausa, os cronômetros continuam correndo atrás das outras telas do app.
Nossas edições não vêm com uma ponte para o app. Algumas oferecem uma entrada pelo lado da página: Gridspark e Ricopop têm tela de "toque para começar" e botão de tela cheia que você liga ou desliga num arquivo de configuração, e o Deepforge expõe pausar e retomar para a página. Qualquer outra coisa, como avisar o código nativo quando a fase termina, é uma pequena mudança no código-fonte feita pela sua equipe ou num serviço orçado.
Ver o Gridspark, JavaScript puro sem build para jogar
Licença: um jogo, um app, e o que perguntar antes
Nossos termos dão uma licença perpétua e não exclusiva para usar a edição em um produto final, seu ou de um cliente. O seu app com a área de jogos é esse produto final. Os jogadores podem acessar de graça ou com monetização por anúncios. Você pode alterar código, artes e sons, e o white label é permitido: sua marca entra no lugar da nossa.
Três situações pedem mais atenção.
- Vários apps. Uma agência que coloca o mesmo jogo em três apps de clientes precisa de três licenças. Comprar vários templates no mesmo pedido dá desconto progressivo: 5% em 2, 10% em 3, 15% em 4 e 20% em 5 ou mais.
- Versões Android e iOS do mesmo app. Uma licença deixa você publicar o jogo onde quiser, Google Play e App Store incluídos. Continua valendo uma licença por produto final.
- Um SDK de jogos para outros desenvolvedores. Os termos proíbem redistribuir o template ou o código dentro de outro produto feito para desenvolvedores. Um módulo de jogos que você vende para outros criadores de apps é esse tipo de produto.
Se o app cobrar pela área de jogos ou vender itens dentro dela, pergunte antes também. Os termos citam acesso gratuito e monetização por anúncios, e várias edições listam compras com dinheiro real como não incluídas. No iOS, a diretriz 3.1.1 diz que desbloquear recursos ou conteúdo, inclusive fases de jogo, tem que usar compra dentro do app.
Licenças, notas fiscais e orçamentos para empresas
Perguntas frequentes sobre jogos dentro de apps
Dá para colocar um jogo HTML5 dentro de um app Android ou iOS?
Dá. Carregue a pasta do jogo num WebView (WebView no Android, WKWebView no iOS), empacotada no app ou vinda do seu servidor HTTPS. Ative JavaScript e armazenamento, e sirva os arquivos por um endereço no formato HTTPS, não por file://.
Os jogos funcionam offline dentro do app?
Só se você empacotar os arquivos e a edição não buscar nada na rede. Várias edições nossas trazem arte, sons e fontes locais; a página do Ricopop diz que ele precisa de conexão. Teste em modo avião antes de prometer.
O jogador perde o progresso quando eu atualizo o app?
Não, se o endereço e a chave de salvamento continuarem iguais. O save fica no armazenamento do WebView para aquela origem. Mudar esquema, host ou chave faz todo mundo recomeçar.
Quantas licenças preciso para o meu app?
Uma por produto final. Um app com um jogo é uma licença; o mesmo jogo em apps de três clientes são três. O mesmo app no Google Play e na App Store não pede uma segunda licença: você pode publicar o jogo licenciado onde quiser.
Próximo passo
Escolha um jogo, jogue a demo no celular, leia a lista "Não incluído nesta edição" e o capítulo do manual sobre progresso salvo. Se preferir que a gente monte a área de jogos no seu app, mande o app, as plataformas e o jogo que você gostou, e respondemos com escopo, preço e prazo.