DEV Community

Giovani Fouz
Giovani Fouz

Posted on

🚀 WebVirt: Carga tu SPA en Android WebView con solo 3 líneas de código

#android #mobile #showdev #spanish

La primera vez que intenté cargar una SPA de React en un WebView pensé que sería trivial. No lo fue. Terminé escribiendo más de 150 líneas solo para:

  • servir archivos desde assets
  • interceptar requests manualmente
  • arreglar rutas de React Router
  • y evitar errores 404 en producción

Después de repetir ese proceso varias veces… decidí simplificarlo. Así nació WebVirt.

🎯 El problema

Cargar una SPA (React, Vue, Angular, Svelte) dentro de un WebView en Android implica:

  • WebViewAssetLoader
  • shouldInterceptRequest
  • manejo manual de rutas
  • configuración de headers y MIME types
  • cache

No es difícil… pero sí repetitivo, verboso y propenso a errores.

⚡ La solución

Con WebVirt, todo se reduce a esto:

WebVirt.with(this)
    .host("miapp.local")
    .bind(webView);
Enter fullscreen mode Exit fullscreen mode

Eso es todo.

Tu WebView ya puede cargar una SPA completa desde assets sin configuración adicional.

✨ ¿Qué hace WebVirt?

WebVirt actúa como un servidor web virtual dentro de tu APK.

Intercepta las peticiones del WebView y sirve los archivos directamente desde assets, resolviendo automáticamente los problemas más comunes.

🔁 SPA routing automático

Si usas React Router (o similar), no necesitas configuración extra.

/dashboard → WebVirt sirve index.html → tu router toma el control

💾 Caché inteligente

  • HTML → no cacheado (para reflejar cambios)
  • JS/CSS → cacheado agresivamente (tipo CDN)
  • Otros archivos → streaming directo

🔒 Seguridad básica integrada

  • Prevención de directory traversal (../)
  • Validación de rutas
  • Headers seguros por defecto

📁 MIME types listos

Soporte para HTML, JS, CSS, JSON, imágenes, fuentes, WASM y más.

🧪 Ejemplo real

Supongamos que tienes un build de React (Vite, CRA, etc.):

app/src/main/assets/
├── index.html
└── assets/
    ├── index.js
    └── index.css
Enter fullscreen mode Exit fullscreen mode

Solo haces:

webView.loadUrl("https://miapp.local/");
Enter fullscreen mode Exit fullscreen mode

¡Y listo!

✅ React Router funciona
✅ No hay 404 en rutas internas
✅ No necesitas lógica extra

🧠 ¿Cómo funciona?

A alto nivel:

WebView → intercept request → WebVirt → assets → response
Enter fullscreen mode Exit fullscreen mode
  1. Detecta si la URL pertenece a tu host virtual.
  2. Resuelve si es archivo o ruta SPA.
  3. Sirve desde memoria o desde assets.

Sin magia, solo encapsulación de lo que normalmente harías a mano.

🤔 ¿Por qué usarlo?

Porque evita repetir lo mismo en cada proyecto:

  • menos código boilerplate
  • menos errores en routing
  • mejor experiencia de desarrollo

No reemplaza las herramientas existentes,
simplemente las abstrae en una API más simple.

🚀 Uso rápido en tu MainActivity 

WebVirt.with(this)
    .host("miapp.local")
    .bind(webView);

webView.loadUrl("https://miapp.local/");
Enter fullscreen mode Exit fullscreen mode

🔮 Próximamente

  • Publicación en Maven Central / JitPack
  • Kotlin DSL
  • LRU cache configurable
  • Hooks para personalización

📦 Código y documentación

Estoy preparando el repo público con README completo y ejemplos.

Si te interesa el proyecto o quieres probarlo antes:

👉 Déjame un comentario
👉 o sígueme para actualizaciones

🎯 Conclusión

Cargar una SPA en un WebView no debería tomar 150 líneas.

Con WebVirt:

✅ es simple
✅ es rápido
✅ funciona

¿Te ha pasado lo mismo con WebView?
Me interesa saber cómo lo estás resolviendo tú 👇

Top comments (0)