Cómo integrar LiveForm en un WebView para apps móviles en iOS, Android y React Native
Esta guía explica cómo integrar LiveForm como un WebView en la app móvil del cliente.Audiencia: Ingenieros móviles que integran LiveForm en una app iOS o Android existente.
LiveForm es una aplicación web basada en HTTPS. El WebView de la app debe soportar completamente las funciones modernas del navegador, permisos de cámara, selección de archivos y cookie/storage.
Plataforma
Mínimo
Recomendado
Notas
iOS
iOS 15+
iOS 16+
iOS 15+ soporta el callback de permiso de captura de medios de WKUIDelegate para restringir los permisos al host de LiveForm.
Android
Android 9, API 28+
Android 10, API 29+
Usar la versión más reciente de Android System WebView o Chrome para mayor estabilidad en selección de archivos y captura con cámara.
Android WebView
Android System WebView o Chrome actualizables
Android System WebView o Chrome más reciente
La selección de archivos, captura con cámara y el comportamiento de cookies/storage pueden verse afectados por la versión de WebView/Chrome.
React Native
react-native-webview 13.x+
Última versión estable
Las apps nativas pueden implementar la misma funcionalidad directamente usando WKWebView/Android WebView.
Alcance de las pruebas en dispositivos reales:
Verificar el flujo completo en Android 9 (API 28)+: instalación de la app, carga del WebView, selección de archivos, captura con cámara, cookie/storage.
Verificar el flujo completo en iOS 15+: selección de archivos en WKWebView, captura con cámara, cookie/storage.
La aprobación final requiere completar un envío real de LiveForm — captura con cámara, subida, envío y navegación a returnUrl/deep link.
LiveForm utiliza la cámara y la función de subida de imágenes dentro del WebView. Al ejecutar LiveForm como WebView en una app móvil, la app del cliente debe obtener los permisos de acceso a la cámara y a los archivos antes de abrir el WebView — permisos que normalmente gestiona el navegador.
Solicitar y verificar los permisos de cámara y de la biblioteca de fotos (o medios) a nivel de app antes de abrir el WebView es obligatorio. Si los permisos requeridos no están concedidos, la captura con cámara o la subida de imágenes de LiveForm puede no funcionar — no abrir el WebView en ese estado.
iOS
Android
Añadir las siguientes descripciones de uso en Info.plist:
<key>NSCameraUsageDescription</key><string>Se requiere acceso a la cámara para la captura de documentos de identidad en LiveForm.</string><key>NSPhotoLibraryUsageDescription</key><string>Se requiere acceso a la biblioteca de fotos para subir imágenes en LiveForm.</string>
Añadir los siguientes permisos en AndroidManifest.xml:
Si la subida de imágenes está soportada, también configurar los permisos de foto/medios de Android según el target SDK de la app y la implementación del selector de archivos.
Acción del usuario └─ La app del cliente inicia LiveForm └─ Construir URL de LiveForm a partir del pidAntes de abrir el WebView ├─ Verificar permiso de cámara ├─ Verificar permiso de biblioteca de fotos/medios └─ Abrir WebView a pantalla completaDentro del WebView ├─ Permitir JavaScript y DOM storage ├─ Permitir cookies ├─ Permitir reproducción de medios en línea y captura de medios ├─ Cargar URLs http/https/data/about dentro del WebView └─ Reenviar esquemas personalizados a apps externas
No abrir el WebView si la URL no es válida o las verificaciones de permisos no han finalizado.
El WebView debe permitir JavaScript, storage, cookies, reproducción de medios y captura de medios.
React Native
Android Nativo
iOS Nativo
Al usar react-native-webview, los detalles del WebChromeClient (Android) y WKUIDelegate (iOS) subyacentes son gestionados por la capa nativa de la librería. Configurar las props del WebView indicadas a continuación y verificar las listas de verificación de Android e iOS por separado en dispositivos reales.
Permite que LiveForm use el storage del navegador.
sharedCookiesEnabled / thirdPartyCookiesEnabled
Mantiene el comportamiento de cookies similar a un navegador estándar.
allowsInlineMediaPlayback
Permite que la interfaz de medios funcione dentro del WebView donde sea compatible.
mediaCapturePermissionGrantType
Habilita el manejo de permisos de captura de medios para el host de LiveForm.
setSupportMultipleWindows={false}
Mantiene los flujos de nueva ventana dentro de la ruta WebView controlada por la app.
onShouldStartLoadWithRequest
Reenvía esquemas personalizados desconocidos a apps externas para que no rompan el WebView.
En una app Android nativa, configurar WebView.settings y gestionar las solicitudes de permiso de cámara y las solicitudes de subida de archivos en WebChromeClient.
Solicitar el permiso CAMERA a nivel de app y verificar que está concedido antes de abrir el WebView.
En Android 13+, si la selección de imágenes requiere permisos, gestionar READ_MEDIA_IMAGES u otros según la implementación del selector de archivos.
En onPermissionRequest, conceder el acceso a la cámara únicamente para el host de LiveForm. No conceder permiso de cámara a todos los orígenes.
Implementar onShowFileChooser para garantizar que las subidas basadas en <input type="file"> funcionen correctamente.
En una app iOS nativa, usar WKWebView con JavaScript y reproducción de medios en línea habilitados. En iOS 15+, usar el callback de permiso de captura de medios de WKUIDelegate para restringir los permisos al host de LiveForm.
NSCameraUsageDescription y NSPhotoLibraryUsageDescription deben estar configurados.
Solicitar el permiso de cámara usando AVCaptureDevice.requestAccess(for: .video) (o equivalente) antes de abrir el WebView y verificar que está concedido.
Si se usa el flujo de subida de imágenes, verificar que la política de acceso a la Biblioteca de Fotos coincide con los requisitos de UX de la app.
Conceder el permiso de captura de medios únicamente para el host de LiveForm.
Enfoque de verificaciónLa app del cliente debe implementar su propia pantalla WebView basándose en el código de ejemplo proporcionado, y luego verificar la URL real de LiveForm y una página de prueba de permisos/funciones por separado.
Modo URL de LiveForm: Verificar el flujo de envío real en el host de producción de LiveForm.
Página de prueba de permisos/funciones: Verificar el storage/cookie, fetch, input de archivo y captura con cámara del WebView en un único flujo secuencial, independientemente del estado de LiveForm.
Pasar las pruebas de permisos/funciones confirma que el mecanismo del WebView funciona, pero no garantiza un envío exitoso de LiveForm. La aprobación final requiere pasar ambos modos.
Común (URL y Permisos)
Android
iOS WKWebView
React Native
URL y Navegación
Una URL de LiveForm en el formato https://form.argosidentity.com?pid={pid} se abre correctamente.
El pid está codificado en URL antes de ser pasado.
Los esquemas personalizados externos se abren en una app externa o fallan de forma segura.
Permisos
El permiso de cámara se verifica antes de entrar al WebView en el primer lanzamiento.
El permiso de biblioteca de fotos/medios se verifica antes de entrar al WebView en el primer lanzamiento.
Se muestra un mensaje recuperable si el permiso es denegado.
El botón “Abrir Configuración” navega a la pantalla de configuración de la app.
Comportamiento del WebView
LiveForm se carga con JavaScript habilitado.
La interfaz de cámara se abre al capturar un documento de identidad.
El selector se abre para la subida de imágenes.
Las cookies y el storage persisten durante la navegación normal del WebView.
Se muestra un estado de carga mientras la página se carga.
Se muestra un mensaje de error recuperable ante error de carga del WebView o error HTTP.
android.permission.CAMERA está declarado en AndroidManifest.xml.
El permiso de cámara en tiempo de ejecución de Android se solicita y verifica como concedido antes de abrir el WebView.
WebChromeClient.onPermissionRequest está implementado en el código WebView nativo.
WebChromeClient.onShowFileChooser está implementado en el código WebView nativo.
Android System WebView o Chrome está actualizado.
javaScriptEnabled está activo.
domStorageEnabled está activo.
Las cookies y las cookies de terceros están permitidas.
La reproducción de medios y el acceso a la cámara no están bloqueados por la política de gestos del usuario o la configuración del WebView.
ValueCallback se llama exactamente una vez para todas las rutas del selector de archivos: éxito, cancelación y fallo.
Los resultados de subida de archivos pasados como URIs content:// se gestionan correctamente.
La implementación del selector de archivos de la app no expone URIs file:// directamente.
La interfaz de selección de archivos de LiveForm permite los tipos de archivo según el atributo accept.
La interfaz de captura de LiveForm abre la ruta de cámara según el atributo capture.
Los recursos de LiveForm no están bloqueados por política HTTPS o de contenido mixto.
La navegación a returnUrl o deep link se entrega correctamente a la app externa/navegador/app del cliente.
NSCameraUsageDescription está declarado en Info.plist.
NSPhotoLibraryUsageDescription está declarado en Info.plist.
La solicitud y verificación del permiso de cámara a nivel de app funcionan correctamente antes de abrir el WebView.
La solicitud y verificación del permiso de biblioteca de fotos a nivel de app funcionan correctamente antes de abrir el WebView.
WKUIDelegate está configurado en el WKWebView nativo.
En iOS 15+, se verifica el gestor de permisos de captura de medios de WKUIDelegate.
input type="file" funciona en WKWebView.
Los archivos seleccionados o capturados se pasan correctamente de vuelta al WebView.
La interfaz de selección de archivos de LiveForm permite los tipos de archivo según el atributo accept.
La interfaz de captura de LiveForm abre la ruta de cámara según el atributo capture.
Las imágenes HEIC se gestionan correctamente por el servidor o el flujo WebView.
La ejecución de JavaScript está habilitada.
Las solicitudes de window.open o nueva ventana se gestionan sin bloqueos, según la política de la app.
La política de cookies y data store de WKWebView no bloquea el flujo de LiveForm.
Los recursos de LiveForm no están bloqueados por política HTTPS o de contenido mixto.
La navegación a returnUrl, universal link y deep link se gestiona correctamente según la política de la app.
javaScriptEnabled está activo en react-native-webview.
domStorageEnabled está activo en react-native-webview.
sharedCookiesEnabled y thirdPartyCookiesEnabled están configurados según la política de la app.
Las props del WebView relacionadas con captura de medios no bloquean el acceso a la cámara.
allowFileAccess y la selección de archivos funcionan tanto en Android como en iOS.
La API de permisos de Expo/RN devuelve correctamente el estado de los permisos de cámara y biblioteca de fotos/medios.
La combinación de onShouldStartLoadWithRequest, onOpenWindow y Linking.openURL gestiona returnUrl/deep links de forma segura.
onError y onHttpError proporcionan orientación recuperable y un reporte de diagnóstico.