De web a aplicación de escritorio: cuándo elegir PWA, WebView2, Electron o React Native

«Queremos nuestra web en el escritorio» puede significar cuatro encargos distintos. Una biblioteca quiere que el usuario abra su catálogo desde el menú de inicio. Un taller necesita usar un lector conectado al PC. Un editor quiere gestionar documentos locales en Windows, macOS y Linux. Otro equipo desea una interfaz nativa con controles propios del sistema. Todos podrían acabar con un icono parecido; la tecnología, los permisos y el mantenimiento no serían los mismos. Para elegir entre una PWA, WebView2, Electron y React Native conviene identificar antes qué tarea no puede resolver bien la web actual.

Una PWA conserva la web y su origen

Una aplicación web progresiva (PWA) puede iniciarse en una ventana propia y ser instalable desde navegadores compatibles. El manifiesto comunica información como nombre, iconos, URL de inicio y modo de presentación. El acceso público de una aplicación instalable se sirve por HTTPS; para desarrollo existen excepciones locales. En Edge no es necesario incorporar un service worker para instalarla. El funcionamiento sin conexión, en cambio, requiere diseñar qué recursos y datos estarán disponibles y cómo se actualizarán. Instalar un icono y almacenar un catálogo son dos trabajos distintos.

Imaginemos el catálogo de una biblioteca. Si sus lectores solo necesitan entrar rápidamente a una búsqueda en línea, la PWA puede aprovechar casi toda la web ya existente. Si tienen que consultar fichas sin cobertura en una visita escolar, hay que decidir qué fichas se guardan, cuándo caducan y qué mensaje se mostrará si una edición es más reciente. Guardar en caché el HTML de la portada no hace que una consulta dinámica al servidor funcione en un tren. La guía de instalación de MDN también distingue requisitos del navegador y funciones adicionales, que no son idénticas en todos los sistemas.

Las prestaciones de acceso a archivos, notificaciones o hardware dependen de las APIs y permisos implementados en cada entorno. Si una función esencial existe en un navegador objetivo pero no en otro, la aplicación necesita una alternativa o debe declarar ese requisito. No basta con citar una prueba hecha en el portátil del desarrollador. Conviene ensayar instalación, inicio y recuperación tras pérdida de conexión en el navegador y sistema que realmente usará el público. El servicio web puede seguir accesible por URL a quien no desee instalar nada.

WebView2: una ventana web dentro de una aplicación Windows

WebView2 permite incorporar contenido HTML, CSS y JavaScript a una aplicación anfitriona. El componente no es por sí mismo un instalador completo ni un permiso para acceder al disco. El equipo desarrolla el anfitrión, define qué llamadas locales están disponibles y empaqueta la aplicación para sus usuarios. En Windows hay dos decisiones sobre el runtime: Evergreen utiliza una versión compartida que Microsoft actualiza; Fixed Version permite distribuir una versión fijada, cuya sustitución y mantenimiento asume quien publica el producto. Conviene comprobar que el runtime necesario esté presente en un equipo limpio.

Para el taller con lector conectado al PC, la ventaja sería poder conservar una interfaz web y añadir una operación de escritorio precisa. La página podría solicitar «leer el identificador del dispositivo autorizado» mediante un mensaje bien definido; el anfitrión decide qué origen puede enviarlo y qué valores acepta. Sería mucho más peligroso exponer una función genérica que ejecute cualquier comando recibido de una página. Microsoft pide verificar el origen, validar los mensajes y restringir las funciones expuestas. Si la vista navega accidentalmente a otro dominio, esa nueva página no debe heredar acceso al lector o a archivos locales.

Una comparación de costes debe incluir qué pasa cuando el runtime cambia. Evergreen facilita incorporar actualizaciones del motor sin publicar de nuevo todo el producto, pero el equipo debe probar su aplicación con las actualizaciones. Fijar la versión puede ser útil cuando se requiere una validación controlada; también obliga a distribuir las correcciones a tiempo. Ninguno de los dos modelos elimina el trabajo de actualizar el anfitrión, sus bibliotecas o su código. Si mañana el taller necesita macOS o Linux, WebView2 en esta arquitectura Windows no aporta por sí solo la nueva plataforma: hay que presupuestar otra implementación o revisar la decisión inicial.

Electron: escritorio multiplataforma con motor distribuido por la aplicación

Electron permite construir la interfaz con tecnologías web y distribuir Chromium y Node.js junto con la aplicación. El modelo de procesos distingue el proceso principal, que controla funciones de escritorio, de los procesos que dibujan ventanas. Un script de preload puede exponer operaciones limitadas al contenido de la ventana. De nuevo, esa separación no es un adorno: sirve para que un documento remoto o un error de interfaz no tengan acceso libre a archivos, procesos o a toda la sesión del usuario.

Un editor de documentos puede beneficiarse si necesita abrir archivos locales, trabajar con ventanas y distribuir versiones para varios sistemas sin reconstruir toda la interfaz en cada uno. Pero el equipo pasa a mantener las versiones de Electron y sus dependencias, el empaquetado por plataforma, la firma que requiera la distribución elegida y el mecanismo de actualización. La documentación oficial de seguridad recomienda mantener Electron actualizado, aislar contextos, limitar mensajes entre procesos y evitar la integración de Node en contenido remoto. Empaquetar una URL externa con más privilegios que en el navegador puede empeorar el producto aunque el icono funcione.

