API de interfaz dinámica

Cambie elementos de la interfaz nativa, como el color de la barra de estado, de forma dinámica desde su aplicación web en Android.

WebViewGold le permite personalizar dinámicamente los elementos de la interfaz de su app web. Estos elementos pueden ser la barra de estado, la barra inferior (iOS), la barra de navegación (Android) y el «deslizar para actualizar» (iOS). WebViewGold incluye los siguientes comandos para personalizar dinámicamente estos elementos:

statusbarcolor://
- El COMANDO PRINCIPAL para cambiar el color de la barra de estado y de cualquier otro elemento relevante de la interfaz de forma automática, como el color del texto de la barra de estado, el color de la barra inferior (iOS), el color de la barra de navegación (Android), etc.
statusbartextcolor://
- Le permite cambiar manualmente el color del texto de la barra de estado (iOS y Android).
bottombarcolor://
- Si existe un elemento de barra inferior (iOS) o de barra de navegación (Android), le permite cambiar su color manualmente.
navbartextcolor://
- Le permite cambiar manualmente el color del texto de la barra de navegación en Android. La petición se ignorará en iOS (la barra inferior de iOS no tiene texto).
hidebars://
- Le permite ocultar el fondo de la barra de estado y de navegación.

Cambiar el color de la barra de estado (y de otros elementos de la interfaz automáticamente):

Esta función admite una entrada de color en el siguiente formato:

RGB = {rojo, verde, azul}

Donde los valores son números enteros entre 0 (mín.) y 255 (máx.).

Utilice JavaScript con este tipo de URL para cambiar el color de la barra de estado:

<script>
// Example: red
window.location.href = "statusbarcolor://255,0,0";
</script>

Cuando cambia el color de la barra de estado, el texto de la barra de estado cambiará automáticamente a un color adecuado (blanco o negro) según lo oscuro que sea el color.
Los elementos opcionales de la interfaz como Pull To Refresh (iOS), la barra inferior (iOS) y la barra de navegación (Android) también ajustarán sus colores automáticamente.

Cambiar el color del texto de la barra de estado:

Si desea elegir manualmente el color del texto de la barra de estado, puede hacerlo con esta opción.
Esta función admite una entrada de texto para las siguientes opciones:

"white"
"black"

Utilice JavaScript con este tipo de URL para cambiar el color del texto de la barra de estado:

<script>
// Example: white text
window.location.href = "statusbartextcolor://white";
// Example: black text
window.location.href = "statusbartextcolor://black";
</script>

Cambiar el color de la barra de navegación:

Esta función admite una entrada de color en el siguiente formato:

RGB = {rojo, verde, azul}

Donde los valores son números enteros entre 0 (mín.) y 255 (máx.).

Utilice JavaScript con este tipo de URL para cambiar el color de la barra de estado:

<script>
// Example: red
window.location.href = "bottombarcolor://255,0,0";
</script>

Cambiar el color del texto de la barra de navegación:

Si desea elegir manualmente el color del texto de la barra de navegación, puede hacerlo con esta opción. Tenga en cuenta que esta petición se ignorará en iOS.
Esta función admite una entrada de texto para las siguientes opciones:

"white"
"black"

Utilice JavaScript con este tipo de URL para cambiar el color del texto de la barra de estado:

<script>
// Example: white text
window.location.href = "navbartextcolor://white";
// Example: black text
window.location.href = "navbartextcolor://black";
</script>

Ocultar la barra de estado y la barra inferior

La funcionalidad hidebars puede estar on u off.
Tenga en cuenta que el texto de la barra de estado, como la hora y el porcentaje de batería, no permanece visible para el usuario. Sin embargo, se pueden volver a mostrar con un deslizamiento del usuario desde la parte superior.
Utilice JavaScript para cambiar el estado de visibilidad de la barra de estado y de navegación:

<script>
// Example: hide the bars from view
window.location.href = "hidebars://on";
// Example: redisplay the bars after being hidden
window.location.href = "hidebars://off";
</script>

Notas de implementación estilo SDK

Trate esta función como una capacidad nativa expuesta a su capa web: mantenga su sitio web de producción o PWA como fuente de verdad y, a continuación, utilice los indicadores de configuración de WebViewGold, los comandos de URL y las llamadas del puente de JavaScript documentados para activar el comportamiento nativo de Android solo donde aporte valor. Este enfoque mantiene su código fácil de mantener, porque la misma aplicación web puede servir a los navegadores, a WebViewGold para Android y a las demás plataformas de WebViewGold con una lógica condicional mínima.

Para obtener resultados fiables, opte por puntos de conexión HTTPS, nombres de ruta estables, estados de éxito/error explícitos en su interfaz y pequeñas funciones auxiliares de JavaScript que envuelvan las llamadas nativas. Por ejemplo, una aplicación web creada con jQuery Mobile, Lovable, Base44, Bolt, WordPress, Bubble, una pila propia de React/Vue/Angular o HTML estático puede exponer un único botón o controlador de eventos que active la API nativa de WebViewGold y, aun así, muestre una alternativa elegante en el navegador.

Patrón de integración recomendado: detecte el contexto de la app, llame a la API de WebViewGold y luego actualice su interfaz web tras la devolución de llamada nativa o el cambio de ruta.
Lista de comprobación de pruebas: valide la función en un dispositivo real o en una compilación empaquetada, verifique los permisos y el texto de revisión de la tienda, y confirme que los usuarios que solo usan el navegador siguen recibiendo una alternativa útil.
Ventaja para el SEO: mantenga las páginas de funciones, los títulos de ruta y el contenido estructurado indexables en su sitio web, mientras WebViewGold ofrece la carcasa nativa de la app para los usuarios de Android.