Capacitor

``

Recursos y documentación

Características principales

  • Multiplataforma: Compatible con iOS, Android, web y escritorio.
  • Integración con frameworks web: Funciona de forma nativa con angular, React y Vue.
  • Plugins nativos: Permite usar funcionalidades del dispositivo (cámara, geolocalización, almacenamiento, etc.) mediante plugins o creando los propios.
  • Actualizaciones sencillas: Las aplicaciones web se pueden actualizar sin pasar por la tienda de apps, manteniendo la lógica nativa intacta.
  • Interoperabilidad: Se integra fácilmente con proyectos existentes de Cordova y otros frameworks.

Instalación y configuración básica

Instalación en un proyecto Angular

npm install @capacitor/core @capacitor/cli
npx cap init [appName] [appId]

`

Añadir plataformas

npx cap add android
npx cap add ios

Sincronizar cambios del proyecto web

npx cap sync

Uso con Angular

  • Se recomienda mantener la lógica de negocio en Angular y utilizar Capacitor para funcionalidades nativas.
  • Integración con servicios y componentes Angular.
  • Ejemplo de uso de un plugin de cámara:
import { Camera, CameraResultType } from '@capacitor/camera';

async function takePhoto() {
	const photo = await Camera.getPhoto({
		quality: 90,
		resultType: CameraResultType.Uri
	});
	console.log(photo.webPath);
}

Plugins y extensiones

  • Capacitor ofrece plugins oficiales y comunidad para:
    Cámara, Geolocalización, Notificaciones, Haptics, Almacenamiento.
  • Se pueden crear plugins personalizados si se necesita acceso a APIs nativas no cubiertas.

capacitor mas conceptos

Arquitectura interna

Capacitor se basa en una WebView nativa por plataforma:

  • iOS: WKWebView
  • Android: WebView del sistema
  • Desktop: WebView integrada según runtime

La aplicación web se empaqueta y se comunica con el código nativo mediante un bridge JavaScript ↔ Nativo.

Bridge y comunicación nativa

  • El bridge permite llamar APIs nativas desde JavaScript.
  • Comunicación asincrónica basada en Promises.
  • Maneja serialización segura de datos entre capas.
  • Reduce la dependencia directa de código nativo.

Plugins

Tipos de plugins

  • Plugins oficiales: mantenidos por el equipo de Capacitor.
  • Plugins comunitarios: creados por terceros.
  • Plugins personalizados: desarrollados para necesidades específicas del proyecto.

Estructura de un plugin

  • Interfaz TypeScript.
  • Implementación nativa por plataforma (Swift/Obj-C, Kotlin/Java).
  • Registro automático mediante Capacitor.

Capacitor vs Cordova

  • Capacitor es el sucesor moderno de Cordova.
  • Ventajas clave: tab Acceso directo al proyecto nativo. tab Mejor integración con herramientas modernas. tab Arquitectura más simple y mantenible.
  • Permite reutilizar plugins Cordova existentes.

Gestión de plataformas

Estructura del proyecto

  • /android y /ios contienen proyectos nativos completos.
  • Cambios nativos se mantienen incluso tras sincronizaciones.
  • Separación clara entre frontend y nativo.

Comandos clave

npx cap open android
npx cap open ios

`

Ciclo de vida de la aplicación

  • Eventos gestionados por Capacitor: tab App activa tab App en segundo plano tab Reanudación tab Cierre
  • Acceso mediante el plugin App.

Acceso a funcionalidades del dispositivo

  • Sensores (acelerómetro, giroscopio).
  • Almacenamiento seguro y preferencias.
  • Sistema de archivos local.
  • Estado de red y batería.
  • Notificaciones push y locales.

Seguridad

  • Uso de HTTPS obligatorio en producción.
  • Control de orígenes permitidos.
  • Aislamiento del WebView.
  • Integración con mecanismos de seguridad nativos.
  • Soporte para autenticación biométrica mediante plugins.

Build y despliegue

Flujo de build

  • Build web (Angular, React, etc.).
  • Sincronización con plataformas nativas.
  • Build nativo desde Android Studio o Xcode.

Distribución

  • Google Play Store.
  • Apple App Store.
  • Distribución interna o empresarial.

Actualizaciones y mantenimiento

  • Actualización del frontend sin tocar código nativo.
  • Migraciones simples entre versiones.
  • Bajo coste de mantenimiento comparado con apps nativas puras.

Casos de uso ideales

  • Aplicaciones empresariales.
  • MVPs multiplataforma.
  • Aplicaciones web que requieren acceso nativo.
  • Proyectos que priorizan rapidez de desarrollo y reutilización de código.

Integración con ecosistema Ionic

  • Capacitor es el runtime recomendado por Ionic.
  • Compatible con Ionic UI Components.
  • No requiere usar Ionic para funcionar.

Buenas prácticas

  • Mantener el core de la app como web-first.
  • Limitar lógica nativa al mínimo necesario.
  • Versionar plugins personalizados.
  • Probar en dispositivos reales regularmente.
  • Separar claramente responsabilidades web y nativas.

