DEV Community

Giovani Fouz
Giovani Fouz

Posted on

Virtual Host for Android

#webdev #android #mobile #react

Implementando el Patrón UseSpa de ASP.NET Core en Android WebView: Una Alternativa Ligera a Cordova para SPAs Offline

Cómo construí un enrutador SPA eficiente para apps React que se ejecutan completamente desde los assets de Android, sin servidor HTTP y con consumo mínimo de batería y de RAM.

El Problema: El Enrutamiento SPA se Rompe en Android WebView

Si alguna vez has intentado empaquetar una app React o Vue dentro de un WebView de Android usando file:///android_asset/index.html, te has topado con este muro:

net::ERR_FILE_NOT_FOUND
Enter fullscreen mode Exit fullscreen mode

La página de inicio carga perfectamente. Pero cuando el usuario navega a /inventario y refresca la página (o recibe un enlace profundo), el WebView intenta buscar el archivo físico /inventario dentro de la carpeta assets. No existe. La app se rompe.

Las soluciones tradicionales son pesadas:

Solución Problema
Cordova / Capacitor Levanta un servidor HTTP real en localhost. Funciona, pero consume batería y RAM.
PWA con Service Workers Requiere HTTPS e internet para la primera carga. No es verdaderamente offline-first.

Pero espera—Microsoft ya resolvió esto elegantemente en ASP.NET Core:

app.UseStaticFiles();
app.UseSpa(spa => spa.Options.DefaultPage = "/index.html");
Enter fullscreen mode Exit fullscreen mode

Este middleware sirve archivos estáticos normalmente, pero hace fallback a index.html para cualquier ruta que no tenga extensión de archivo. React Router toma el control a partir de ahí.

Entonces me pregunté: "¿Por qué Android no tiene algo así?"

La Solución: VirtualHostManager

Desarrollé una clase Java ligera que replica el comportamiento de UseSpa de ASP.NET completamente dentro de la capa de interceptación de peticiones del WebView. Sin servidor HTTP local. Sin Cordova. Android SDK puro o Java sin dependencias ni librerías externas.

El Corazón de la idea

/**
 * Determina si una ruta solicitada es una ruta de React Router.
 * Lógica: Si no tiene extensión de archivo, es una ruta SPA.
 */
private boolean isReactRouterRoute(String assetPath) {
    if (assetPath == null || assetPath.isEmpty()) return true;
    int lastDot = assetPath.lastIndexOf('.');
    return lastDot == -1; // Sin extensión = ruta SPA
}
Enter fullscreen mode Exit fullscreen mode

Esta simple validación es lo que permite que /inventario, /reportes o /configuracion no devuelvan 404, sino que entreguen index.html para que React Router maneje la navegación.

Configuración del WebView

VirtualHostManager vhm = new VirtualHostManager(this, "app.local", "www");

webView.setWebViewClient(new WebViewClient() {
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
        String url = request.getUrl().toString();
        if (vhm.shouldIntercept(url)) {
            return vhm.serveStaticAsset(url);
        }
        return super.shouldInterceptRequest(view, request);
    }
});

webView.loadUrl(vhm.getVirtualBaseUrl()); // https://app.local/
Enter fullscreen mode Exit fullscreen mode

El Código Completo (Fragmentos Clave)

  1. Interceptación y Fallback al Index 
public WebResourceResponse serveStaticAsset(String url) {
    try {
        String relativePath = urlToAssetPath(url);
        String fullAssetPath;

        // 🧠 Aquí está la innovación: detección de rutas SPA
        if (isReactRouterRoute(relativePath) || relativePath.isEmpty()) {
            fullAssetPath = indexAssetPath; // Fallback a index.html
        } else {
            fullAssetPath = assetSubfolder + relativePath;
        }

        // Servir desde assets con MIME types y headers de caché
        // ...
    } catch (IOException e) {
        return create404Response();
    }
}
Enter fullscreen mode Exit fullscreen mode
  1. Cacheo Thread-Safe de index.html 
