Modificar el tamaño de la Safe Area
Ajuste la safe area y active la barra inferior personalizada para que su aplicación web se vea perfecta en los iPhone con barra de inicio.
El salto del iPhone 8 al iPhone X y modelos posteriores cambió mucho la interfaz de usuario en el sector móvil al eliminar el botón de inicio e introducir la barra de inicio. Según el diseño de su aplicación web, la barra de menú inferior puede quedar mal posicionada en los dispositivos (solapándose con el contenido) que tienen la barra de inicio, debido al cambio en el área segura predeterminada.
La buena noticia es que WebViewGold cuenta con una función que le permite activar una bottombar y elegir su color para que coincida con el tema de su aplicación. Dado que el problema de que la barra de inicio se solape con el contenido de la aplicación puede no aparecer en los iPad (debido a la pantalla más grande y a un posible diseño diferente), también existe una opción para deshabilitar la función en los iPad.
Para implementar esta función, utilice las siguientes variables en Config.swift bajo el encabezado "Custom Bottom Bar Design". Asegúrese de establecer bottombar en true.
Avanzado: En lugar de usar la función bottombar, puede buscar esta parte del fragmento de código (pulse CMD+F y luego introduzca "switch UIDevice.current.userInterfaceIdiom") en el archivo WebViewController.swift, donde puede cambiar el valor del borde 20 por cualquier valor que desee, como 10, 30, etc., como se muestra a continuación:
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 iOS 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 iOS 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 iOS.