API de CSS y JavaScript personalizados
Inyecte estilos CSS y código JavaScript personalizados en cualquier página de su aplicación Android WebView: ideal para ajustes exclusivos de la app.
WebViewGold le permite personalizar la apariencia y la funcionalidad de su app mediante CSS personalizado y JavaScript personalizado sin modificar el código nativo de la app. A continuación se explica cómo utilizar estas funciones para adaptar su app a su marca y a sus preferencias de experiencia de usuario.
Cómo dar estilo a su app Android basada en WebView con CSS personalizado:
La función de CSS personalizado le permite ajustar el aspecto y la sensación de su app sin esfuerzo:
- Añada su código CSS personalizado al archivo custom.css.
- Guarde el archivo para aplicar estos estilos a todas las páginas web cargadas por su app de WebViewGold.
Ejemplos de personalización con CSS:
- Actualizar los colores para que coincidan con su marca.
- Incorporar animaciones.
- Dar estilo a textos, botones y otros elementos.
Cómo mejorar el comportamiento de su app con JavaScript personalizado:
Con JavaScript personalizado, puede personalizar la funcionalidad de su app para los usuarios sin alterar el código remoto original de la app web:
- Añada su código JavaScript personalizado al archivo custom.js.
- Guarde el archivo para aplicar estos scripts a todas las páginas cargadas por su app.
Ejemplos de personalización con JavaScript
- Crear alertas o notificaciones.
- Añadir elementos interactivos o acciones basadas en eventos.
- Adaptar las interacciones del usuario y el comportamiento de la página.
Para una guía paso a paso, consulte el videotutorial que aparece a continuación, que muestra cómo utilizar CSS y JavaScript personalizados para transformar la estética y la interactividad de su app de Android.
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.