Electron no permite inferir de antemano el tamaño exacto del instalador, la memoria en uso o la velocidad de inicio de una aplicación concreta. El motor distribuido y los procesos forman parte del coste, pero también importan las bibliotecas, la cantidad de ventanas, el contenido y el empaquetado. La prueba útil es medir un prototipo con el documento y la operación representativos en el equipo objetivo. Comparar el instalador vacío de un proyecto con otro que ya incluye indexación, almacenamiento y corrector ortográfico no aislaría el coste de la arquitectura.

React Native: compartir lógica no equivale a conservar el HTML

React Native usa componentes nativos y puede compartir lógica escrita en JavaScript o TypeScript. React Native Windows y React Native macOS son plataformas específicas con sus propias herramientas. Las guías de Windows y macOS describen cómo construir para cada destino. No se obtiene una aplicación nativa cambiando la extensión de una página HTML. Una biblioteca que use el DOM, hojas CSS del navegador o un componente diseñado solo para la web puede requerir adaptación o sustitución.

Para un equipo que trabaja con React en la web, sí puede haber reutilización valiosa: validación de datos, llamadas a servicios o reglas de negocio que no dependan del navegador. Para saber cuánto se comparte, toma una pantalla concreta y clasifica sus dependencias. Un formulario con validación pura puede compartir reglas; un editor cuyo comportamiento depende de selección, portapapeles y eventos DOM requerirá una evaluación diferente. Comprueba además que cada módulo imprescindible soporte exactamente la plataforma y la versión del proyecto. Que una biblioteca funcione en Android o iOS no prueba que esté soportada en Windows o macOS.

Cuatro encargos, cuatro pruebas de aceptación

La tabla propone puntos de partida, no una clasificación absoluta. Una PWA también puede trabajar con archivos mediante APIs disponibles; una aplicación nativa puede incorporar una vista web; un editor basado en Electron puede conservar una versión web con menos funciones. Lo decisivo es si el requisito indispensable se cumple sin otorgar privilegios ajenos a ese requisito y si el equipo puede mantenerlo tras el lanzamiento. Si dos opciones funcionan, el coste de verificar actualizaciones y asistir a los usuarios puede pesar más que la apariencia de la primera demostración.

Qué comprobar antes de presupuestar meses de desarrollo

Escribe una secuencia que empiece con un equipo sin la aplicación. ¿Cómo se instala, quién puede autorizarla y qué conexión se necesita? Continúa con la tarea principal, corta la red cuando corresponda, introduce un error previsible y comprueba cómo se recupera el trabajo. Después cambia de versión sin perder los datos. Por último, prueba navegación con teclado, lectores de pantalla y escala de texto. La guía de Gaia sobre accesibilidad web recoge controles que siguen importando dentro de una ventana de escritorio. Necesitar una operación nativa no elimina las obligaciones de la interfaz reutilizada.

Una prueba de actualización vale más que un icono nuevo

Supongamos que el catálogo instalable guarda una ficha mientras se actualiza la web. Si la nueva versión cambia la forma de interpretar los datos guardados, el primer inicio sin conexión puede abrir una interfaz que ya no los entiende. Esto no es una objeción particular a las PWA: la misma dificultad aparece cuando un editor de escritorio cambia el formato de un documento o una aplicación nativa migra su base local. La prueba útil abre una ficha o documento creado con la versión anterior, comprueba qué ocurre al actualizar y verifica que una interrupción no deja el trabajo ilegible. No hay que esperar a conocer la arquitectura definitiva para formular esta condición.

Para el taller, la actualización crítica quizá sea la del ordenador administrado por otra organización. Un instalador que funciona con la cuenta del desarrollador puede fallar bajo políticas que impiden instalar componentes o acceder a un puerto. Anota las políticas reales y acuerda quién instala el runtime, quién publica una versión firmada, quién responde tras un fallo y cómo se distribuye una corrección. Estas decisiones forman parte del presupuesto aunque no ocupen espacio en la pantalla. Si el equipo no puede asumir actualizaciones empaquetadas en varios sistemas, una solución técnicamente capaz puede ser una mala elección operativa.

El resultado debería documentar qué se comprobó y en qué equipo, sin convertir una prueba exitosa en una promesa de cobertura universal. Si el equipo aún no ha medido consumo de memoria, coste del soporte, funcionamiento sin red o acceso al dispositivo, debe dejarlo abierto. Un encargo bien definido termina con una frase que se puede verificar: «El catálogo abre sin red las fichas descargadas», o «El lector funciona solo desde la pantalla autorizada». «La web ahora es una app» no informa de ninguna de esas capacidades.

Fuentes y agradecimientos

Agradecemos a Microsoft la documentación de PWA y WebView2, a Electron sus recomendaciones de seguridad y a los equipos de React Native Windows y macOS sus guías de plataforma. Los encargos y diagramas son ejemplos editoriales; no se presentan como pruebas de rendimiento realizadas por Gaia.