Cómo agregar juegos a tu app con un WebView y HTML5

Para agregar juegos a tu app no necesitas un motor de videojuegos adentro. Necesitas un WebView: el componente que Android e iOS ofrecen para mostrar contenido web en una pantalla nativa. Pones la carpeta de un juego HTML5 terminado dentro del paquete de la app o en tu servidor HTTPS, apuntas el WebView a su index.html y tu app gana una sección de juegos que usa el mismo código que la versión de navegador.

Esta guía es para equipos que ya tienen una app (de una tienda, un banco, una escuela, un club o un medio) y quieren juegos dentro de ella como una función, no como una app nueva en la tienda. Cubre la elección entre archivos locales y alojados, los ajustes del WebView que rompen un juego cuando están mal, el progreso guardado, el botón atrás, qué plantillas nuestras encajan y cómo cuenta la licencia las apps. Los datos de plataforma vienen de la documentación de Android Developers y Apple Developer, consultada el 30 de octubre de 2026.

Cómo agregar juegos a tu app con un WebView

Un WebView es el motor de un navegador sin el navegador alrededor. Tu código nativo lo crea, define su tamaño y sus ajustes y le dice qué cargar. En Android la clase se llama WebView; en iOS, WKWebView. Al juego HTML5 le da igual: ve una página, un canvas y almacenamiento, como en Chrome o en Safari.

Por eso es un camino tan común para los juegos dentro de apps. Quien hace el juego trabaja con HTML, CSS y JavaScript, quien hace la app agrega una pantalla y unos cuantos ajustes, y la misma carpeta del juego puede vivir también en el sitio web. Hay tres piezas que planear:

1. Dónde viven los archivos: dentro de la app o en tu servidor HTTPS.
2. Cómo se configura el WebView: JavaScript, almacenamiento y la dirección desde la que corre el juego.
3. Cómo se hablan el juego y la app: abrir, pausar, el botón atrás, cerrar.

Nuestras plantillas encajan en ese esquema porque cada una trae una carpeta game/ lista con su index.html, pensada para alojamiento estático, sin PHP ni base de datos para el juego. Lo que ninguna incluye es la parte nativa. Todas las ediciones ponen las apps nativas o las compilaciones para tiendas en "No incluido en esta edición", así que la pantalla con el WebView es trabajo de tu equipo o un servicio que cotizamos aparte.

Ver las plantillas de juegos HTML5

Local o alojado: dónde poner los archivos del juego

Local: el juego va dentro de la app

La guía de Android sobre contenido dentro de la app dice que el contenido web compilado en la app no necesita internet ni consume los datos del usuario. Copias la carpeta game/ a los assets de la app y la cargas desde ahí. El costo es el tamaño: el juego pesa en la descarga y cada actualización del juego exige una nueva versión de la app, que pasa por la revisión de la tienda.

Alojado: la app carga el juego desde tu servidor

El WebView abre una dirección HTTPS de tu dominio. Actualizas el juego sin compilar otra versión de la app, y la app sigue ligera. El costo es que el juego necesita conexión, y una red lenta se nota en la primera carga.

Apple tiene una regla específica para esto. La pauta 4.7 de las App Review Guidelines trata los minijuegos en HTML5 y JavaScript que no vienen incluidos en el binario. Entre sus condiciones, la app no puede extender ni exponer APIs nativas de la plataforma a ese software sin permiso de Apple, y debe ofrecer un índice del software disponible, con universal links. Lee la 4.7 completa antes de elegir la vía alojada en iOS.

• Tamaño de la app: local suma el peso del juego; alojado casi no suma nada.
• Actualizaciones: local requiere nueva versión de la app; alojado cambia cuando subes los archivos.
• Conexión: local puede abrir sin red una vez instalado; alojado necesita red.
• Revisión: los juegos locales se revisan con la app; los alojados en iOS entran en la pauta 4.7.

Ajustes del WebView en Android que hacen o rompen un juego

Casi todos los reportes de "el juego se queda en blanco" vienen de tres valores por defecto. Los tres están documentados en Android Developers.