private volatile byte[] indexHtmlCache;

// Double-checked locking para evitar bloqueos innecesarios en lecturas concurrentes
if (fullAssetPath.equals(indexAssetPath)) {
    if (indexHtmlCache == null) {
        synchronized (this) {
            if (indexHtmlCache == null) {
                indexHtmlCache = loadAssetBytes(fullAssetPath);
            }
        }
    }
    dataStream = new ByteArrayInputStream(indexHtmlCache);
}
Enter fullscreen mode Exit fullscreen mode
  1. Validación de Seguridad contra Path Traversal 
private void validatePath(String path) {
    if (path.isEmpty() || path.contains("..") || path.contains("\\") || path.startsWith("/")) {
        throw new SecurityException("Path inválido: " + path);
    }
}
Enter fullscreen mode Exit fullscreen mode
  1. Limpieza de URLs con Fragmentos y Query Params 
private String urlToAssetPath(String url) {
    String path = url.replace("https://", "").replace("http://", "")
        .replace(virtualHost + "/", "").replace(virtualHost, "");

    if (path.contains("?")) path = path.split("\\?")[0];
    if (path.contains("#")) path = path.split("#")[0];

    return path;
}
Enter fullscreen mode Exit fullscreen mode

Optimizaciones que Marcan la Diferencia

Característica Implementación Beneficio
Cacheo de index.html volatile + double-checked locking Acceso concurrente sin bloqueos
Cero sobrecarga de RAM para otros assets InputStream directo, sin byte[] Memoria mínima en dispositivos viejos
Headers de caché inmutables max-age=31536000 para assets con hash El WebView no re-descarga archivos
Protección contra Path Traversal Bloqueo de ../ y rutas absolutas Seguridad en apps offline
Soporte para subcarpetas assetSubfolder configurable Compatible con npm run build sin cambios

Comparativa: VirtualHostManager vs. Soluciones Existentes

Métrica Cordova/Capacitor WebView + file:// VirtualHostManager
Soporte SPA Routing ✅ Sí ❌ Roto ✅ Sí
Requiere Servidor HTTP ✅ Sí (localhost) ❌ No ❌ No
Consumo de Batería Alto Bajo Mínimo
Consumo de RAM ~40-60 MB ~10 MB ~8 MB
Deep Linking ✅ Sí ❌ No ✅ Sí
Hot Updates ❌ No ❌ No ✅ Sí (reemplazar assets)
Tiempo de inicio Lento (espera al servidor) Instantáneo Instantáneo

Caso de Uso Real: App de Inventarios en Cuba

Esta solución está actualmente en producción en una app de control de inventarios para pequeños negocios en Cuba, donde:

· El internet es caro e inestable.
· Los dispositivos tienen RAM y batería limitadas.
· El trabajo por turnos requiere traspaso de datos offline vía exportación de archivos.

La app funciona completamente offline, sincroniza mediante archivos exportados, y genera reportes PDF—todo desde un único WebView con persistencia de datos utilizando a IndexDB.

Código Fuente Completo
En fin quiero compartir este pensamiento:

No necesitas Cordova para tener una SPA funcional en Android. A veces, una clase Java de 150 líneas es todo lo que necesitas para que React Router funcione como si estuviera en un servidor real.

Microsoft lo hizo bien con UseSpa. Ahora Android también lo tiene, (VirtualHostManager) una clase de 150 líneas en Java.

¿Preguntas? ¿Ideas?

Déjamelas en los comentarios. Si estás construyendo algo similar para entornos offline-first en Latinoamérica, me encantaría saber de tu proyecto.

Giovani Fouz
Desarrollador de Software. No deberíamos aferrarnos a ciertas tecnologías donde radica nuestra zona de comodidad sino explorar nuevas alternativas, pero no termino sin mencionar: ¡ Wow vaya éxito el de React o Typescript o Tailwindcss ! ¡ Que grandiosas herramientas!
Cuba, 2026

Top comments (0)