Las tecnologías web modernas permiten que las aplicaciones funcionen no solo en un navegador, sino también como aplicaciones móviles reales. Con CapacitorJS, una aplicación desarrollada con React, Vue, Angular o JavaScript puede convertirse en una aplicación para Android y iOS y publicarse en Google Play Store y Apple App Store.

El punto más importante es el siguiente:

Capacitor no obliga a reescribir tu aplicación web como una aplicación nativa desde cero. En su lugar, permite ejecutar tu aplicación web existente dentro de un entorno móvil nativo y acceder a las funciones nativas del dispositivo.

1. ¿Para qué sirve CapacitorJS?

Supongamos que ya tienes una aplicación React:

React
HTML
CSS
JavaScript
API
IndexedDB

Normalmente esta aplicación funciona dentro de un navegador.

Con Capacitor, la arquitectura pasa a ser:

                    Aplicación Web React
                            │
                            ▼
                         Capacitor
                       /          \
                      /            \
                     ▼              ▼
                Android            iOS

La aplicación web continúa funcionando en la web y, al mismo tiempo, la misma base de código puede utilizarse para crear aplicaciones Android e iOS.

2. Capacitor no es un framework de interfaz

No hay que pensar en Capacitor como otro framework de UI similar a React Native.

Su función es diferente.

React
    ↓
Construye la interfaz de usuario

Capacitor
    ↓
Ejecuta la aplicación web en un entorno nativo
    ↓
Proporciona acceso a APIs nativas

React sigue siendo React.

Vue sigue siendo Vue.

Capacitor se añade sobre la aplicación web existente.

Tampoco es obligatorio utilizar Ionic. Capacitor puede utilizarse de forma independiente con frameworks web modernos.

3. ¿Cómo funciona Capacitor?

La forma más sencilla de entender Capacitor es comprender el concepto de WebView.

Una aplicación móvil contiene una WebView dentro de la cual se ejecuta la aplicación web.

┌─────────────────────────────┐
│        Android / iOS        │
│                             │
│   ┌─────────────────────┐   │
│   │       WebView       │   │
│   │                     │   │
│   │      React App      │   │
│   │                     │   │
│   │   HTML / CSS / JS   │   │
│   └──────────┬──────────┘   │
│              │              │
│          Capacitor           │
│              │              │
│   ┌──────────▼──────────┐   │
│   │     APIs nativas    │   │
│   │                     │   │
│   │ Cámara              │   │
│   │ GPS                 │   │
│   │ Notificaciones      │   │
│   │ Archivos            │   │
│   │ Hápticos            │   │
│   │ Red                 │   │
│   └─────────────────────┘   │
└─────────────────────────────┘

Tu aplicación React se ejecuta dentro de la WebView.

Capacitor funciona como puente entre la WebView y el sistema operativo.

4. ¿Por qué se considera una aplicación nativa?

Porque no se trata simplemente de abrir tu sitio web dentro de un navegador.

Por ejemplo, tu aplicación React puede ejecutar:

Camera.getPhoto()

Capacitor puede comunicar esta llamada con las APIs nativas de cámara de Android o iOS.

De esta forma, JavaScript puede utilizar una interfaz común mientras Capacitor se encarga de las diferencias específicas de cada plataforma.

5. ¿Qué son los plugins de Capacitor?

Los plugins son una de las características más importantes de Capacitor.

Se pueden considerar:

un puente entre JavaScript y las funciones nativas del dispositivo.

Por ejemplo:

• Cámara

• Sistema de archivos

• Geolocalización

• Notificaciones

• Red

• Hápticos

• Preferencias

• Push Notifications

• Compartir

• Información del dispositivo

• Orientación de pantalla

Ejemplo:

import { Haptics, ImpactStyle } from '@capacitor/haptics';

await Haptics.impact({
    style: ImpactStyle.Medium
});

De esta forma, el código JavaScript puede activar una función nativa sin tener que implementar directamente las APIs de Android e iOS.

6. ¿Se puede utilizar la cámara?

Sí.

Puedes permitir que el usuario:

• tome una fotografía;

• seleccione una imagen de la galería;

• suba una foto de perfil;

• capture imágenes de documentos.

Por ejemplo:

Foto de perfil
      │
      ▼
    Cámara
      │
      ▼
     Foto
      │
      ▼
    React
      │
      ▼
     API

7. ¿Se puede utilizar el GPS?

Sí.

Por ejemplo:

