v0 + navegación
Un menú hamburguesa y una cabecera web son la forma más rápida de que una app de v0 parezca un simple marcador, y eso es justo lo que los revisores evalúan según la directriz 4.2. WebViewGold añade una barra de pestañas nativa o una barra lateral en iOS y una navegación inferior o un menú lateral de Material en Android, cada uno configurado en un solo archivo, mientras tu app web sigue encargándose del enrutamiento.
Desde $109 de pago único por plataforma, o deja que nuestro equipo lo haga todo desde $698.
Las cuatro cargan una URL de tu app web en el WebView principal al tocarlas, así que tu enrutamiento no cambia en absoluto. Elige un patrón principal por plataforma.
Pon showNavFooter en true en Config.swift y describe de tres a cinco pestañas en FooterBar.json: una etiqueta (name), un SF Symbol (sf_symbol) y la URL que abre la pestaña (redirection_link), además de colour con dark o light para toda la barra.
Pon enableSidebar en true y rellena Sidebar.json con los mismos campos. Un botón flotante abre un menú deslizante nativo, muy práctico cuando tienes más secciones de las que caben en una barra de pestañas. Funciona sola o junto al pie de navegación (documentación de la barra lateral).
ENABLE_NAVIGATION_FOOTER en Config.java añade una barra de navegación inferior de Material 3. Sus entradas, iconos y etiquetas salen de res/menu/menu_drawer.xml; Google recomienda de tres a cinco destinos de primer nivel. Los modos claro y oscuro siguen automáticamente al sistema.
ENABLE_NAVIGATION_DRAWER añade un botón de menú flotante que abre un menú lateral de Material, controlado por el mismo archivo de menú. La navegación inferior y el menú lateral pueden funcionar a la vez, por ejemplo con las secciones principales abajo y los ajustes, la ayuda y las páginas legales en el menú lateral.
Pega esto en v0 para implementar la parte de la web app. Revisa el resultado, publica y luego prueba dentro de la app WebViewGold.
Esta app de Next.js con App Router va a funcionar dentro del envoltorio nativo WebViewGold, que renderiza su propia barra de pestañas. Su user agent contiene "WebViewGold". 1. En middleware.ts, usa userAgent(request) de next/server y establece el header de petición x-native-app: 1 cuando el user agent incluya "WebViewGold". 2. En app/layout.tsx, lee ese header con headers() y omite la cabecera del sitio, el menú móvil y el pie de página cuando esté presente. 3. Añade un componente de cliente BackButton a la cabecera de cada ruta de detalle (por ejemplo app/projects/[id]/page.tsx) que llame a router.back() cuando haya historial y, si no, enlace a la ruta superior. 4. Asegúrate de que la página de cuenta enlaza a la política de privacidad, los términos y la eliminación de la cuenta, ya que el pie de página está oculto en la app. 5. Devuelve las cuatro o cinco rutas de primer nivel como un array layout de FooterBar.json con name, sf_symbol y redirection_link en mi dominio de producción. No añadas una navegación inferior web.
¡Una forma estupenda de convertir tu web app en una app nativa! Entrega rápida y una manera genial de llevar tus apps a las tiendas sin tener que desarrollar una app nativa completa.
| Barra nativa (WebViewGold) | Barra de pestañas creada en la app web | Cabecera web con menú hamburguesa | |
|---|---|---|---|
| Aspecto | El del sistema: SF Symbols en iOS, Material 3 en Android | Lo que diseñes, a juego con tu marca | Un sitio web móvil |
| Dónde la cambias | FooterBar.json, Sidebar.json, menu_drawer.xml; llega con una actualización en la tienda | En tu app web, en vivo con cada despliegue | En tu app web |
| Indicador de inicio y área segura | Resuelto de forma nativa | Necesita padding con env(safe-area-inset-bottom) | A menudo queda tapada por el indicador de inicio |
| Qué hace un toque | Carga la URL de la pestaña en el WebView (una carga de página) | Cambio de ruta en el cliente; instantáneo y conserva el estado | Primero abre un menú y luego navega |
| Ideal para | De tres a cinco secciones principales estables | Secciones que cambian a menudo, badges y contadores | Solo el sitio web; ocúltala dentro de la app |
Unos 30 minutos para ambas plataformas, más una nueva compilación.
Lo habitual: Inicio, una lista principal o la búsqueda, una bandeja de entrada o una acción de crear, y Cuenta. Todo lo demás vive dentro de esas secciones. Cada destino necesita su propia URL en tu app de v0 que abra la pantalla correcta al cargarse directamente, no solo mediante clics dentro de la app.
Pon showNavFooter en true y añade una entrada por pestaña con name, sf_symbol (por ejemplo house, magnifyingglass, tray, person.crop.circle) y el redirection_link completo en tu dominio de producción. Ajusta colour a tu tema. Referencia: Documentación para iOS.
Pon ENABLE_NAVIGATION_FOOTER (barra inferior) o ENABLE_NAVIGATION_DRAWER (menú lateral) en true en Config.java, define los elementos, iconos y etiquetas en res/menu/menu_drawer.xml y asigna a cada entrada su URL como se explica en la Documentación para Android.
Define un user agent personalizado con un token como "WebViewGold" en Config.swift (useragent_iphone, useragent_ipad) y en Config.java (USER_AGENT), y deja de renderizar el menú de la cabecera web, el botón hamburguesa y las columnas de enlaces del pie de página cuando tu app de v0 lo detecte. Dos sistemas de navegación en una misma pantalla son la observación de diseño más habitual.
Los iPhone no tienen botón atrás del sistema. Las pestañas abren las secciones; las páginas a las que se llega desde ellas necesitan una flecha atrás visible en tu cabecera. Deja enableswipenavigation activado para que el gesto de deslizar desde el borde en iOS también vuelva atrás; en Android los usuarios tienen además el gesto atrás del sistema.
Toca cada pestaña justo después de abrir la app, después de iniciar sesión y cuando la sesión haya caducado. Una pestaña que redirige a la página de inicio de sesión debería devolver al usuario a esa misma pestaña después, no al panel principal.
Sustituye las URLs por las rutas de tu app de v0 en tu dominio de producción. Sidebar.json usa la misma estructura. Comprueba los nombres de los iconos en la app SF Symbols de Apple.
{
"colour": "light",
"layout": [
{ "redirection_link": "https://app.yourdomain.com/", "sf_symbol": "house", "name": "Inicio" },
{ "redirection_link": "https://app.yourdomain.com/search", "sf_symbol": "magnifyingglass", "name": "Buscar" },
{ "redirection_link": "https://app.yourdomain.com/inbox", "sf_symbol": "tray", "name": "Bandeja" },
{ "redirection_link": "https://app.yourdomain.com/account", "sf_symbol": "person.crop.circle", "name": "Cuenta" }
]
}Ninguna función concreta es obligatoria. La directriz 4.2 se pregunta si la app ofrece algo más que un sitio web reempaquetado, y la 4.0 si sigue las convenciones de diseño de iOS. Una barra de pestañas nativa es una de las señales más claras para ambas, sobre todo junto a las notificaciones push y una buena pantalla sin conexión, pero no sustituye a una app web adaptada a móviles.
En la barra nativa, no: FooterBar.json, Sidebar.json y menu_drawer.xml van dentro del build. Las páginas que hay detrás de las URLs de las pestañas se actualizan con cada despliegue. Si tus secciones cambian a menudo, crea la barra de pestañas en tu app web y muéstrala solo dentro de la app.
Sí. Cada pestaña carga su URL en el WebView, así que tu hosting debe responder a cada ruta con la app (un fallback de SPA a index.html) y tu router debe abrir la pantalla correcta en una carga directa. Compruébalo pegando la URL de una pestaña en una pestaña nueva del navegador.
Usa el pie de navegación para tres a cinco secciones principales. Añade la barra lateral de iOS o el menú lateral de Android para destinos secundarios como ajustes, ayuda y páginas legales. No repitas los mismos enlaces en ambos.
Mantenlo para el sitio web y omítelo dentro de la app con una comprobación del user agent. En la app, la barra nativa toma el relevo; un segundo icono de menú en la cabecera confunde a usuarios y revisores.
El mismo resultado, con distinta cantidad de trabajo por tu parte. Las tres incluyen la garantía de aprobación y soporte humano 24/7.
$109 por plataforma, pago único
La licencia de WebViewGold: un proyecto de Xcode o Android Studio listo para usar. Pega tu URL, define nombre e icono, activa funciones, compila y envía. Actualizaciones gratuitas para siempre.
Ver planes en la página principal$349 por licencia, complemento de pago único
Sin Mac, sin Xcode, sin Android Studio: configura en el navegador, compilamos ambas apps en la nube y las entregamos a App Store Connect y a Play Console.
Cómo funciona el Cloud Builder Prueba la demo gratuita$698 por plataforma $798
Envíanos tu URL y tu icono. Nuestro equipo configura, compila y entrega tu app en 72 horas, en marca blanca y con los proyectos fuente. Ambas plataformas por $1,158.
Detalles del Full Service Con tecnología de
Precios de la Oferta de invierno válidos hasta el 31 de diciembre de 2026.
Garantía de aprobación en App Store & Google Play – o te devolvemos el dinero en 14 días
¿Prefieres delegarlo? Full Service: configuramos, compilamos y entregamos en 72 horas, desde $698 por plataforma. ¿Preguntas? Chatea con nosotros 24/7.
Los reembolsos se conceden bajo las condiciones indicadas en nuestras FAQ: un rechazo por motivos ajenos al contenido por parte de Apple y/o Google, reclamado dentro de los 14 días posteriores a la compra.