1. JavaScript apagado. La guía del WebView dice que JavaScript viene desactivado por defecto. Todo juego HTML5 lo necesita, así que actívalo en WebSettings.
2. Almacenamiento apagado. La referencia de WebSettings dice que el valor por defecto de setDomStorageEnabled es false. Los juegos que guardan el progreso en localStorage lo necesitan encendido, o cada sesión empieza de cero.
3. file:// es la dirección equivocada. La guía de contenido en la app explica que las direcciones file:// son orígenes opacos que no pueden usar APIs como fetch() o XMLHttpRequest, y desaconseja activar los permisos de acceso a archivos. Nuestras páginas dicen lo mismo desde el lado del juego: ediciones como Gridspark y Twirldrop no corren desde file://.

La solución al tercer punto es WebViewAssetLoader, de la biblioteca AndroidX Webkit. Sirve los archivos de los assets de tu app por una dirección HTTPS, y el propio ejemplo de Android carga https://appassets.androidplatform.net/assets/index.html. Para el juego eso parece un sitio normal, así que los módulos ES, fetch y el almacenamiento funcionan como en tu servidor.

iOS: WKWebView, archivos locales y el almacén de datos

En iOS el componente es WKWebView. Apple documenta loadFileURL(_:allowingReadAccessTo:) para contenido local: el segundo argumento es el archivo o la carpeta que WebKit puede leer, y si pasas una carpeta la página puede cargar los archivos que la rodean.

Como nuestras ediciones no admiten abrirse desde file://, prueba esa vía con cuidado o evítala. Apple también ofrece WKURLSchemeHandler, un protocolo para cargar recursos con esquemas de URL que WebKit no maneja, de modo que tu app puede servir la carpeta del juego con un esquema propio. Capacitor lo hace por ti: su esquema por defecto en iOS es capacitor.

Los datos viven en WKWebsiteDataStore. La página de Apple dice que el almacén por defecto guarda los datos del sitio de forma persistente en disco, y que un almacén no persistente los guarda solo en memoria, pensado para navegación privada. Si alguien del equipo configura uno no persistente, el jugador pierde su progreso cada vez que cierra la app.

iOS no tiene botón atrás del sistema, así que tu sección de juegos necesita su propia salida: un botón de cerrar en tu barra nativa, o uno que el juego active con un message handler.

Guardar el progreso dentro de la app

Nuestros juegos guardan en el almacenamiento del navegador del jugador, no en un servidor. Solitaire Links y Deepforge lo dicen claro en sus páginas: el progreso queda en localStorage, sin cuenta ni sincronización en la nube. Dentro de una app eso tiene tres consecuencias.

• La dirección es parte del guardado. El almacenamiento del navegador pertenece a un origen. Si cambias de esquema o de host, por ejemplo de un dominio de pruebas a appassets.androidplatform.net, los jugadores empiezan de nuevo. Elige la dirección una sola vez.
• La clave de guardado es parte del guardado. La página de Tenguin pide no cambiar la clave de guardado en un juego publicado, o los jugadores pierden su progreso. Varias ediciones en TypeScript guardan esa clave en brand.ts. Cámbiala a propósito, antes del lanzamiento, nunca después.
• Borrar los datos de la app borra el juego. Desinstalar o limpiar el almacenamiento de la app elimina el guardado, igual que limpiar un navegador.

Si el progreso debe seguir al usuario entre dispositivos, eso es una función de servidor que ninguna de nuestras ediciones trae. Todas indican guardado en la nube o cuentas como no incluidos. Deepforge es el punto de partida más cómodo: su página describe exportar e importar el guardado desde el menú, y una pequeña API window.DeepForge que permite a la página anfitriona pausar, reanudar, leer el guardado y escuchar los eventos de guardado.

Ver Deepforge y su API para la página anfitriona

El botón atrás, la pausa y la salida del juego

Los juegos HTML5 suelen ser una sola página. Eso importa en Android, donde el botón atrás recorre el historial del WebView. La guía del WebView muestra el patrón: revisar canGoBack() y llamar a goBack(), o dejar que el sistema maneje el evento; con AndroidX la misma lógica se registra en OnBackPressedDispatcher. En un juego de una sola página el historial suele estar vacío, y el botón atrás cierra la sección de juegos de golpe, a mitad de un nivel.