Capacitor – Ejemplos de código y configuración

Inicialización del proyecto

Inicializar Capacitor

npx cap init myApp com.example.myapp

`

Estructura generada

  • capacitor.config.ts
  • android/
  • ios/
  • www/ o dist/ (build web)

Archivo de configuración

capacitor.config.ts

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
	appId: 'com.example.myapp',
	appName: 'MyApp',
	webDir: 'dist',
	bundledWebRuntime: false,
	server: {
		androidScheme: 'https'
	}
};

export default config;

Gestión de plataformas

Añadir plataformas

npx cap add android
npx cap add ios

Sincronizar cambios

npx cap sync

Abrir proyectos nativos

npx cap open android
npx cap open ios

Plugins oficiales

Cámara

import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';

const takePhoto = async () => {
	const image = await Camera.getPhoto({
		quality: 80,
		allowEditing: false,
		resultType: CameraResultType.Uri,
		source: CameraSource.Camera
	});
	console.log(image.webPath);
};

Geolocalización

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

const getPosition = async () => {
	const coordinates = await Geolocation.getCurrentPosition();
	console.log(coordinates.coords.latitude, coordinates.coords.longitude);
};

Preferencias (almacenamiento clave-valor)

import { Preferences } from '@capacitor/preferences';

await Preferences.set({
	key: 'token',
	value: 'abc123'
});

const { value } = await Preferences.get({ key: 'token' });
console.log(value);

Ciclo de vida de la aplicación

Eventos de App

import { App } from '@capacitor/app';

App.addListener('appStateChange', state => {
	console.log('Is active:', state.isActive);
});

App.addListener('backButton', () => {
	console.log('Back button pressed');
});

Estado de red

Network

import { Network } from '@capacitor/network';

const status = await Network.getStatus();
console.log(status.connected, status.connectionType);

Network.addListener('networkStatusChange', status => {
	console.log('Network status changed', status);
});

Sistema de archivos

Leer y escribir archivos

import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';

await Filesystem.writeFile({
	path: 'example.txt',
	data: 'Hola Capacitor',
	directory: Directory.Documents,
	encoding: Encoding.UTF8
});

const content = await Filesystem.readFile({
	path: 'example.txt',
	directory: Directory.Documents,
	encoding: Encoding.UTF8
});

console.log(content.data);

Notificaciones locales

Programar notificación

import { LocalNotifications } from '@capacitor/local-notifications';

await LocalNotifications.schedule({
	notifications: [
		{
			title: 'Recordatorio',
			body: 'Ejemplo con Capacitor',
			id: 1,
			schedule: { at: new Date(Date.now() + 10000) }
		}
	]
});

Permisos

Solicitar permisos

import { Camera } from '@capacitor/camera';

await Camera.requestPermissions({
	permissions: ['camera', 'photos']
});

Uso con Angular

Servicio Angular para plugins

import { Injectable } from '@angular/core';
import { Geolocation } from '@capacitor/geolocation';

@Injectable({ providedIn: 'root' })
export class LocationService {
	async getLocation() {
		return await Geolocation.getCurrentPosition();
	}
}

Plugins personalizados

Interfaz TypeScript

export interface ExamplePlugin {
	echo(options: { value: string }): Promise<{ value: string }>;
}

Uso desde la app

import { registerPlugin } from '@capacitor/core';
import type { ExamplePlugin } from './definitions';

const Example = registerPlugin<ExamplePlugin>('Example');

const result = await Example.echo({ value: 'Hola' });
console.log(result.value);

Build y despliegue

Build web

npm run build

Flujo completo

npm run build
npx cap sync
npx cap open android

Debugging

  • Android: Logcat desde Android Studio.
  • iOS: Consola de Xcode.
  • WebView: DevTools remotos.
  • Uso de console.log visible en entornos nativos.

Variables de entorno

Uso con Angular

export const environment = {
	production: true,
	apiUrl: 'https://api.example.com'
};

Buenas prácticas técnicas

  • Centralizar acceso a plugins en servicios.
  • Evitar lógica pesada en plugins nativos.
  • Probar permisos en dispositivos reales.
  • Versionar cambios nativos junto al frontend.

Recursos de Capacitor (estado 2025)

$= dv.current().file.tags.join(“ “)

📘 Documentación oficial 2025

📦 Plugins comunitarios y ecosistema

📚 Guías, talleres y contenidos de aprendizaje

🛠 Herramientas y flujos de 2025

📌 Estado del ecosistema (2025)

  • Comunidad activa y en crecimiento.
  • Plugins oficiales y comunitarios mantenidos regularmente.
  • Enfoque fuerte en:
    • Seguridad
    • Actualizaciones OTA
    • Integraciones empresariales
    • CI/CD móvil
  • Capacitor consolidado como runtime estándar para apps web → nativas.

📎 Enlaces rápidos