import { Geolocation } from '@capacitor/geolocation';

const position =
    await Geolocation.getCurrentPosition();

Esto permite que tu aplicación acceda a los servicios de ubicación de Android e iOS mediante Capacitor.

8. ¿Se pueden enviar notificaciones?

Sí.

Capacitor permite utilizar tanto notificaciones locales como Push Notifications.

Por ejemplo, una aplicación de planificación puede enviar al teléfono:

"No olvides hacer tus deberes de matemáticas."

Esta es una ventaja importante frente a un sitio web tradicional.

9. ¿Puede funcionar sin conexión a Internet?

Sí.

Pero hay una diferencia importante:

Capacitor no crea automáticamente un sistema Offline.

Puedes utilizar tecnologías como:

Web
 ↓
IndexedDB

Mobile
 ↓
SQLite

Y posteriormente crear un sistema de sincronización:

Base de datos local
        ↓
Motor de sincronización
        ↓
API
        ↓
Base de datos del servidor

Esta arquitectura es especialmente útil para aplicaciones Planner, Todo, educación y productividad.

10. ¿Web y móvil pueden utilizar el mismo código?

En gran medida, sí.

Un proyecto React puede tener una estructura como:

src/
├── components/
├── pages/
├── services/
├── hooks/
├── api/
└── utils/

Gran parte de este código puede compartirse entre:

Web
Android
iOS

Cuando sea necesario, también se puede implementar código específico para cada plataforma.

11. ¿Se puede añadir Capacitor a un proyecto React existente?

Sí.

Esta es una de las mayores ventajas de Capacitor.

Puedes añadir Capacitor a una aplicación React existente sin tener que reconstruirla completamente desde cero.

Instalación básica:

npm install @capacitor/core @capacitor/cli

Después:

npx cap init

Para Android:

npm install @capacitor/android
npx cap add android

Para iOS:

npm install @capacitor/ios
npx cap add ios

Tu aplicación React existente continúa siendo el núcleo del proyecto.

12. ¿Cómo funciona el proceso de Build?

Primero se genera la aplicación React:

npm run build

Después, Capacitor sincroniza los archivos web generados con los proyectos nativos.

Código React
     │
     ▼
npm run build
     │
     ▼
Build Web
     │
     ▼
Capacitor
     │
     ├───────────────┐
     ▼               ▼
 Android            iOS

El proyecto Android puede abrirse con Android Studio y el proyecto iOS con Xcode.

13. ¿Se pueden crear APK y AAB?

Sí.

Capacitor crea un proyecto Android real.

Desde Android Studio puedes generar:

APK

o el formato utilizado para Google Play:

AAB

Después puedes publicar la aplicación en Google Play.

14. ¿Qué ocurre con iOS?

Capacitor crea un proyecto iOS real que puede abrirse con Xcode.

El proceso general es:

React
  ↓
Capacitor
  ↓
Xcode
  ↓
Aplicación iOS
  ↓
App Store

Después se utiliza el proceso habitual de Apple para probar, firmar y publicar la aplicación.

15. ¿Capacitor e Ionic son lo mismo?

No.

Ionic es principalmente un framework de interfaz de usuario y un sistema de componentes.

Capacitor es un Native Runtime.

Puedes utilizar:

React
   +
Ionic
   +
Capacitor

pero también:

React
   +
Capacitor

sin utilizar Ionic.

16. ¿Capacitor o React Native?

La principal diferencia está en cómo se construye y representa la interfaz.

Capacitor

React
  ↓
HTML
CSS
JavaScript
  ↓
WebView
  ↓
APIs nativas

React Native

React
  ↓
React Native
  ↓
Componentes UI nativos
  ↓
iOS / Android

Con Capacitor puedes conservar gran parte de la interfaz de tu aplicación web existente.

Con React Native, la interfaz se construye utilizando componentes de React Native.

Por eso, si ya tienes una aplicación React web grande, Capacitor puede reducir considerablemente el trabajo de desarrollo necesario.

17. ¿Qué ocurre con Google Login y OAuth?

Gran parte de la arquitectura de autenticación puede mantenerse compartida, aunque las plataformas móviles requieren configuración adicional.

En la web:

Web
 ↓
Google OAuth
 ↓
Backend

En móviles pueden ser necesarios Native OAuth Flows, Deep Links, Universal Links o App Links dependiendo de la arquitectura.

Capacitor no resuelve automáticamente todos los problemas de configuración de OAuth.