Decide qué hace el botón atrás y déjalo por escrito:

• La primera pulsación abre el menú de pausa del juego; la segunda sale de la sección de juegos.
• O atrás siempre sale, después de que el juego guardó. Todas las ediciones guardan en el dispositivo, pero revisa cuándo escriben: al terminar el nivel o durante la partida.
• Cuando la app pasa a segundo plano, pausa el juego. Sin pausa, los temporizadores siguen corriendo detrás de las otras pantallas de la app.

Nuestras ediciones no traen un puente con la app. Algunas ofrecen una entrada desde la página: Gridspark y Ricopop tienen pantalla de "toca para empezar" y botón de pantalla completa que activas o desactivas en un archivo de configuración, y Deepforge expone pausa y reanudación a la página. Cualquier otra cosa, como avisar al código nativo cuando termina un nivel, es un cambio pequeño en el código fuente que hace tu equipo o un servicio cotizado.

Ver Gridspark, JavaScript puro sin compilación para jugar

Licencia: un juego, una app y qué preguntar antes

Nuestros términos dan una licencia perpetua y no exclusiva para usar la edición en un producto final, tuyo o de un cliente. Tu app con su sección de juegos es ese producto final. Los jugadores pueden entrar gratis o con monetización por anuncios. Puedes modificar el código, el arte y el audio, y el white label está permitido: tu marca sustituye a la nuestra.

Tres casos piden más cuidado.

• Varias apps. Una agencia que pone el mismo juego en tres apps de clientes necesita tres licencias. Comprar varias plantillas en el mismo pedido da un descuento progresivo: 5% por 2, 10% por 3, 15% por 4 y 20% por 5 o más.
• Versiones Android e iOS de la misma app. Una licencia te permite publicar ese juego donde quieras, Google Play y App Store incluidas. Sigue siendo una licencia por producto final.
• Un SDK de juegos para otros desarrolladores. Los términos prohíben redistribuir la plantilla o su código dentro de otro producto hecho para desarrolladores. Un módulo de juegos que vendes a otros creadores de apps es justo ese tipo de producto.

Si tu app cobra por la sección de juegos o vende objetos dentro de ella, pregunta antes también. Los términos mencionan acceso gratuito y monetización por anuncios, y varias ediciones indican las compras con dinero real como no incluidas. En iOS, la pauta 3.1.1 dice que desbloquear funciones o contenido, niveles de juego incluidos, debe hacerse con compras dentro de la app.

Licencias, facturas y cotizaciones para empresas

Preguntas frecuentes sobre juegos dentro de apps

¿Se puede meter un juego HTML5 dentro de una app Android o iOS?

Sí. Carga la carpeta del juego en un WebView (WebView en Android, WKWebView en iOS), empaquetada con la app o desde tu servidor HTTPS. Activa JavaScript y el almacenamiento, y sirve los archivos desde una dirección tipo HTTPS, no desde file://.

¿Los juegos funcionan sin conexión dentro de la app?

Solo si empaquetas los archivos y la edición no pide nada a la red. Varias de nuestras ediciones traen arte, audio y fuentes en local; la página de Ricopop dice que necesita conexión. Prueba en modo avión antes de prometerlo.

¿Los jugadores pierden su progreso cuando actualizo la app?

No, si la dirección y la clave de guardado no cambian. El guardado vive en el almacenamiento del WebView para ese origen. Cambiar el esquema, el host o la clave hace que todos empiecen de cero.

¿Cuántas licencias necesito para mi app?

Una por producto final. Una app con un juego es una licencia; el mismo juego en apps de tres clientes son tres. La misma app en Google Play y en la App Store no necesita una segunda licencia: puedes publicar el juego licenciado donde quieras.

Siguiente paso

Elige un juego, prueba su demo en un celular y lee su lista "No incluido en esta edición" y el capítulo del manual sobre el guardado. Si prefieres que armemos la sección de juegos en tu app, mándanos la app, las plataformas y el juego que te gustó, y respondemos con alcance, precio y plazo.

Ver todas las plantillas de juegos

Pedir cotización para integrarlo en tu app