Sin embargo, la lógica principal de autenticación y el Backend pueden permanecer en gran medida compartidos.

18. ¿Se puede escribir código nativo con Capacitor?

Sí.

Si ningún plugin existente proporciona la funcionalidad que necesitas, puedes crear tu propio plugin de Capacitor.

Android:

React
  ↓
Plugin Capacitor personalizado
  ↓
Kotlin / Java
  ↓
API nativa de Android

iOS:

React
  ↓
Plugin Capacitor personalizado
  ↓
Swift
  ↓
API nativa de iOS

Por lo tanto, no estás limitado a las funciones proporcionadas por los plugins existentes.

19. ¿Cuáles son las desventajas?

Capacitor también tiene algunas limitaciones.

Dependencia de WebView

La interfaz funciona dentro de una WebView. Algunas interfaces nativas muy especializadas pueden no sentirse exactamente igual que en una aplicación completamente nativa.

Necesidad de plugins

Para determinadas funciones avanzadas del dispositivo puede ser necesario utilizar un plugin existente o crear uno propio.

Diferencias entre plataformas

Android e iOS presentan diferencias en aspectos como:

• Permisos

• Notificaciones

• Tareas en segundo plano

• OAuth

• Sistema de archivos

• Bluetooth

Estas diferencias deben gestionarse cuando sea necesario.

Aplicaciones gráficamente pesadas

Los juegos 3D, aplicaciones con gráficos muy exigentes o experiencias que requieren FPS extremadamente altos pueden ser más adecuadas para tecnologías nativas o motores especializados.

20. ¿Para quién es ideal Capacitor?

Capacitor es especialmente adecuado para:

• desarrolladores React;

• desarrolladores Vue;

• desarrolladores Angular;

• desarrolladores JavaScript;

• equipos que ya tienen aplicaciones web;

• aplicaciones SaaS;

• aplicaciones Planner;

• aplicaciones de productividad;

• aplicaciones de comercio electrónico;

• aplicaciones basadas en API;

• aplicaciones Offline-first.

Su mayor ventaja aparece cuando ya existe una aplicación web funcional.

21. Ejemplo de una arquitectura real

Imaginemos una aplicación Planner:

                    PLANNER
                       │
              ┌────────┴────────┐
              │                 │
             Web              Mobile
              │                 │
           React             React
              │                 │
              │             Capacitor
              │              /      \
              │             /        \
              ▼            ▼          ▼
           Browser      Android      iOS
              │
              └──────────┬──────────┘
                         │
                        API
                         │
                    Laravel
                         │
                    PostgreSQL

Para los datos offline:

Web
 ↓
IndexedDB

Mobile
 ↓
SQLite

La sincronización puede diseñarse así:

Base de datos local
        ↓
Motor de sincronización
        ↓
API
        ↓
Base de datos del servidor

Esta arquitectura es especialmente útil cuando Web y Mobile son partes del mismo producto.

22. La definición más sencilla de Capacitor

En una sola frase:

Capacitor es un Native Runtime que permite ejecutar aplicaciones web desarrolladas con tecnologías como React, Vue o Angular en Android e iOS y acceder a las funciones nativas del dispositivo mediante JavaScript.

En términos más sencillos:

Tienes una aplicación React
        ↓
Añades Capacitor
        ↓
Creas los proyectos Android + iOS
        ↓
Tu aplicación web funciona en el móvil
        ↓
Los plugins proporcionan acceso a funciones del dispositivo
        ↓
Generas las aplicaciones Android e iOS

Conclusión

La principal fortaleza de Capacitor es:

Permitir que los desarrolladores web entren en el mundo de las aplicaciones móviles nativas con la menor cantidad posible de código reescrito.

Si estás desarrollando una aplicación extremadamente nativa y con gráficos muy exigentes exclusivamente para iOS y Android, React Native o el desarrollo nativo pueden ser opciones más adecuadas.

Sin embargo, si ya tienes una aplicación React/web potente y quieres ofrecer:

• Web/PWA

• Android

• iOS

• funcionamiento offline

• cámara y GPS

• notificaciones

• funciones nativas del dispositivo

• publicación en App Store

• publicación en Google Play

utilizando una base de código ampliamente compartida, Capacitor puede ser una solución excelente.

Su mayor ventaja para una aplicación React existente es muy sencilla:

No necesitas reconstruir toda la aplicación móvil desde cero.