Capacitor: tiempo de ejecución nativo multiplataforma para aplicaciones web

Capacitor es un tiempo de ejecución nativo multiplataforma que facilita la creación de aplicaciones web que se
ejecutan de forma nativa en iOS, Android y la web. Representando la próxima evolución de las aplicaciones híbridas,
proporciona un enfoque de contenedor nativo moderno para los equipos que desean crear aplicaciones web con
acceso completo a los SDK nativos cuando lo necesitan.

Introducción

Capacitor proporciona un conjunto de API coherente y centrado en la web que permite que una aplicación se
mantenga lo más cerca posible de los estándares web, al mismo tiempo que accede a funciones ricas de
dispositivos nativos en plataformas que las admiten. Agregar funcionalidad nativa es fácil con una API de
complemento simple para Swift en iOS, Java en Android y JavaScript para la web.

Capacitor es un sucesor espiritual de Apache Cordova y Adobe PhoneGap, inspirado en otras populares herramientas
multiplataforma como React Native y Turbolinks, pero enfocado completamente en permitir que las aplicaciones
web modernas se ejecuten en todas las plataformas principales con facilidad. Capacitor es compatible con versiones
anteriores de muchos complementos de Cordova existentes.

Empezar

¡Comenzar con Capacitor es fácil! Capacitor se puede colocar en cualquier proyecto de JavaScript moderno existente,
o se puede crear un nuevo proyecto de Capacitor desde cero.

Siga la guía de instalación para comenzar a crear su aplicación.

Dependencias requeridas por el capacitor

Capacitor tiene una serie de dependencias según las plataformas a las que se dirige y los sistemas operativos en los
que está desarrollando.

Requerimientos

Los requisitos básicos son Node v8.6.0 o posterior, y NPM versión 5.6.0 o posterior (que generalmente se instala
automáticamente con la versión requerida de Node).

El condensador también admite hilo.

Para plataformas específicas, siga cada guía a continuación para asegurarse de tener instaladas las dependencias
correctas.

Desarrollo iOS

Para crear aplicaciones iOS, Capacitor requiere una Mac con Xcode 11 o superior. O puede usar Ionic Appflow para
compilar para iOS incluso si está en Windows.

Además, deberá instalar CocoaPods (sudo gem install cocoapods) e instalar las herramientas de la línea de comandos
de Xcode (ya sea desde Xcode o ejecutando xcode-select --install).

Como regla general, la última versión de Capacitor siempre admite al menos las dos últimas versiones de iOS.

Capacitor 2.0 es compatible con iOS 11+.

Capacitor usa WKWebView.

Desarrollo de Android

El desarrollo de Android requiere el SDK de Android instalado con Android Studio. Técnicamente, no se requiere
Android Studio, ya que puede crear y ejecutar aplicaciones utilizando solo las herramientas CLI de Android, pero hará
que la creación y ejecución de su aplicación sea mucho más fácil, por lo que recomendamos encarecidamente su uso.

El soporte de la versión de Android para Capacitor es más complejo que el de iOS. Actualmente, nuestro objetivo es
el nivel de API 21 o superior, es decir, Android 5.0 (Lollipop) o superior. Esto representa más del 90% del mercado de
Android.

Además, Capacitor requiere un WebView de Android con Chrome versión 50 o posterior. En Android 5 y 6, el
capacitor usa System WebView. En Android 7+, se utiliza Google Chrome.

Instalación de capacitor

Hay dos formas de comenzar a usar Capacitor: agregar Capacitor a un proyecto de frontend existente (recomendado)
o comenzar un proyecto nuevo. Capacitor fue diseñado principalmente para incorporarse a proyectos frontend
existentes, pero viene con una estructura de proyecto inicial simple si desea comenzar de nuevo.

Capacitor proporciona un tiempo de ejecución móvil nativo y una capa de API para aplicaciones web. No viene con
ningún conjunto específico de controles de IU que probablemente necesitará a menos que esté creando un juego o
algo similar.

Recomendamos encarecidamente comenzar un proyecto de Capacitor con el marco de interfaz móvil de su elección
(como Ionic Framework).

Antes de empezar

Asegúrese de tener instaladas todas las dependencias necesarias para las plataformas para las que va a crear. Más
importante aún, asegúrese de actualizar CocoaPods usando la actualización del repositorio de pod antes de
comenzar un nuevo proyecto, si planea compilar para iOS usando una Mac.

Agregar capacitor a una aplicación web existente

Capacitor fue diseñado para instalarse en cualquier aplicación web JavaScript moderna existente. Se requiere un
archivo package.json válido y una carpeta que contenga todos los activos web para comenzar. Además, se necesita
un elemento <head> en el archivo index.html principal, ya que Capacitor se inyecta allí al inicializar la aplicación.

Para agregar Capacitor a su aplicación web, ejecute los siguientes comandos:

cd my-app
npm install @capacitor/core @capacitor/cli

Luego, inicialice Capacitor con la información de su aplicación.

Nota: npx es una nueva utilidad disponible en npm 5 o superior que ejecuta binarios / scripts locales para evitar
instalaciones globales.
npx cap init

Este comando le pedirá que ingrese el nombre de su aplicación y la identificación de la aplicación (el nombre del
paquete para Android y el identificador del paquete para iOS). Utilice la marca --web-dir para configurar la carpeta de
activos web (el valor predeterminado es www).

A continuación, instale cualquiera de las plataformas nativas deseadas:

npx cap add android

npx cap add ios
Capacitor ahora está instalado en su proyecto.

Opcional: iniciar un proyecto nuevo

Capacitor viene con una estructura de proyecto de stock si prefiere comenzar de nuevo y planea agregar una interfaz
de usuario / marco de interfaz por separado.

Para crearlo, ejecute:

npx @capacitor/cli créate

Este comando le pedirá que ingrese el nombre de su aplicación y la identificación de la aplicación (el nombre del
paquete para Android y el identificador del paquete para iOS).

Esto creará una aplicación de inicio muy simple sin biblioteca de UI.

A donde ir después

Asegúrese de tener instaladas las dependencias requeridas, incluidos los elementos PWA, luego continúe con la Guía
de flujo de trabajo para desarrolladores para aprender cómo se crean las aplicaciones de capacitor

Agregar capacitor a una aplicación iónica existente

 Usando capacitor con iónic

Instale el capacitor en un proyecto iónic

El condensador se instala fácilmente directamente en cualquier proyecto Ionic (1.0-4.x +).

Nuevo proyecto iónic

ionic start myApp tabs --capacitor
cd myApp

Proyecto iónic existente

cd myApp
ionic integrations enable capacitor

Inicialice Capacitor con la información de su aplicación

Nota: npx es una nueva utilidad disponible en npm 5 o superior que ejecuta binarios / scripts locales para evitar
instalaciones globales.
npx cap init [appName] [appId]

donde appName es el nombre de su aplicación y appId es el identificador de dominio de su aplicación (p. ej.,
com.example.app).

Nota: Utilice los IDE nativos para cambiar estas propiedades después de la configuración inicial.

Crea tu aplicación Ionic

Debes construir tu proyecto Ionic al menos una vez antes de agregar cualquier plataforma nativa.
ionic build

Esto crea la carpeta www que Capacitor se ha configurado automáticamente para usar como webDir en
capacitor.config.json.

Agregar plataformas
npx cap add ios
npx cap add android
npx cap add electron

Se crean las carpetas de Android e iOS en la raíz del proyecto. Estos son artefactos de proyectos nativos
completamente separados que deben considerarse parte de su aplicación Ionic (es decir, incorporarlos al control de
código fuente, editarlos en sus propios IDE, etc.).

Abra el IDE para construir, ejecutar e implementar

npx cap open ios
npx cap open android

Los proyectos nativos de iOS y Android se abren en sus IDE estándar (Xcode y Android Studio, respectivamente).
Utilice los IDE para ejecutar e implementar su aplicación.

Sincronizar su aplicación con Capacitor

Cada vez que realiza una compilación (por ejemplo, compilación iónica) que cambia su directorio web
(predeterminado: www), deberá copiar esos cambios en sus proyectos nativos:
npx cap copy

Uso de complementos nativos Ionic y Cordova

Los complementos Cordova e Ionic Native son compatibles con Capacitor. Consulte la guía Uso de complementos de
Cordova para obtener más información.
¿Quiere comenzar a usar Capacitor en una aplicación Ionic de inmediato? Consulte esta guía.

Flujo de trabajo del capacitor

El flujo de trabajo del capacitor implica algunas tareas consistentes:

1. Desarrolle y cree su aplicación web

Capacitor convierte su aplicación web en un binario nativo para cada plataforma. Por lo tanto, gran parte de su
trabajo consistirá en desarrollar y luego crear una aplicación web centrada en dispositivos móviles.

Interactuará con la plataforma nativa que se encuentra debajo usando los complementos de Capacitor (como
Camera), o usando los complementos de Cordova existentes con la compatibilidad de Cordova de Capacitor.

Como paso final, creará su aplicación usando un comando similar a:

npm run build

Si está utilizando un framework, siga el proceso de creación de su framework. Si, por ejemplo, está utilizando Ionic,
esto sería:
ionic build

2. Copie sus activos web

Cuando esté listo para ejecutar su aplicación de forma nativa en un dispositivo o en un simulador, copie sus activos
web construidos usando:
npx cap copy

3. Abra su IDE nativo

Capacitor utiliza los IDE nativos para crear, simular y ejecutar su aplicación. Para abrir uno, ejecute:
npx cap open

4. Actualiza el proyecto nativo

En algunos casos, la aplicación Capacitor debe actualizarse, como al instalar nuevos complementos.

Para instalar nuevos complementos (incluidos los de Cordova), ejecute:

npm install really-cool-plugin
npx cap update

5. Actualización del capacitor

Para comprobar si hay nuevas actualizaciones para el propio Capacitor, ejecute npx cap doctor para imprimir las
dependencias instaladas actualmente y ver las últimas disponibles.

Para actualizar Capacitor Core y CLI:

npm install @capacitor/cli@latest
npm install @capacitor/core@latest

Para actualizar alguna o todas las plataformas que está utilizando:

npm install @capacitor/ios@latest
npm install @capacitor/android@latest

Nota: Si no quiere arriesgarse a introducir cambios importantes, use npm update @capacitor/package-name en lugar
de @latest, ya que la actualización respeta el control de versiones semántico.

Abrir proyectos nativos

Capacitor usa el IDE nativo para cada plataforma con el fin de proporcionar la configuración requerida y para
construir, probar e implementar aplicaciones.
Para el desarrollo de iOS, eso significa que debe tener Xcode 11 o superior instalado. Para Android, Android Studio 3
o superior.

Ambos IDE se pueden abrir manualmente o usando el comando npx cap open:

Abriendo Xcode
npx cap open ios

Alternativamente, puede abrir Xcode manualmente

open ios/App/App.xcworkspace

Abriendo Android Studio

npx cap open Android

Alternativamente, puede abrir Android Studio e importar el directorio android / como un proyecto de Android
Studio.

Aplicación web progresiva

Capacitor tiene un pequeño servidor web de desarrollo para pruebas locales, pero se recomienda ejecutar su
aplicación web utilizando las herramientas de servidor de su framework de elección.
npx cap serve

Esto abrirá su aplicación web en una instancia de servidor web local en el navegador.

Uso de complementos de capacitores

Capacitor se envía con una serie de complementos integrados, como Camera y Filesystem.

Sin embargo, es probable que su aplicación necesite acceder a más funciones nativas que las que se proporcionan en
Capacitor.

Afortunadamente, puede agregar rápidamente su propia funcionalidad nativa escribiendo una pequeña cantidad de
código nativo y luego exponiéndolo como un complemento de Capacitor siguiendo la Guía de complementos.

Encontrar complementos

La comunidad ha creado una serie de complementos para varias funciones nativas y puede agregarlos fácilmente a
su aplicación.

Consulte nuestra lista de complementos de la comunidad para conocer algunas opciones.

Configurando su aplicación

Capacitor adopta la idea de "Codificar una vez, configurar en todas partes": la configuración se administra por
plataforma en lugar de en un sistema abstracto como config.xml en Cordova.

Gestión por plataforma

Capacitor requiere que se involucre más en la configuración del proyecto nativo que con Cordova. Creemos que este
es el enfoque correcto porque facilita seguir las guías nativas de iOS / Android existentes, obtener ayuda sobre Stack
Overflow y tener un control total sobre su proyecto.

Además, dado que configurar un proyecto de Capacitor no es diferente de configurar cualquier proyecto de iOS o
Android, los equipos de desarrollo nativos existentes pueden trabajar fácilmente junto con los desarrolladores web, y
cada lado usa las herramientas y los SDK con los que están familiarizados. Por supuesto, creemos que los
desarrolladores web pueden manejar toda la configuración nativa requerida por sí mismos, y la documentación de
Capacitor existe para ayudar a los desarrolladores web a hacer precisamente eso.

Configuración común
capacitor tiene algunas opciones de configuración de alto nivel que se establecen en el archivo de configuración del
capacitor. Estos generalmente no modifican la funcionalidad nativa, pero controlan las herramientas de Capacitor.

Archivo de configuración

El archivo de configuración del capacitor se utiliza para establecer opciones de alto nivel para las herramientas del
capacitor.

Aquí hay un ejemplo completo de las opciones de configuración disponibles para capacitor.config.json:
{
// El nombre del paquete para Android y el identificador del paquete para iOS.
appId: 'com.company.appname',

// El nombre de tu aplicación.
appName: 'Capacitor Kitchen Sink',

// Establece el directorio de sus activos web creados. Este es el directorio que se

// utilizará para ejecutar su aplicación en un entorno nativo.
webDir: 'www',

// El administrador de paquetes de JavaScript a usar, ya sea npm o yarn.

npmClient: 'npm',

// Ya sea para usar capacitor.js como un paquete que se copia en su código web,
// o para requerir que sea empaquetado / importado a través de un
// flujo de trabajo típico de mecanografiado / babel / webpack / rollup.
//
// El proyecto de inicio establece esto como verdadero, pero si está usando Ionic u otro framework,
// probablemente querrá que sea falso (el valor predeterminado es falso)
bundledWebRuntime: false,

// On Windows, we aren't able to automatically open Android Studio

// without knowing the full path. The default is set to the default
// Android Studio install path, but you may change it manually.
windowsAndroidStudioPath: 'C:Program FilesAndroidAndroid Studio\binstudio64.exe',

// Un valor booleano que determina si se deben ocultar los registros nativos para iOS y Android. La
preferencia se ignora si también se declara dentro de ios o android
// El valor predeterminado es falso
hideLogs: true,

// El objeto del servidor contiene configuraciones de puerto y URL

server: {
// Puede hacer que la aplicación cargue una URL externa (es decir, para recargar en vivo
url: 'http://192.168.1.33:8100',
// Puede configurar el nombre de host local, pero se recomienda mantener localhost
// ya que permite ejecutar API web que requieren un contexto seguro, como
// navigator.geolocation y MediaDevices.getUserMedia.
hostname: 'app',
// Es posible configurar el esquema local que se utiliza. Esto puede ser útil
// al migrar desde cordova-plugin-ionic-webview, donde el esquema predeterminado en iOS es iónico.
iosScheme: 'ionic',
androidScheme: 'http',
// Normally all external URLs are opened in the browser. By setting this option, you tell
// Capacitor to open URLs belonging to these hosts inside its WebView.
allowNavigation: ['example.org', '*.example.org', '192.0.2.1'],
},
// User agent of Capacitor WebView for iOS and Android, unless also declared inside ios or android objects
overrideUserAgent: 'my custom user agent',
// String to append to the original user agent of Capacitor WebView for iOS and Android,
// unless also declared inside ios or android objects. Only if overrideUserAgent is not set.
appendUserAgent: 'string to append',
// Color de fondo de Capacitor WebView para iOS y Android, a menos que también se declare dentro de objetos
ios o android
backgroundColor: '#ffffff',
android: {
// Agente de usuario de Capacitor WebView para Android
overrideUserAgent: 'my custom user agent for Android',
// String to append to the original user agent of Capacitor WebView for Android.
appendUserAgent: 'string to append for Android',
// Color de fondo de Capacitor WebView solo para Android
backgroundColor: '#ffffff',
// On Android, if you are loading the app from a remote/testing server from https
// protocol, you need to enable mixed content mode to allow the WebView to load
// files from different schemes such as capacitor-content:// or capacitor-file://
allowMixedContent: true,
// Android's default keyboard doesn't allow proper JS key capture
// You can use a simpler keyboard enabling this preference
// Be aware that this keyboard has some problems and limitations
captureInput: true,
// Enables debugging of web contents (HTML / CSS / JavaScript) loaded into
 // any WebViews of this application.
// This flag can be enabled in order to facilitate debugging of web layouts
// and JavaScript code running inside WebViews.
webContentsDebuggingEnabled: true,

// A Boolean value that determines whether to hide native Android logs or not
// Default is false
hideLogs: true,
},
ios: {
// User agent of Capacitor WebView for iOS
overrideUserAgent: 'my custom user agent for iOS',
// String to append to the original user agent of Capacitor WebView for iOS.
appendUserAgent: 'string to append for iOS',
// Color de fondo de Capacitor WebView solo para iOS
backgroundColor: '#ffffff',
// Configure the WebView's UIScrollView's content inset behavior
// Default is never
// Possible values are "automatic", "scrollableAxes", "never" and "always"
// https://developer.apple.com/documentation/uikit/uiscrollview/contentinsetadjustmentbehavior
contentInset: 'always',
// Configure the Swift version to be used for Cordova plugins.
// Default is 5.0
cordovaSwiftVersion: '4.2',
// Minimum iOS version supported by the project.
// Default is 11.0
minVersion: '11.3',
// Some Cordova plugins require to configure the linker flags
cordovaLinkerFlags: ['-ObjC'],
// A Boolean value that determines whether pressing on a link displays a preview of
// the destination for the link.
allowsLinkPreview: false,

// A Boolean value that determines whether to hide native iOS logs or not
// Default is false
hideLogs: true,
},
}

Usando Cordova e Ionic Native Plugins

Capacitor también admite una amplia gama de complementos de Cordova, por lo que hay muchos para elegir.

Configuración nativa

iOS y Android tienen guías de configuración que explican cómo realizar cambios comunes en su comportamiento:

Configurando Android

Las aplicaciones de Android administran permisos, funciones del dispositivo y otras configuraciones modificando
AndroidManifest.xml.

Este archivo hace referencia a valores de otros archivos en res / values /, para facilitar su actualización por separado,
incluidos styles.xml y strings.xml.

Este artículo cubre las modificaciones básicas que deberá realizar en su aplicación. Lea los documentos de Android
Manifest para aprender mucho más.

Cambiar el ID de la aplicación

Para modificar el ID de bundle/app para su aplicación, edite la línea superior <manifest> en AndroidManifest.xml:
<manifest package="com.getcapacitor.myapp">

Cambiar el nombre de la aplicación

Para cambiar el nombre de su aplicación, cambie el valor de app_name en strings.xml:

<string name="app_name">MyApp</string>

Probablemente también desee configurar el nombre de la actividad para que coincida con la aplicación, para las
aplicaciones que planean tener solo una actividad (la actividad web principal que ejecuta su aplicación):
<string name="title_activity_main">MyApp</string>
Cambiar URL personalizada

Su aplicación puede responder a URL personalizadas en el lanzamiento, lo que hace posible manejar vínculos
profundos e interacciones de la aplicación.

Para cambiar la URL, busque y modifique esta línea en strings.xml. Se recomienda establecer esto en el ID de
bundle/app.
<string name="custom_url_scheme">com.getcapacitor.myapp</string>

En este ejemplo, la aplicación responderá a las URL con el esquema com.getcapacitor.myapp: //.

Para obtener cualquier URL personalizada con la que se haya iniciado la aplicación, consulte la sección Vínculos
profundos arriba de esta.

Establecer permisos

En Android, los permisos que necesitará su aplicación se definen en AndroidManifest.xml dentro de la etiqueta
<manifest>, generalmente en la parte inferior del archivo.

Por ejemplo, así es como se ve agregar permisos de red:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.getcapacitor.myapp">
<activity>
<!-- other stuff -->
</activity>

<!-- More stuff -->

<!-- Your permissions -->

<!-- Network API -->

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
</manifest>

Generalmente, el complemento que elija utilizar le pedirá que establezca un permiso. Agréguelo en este archivo.

Permisos predeterminados

De forma predeterminada, todos los permisos iniciales solicitados para la última versión de Capacitor con los complementos
estándar se pueden encontrar en el archivo AndroidManifest.xml de la plantilla de Android.

https://github.com/ionic-team/capacitor/blob/main/android-template/app/src/main/AndroidManifest.xml

Actualización de su proyecto de Android Capacitor

De vez en cuando, deberá realizar actualizaciones de Capacitor en su aplicación de Android, incluida la actualización de la versión
de Capacitor utilizada en su aplicación o el uso de nuevas formas de interactuar con Capacitor dentro de su base de código de
Android.

Actualización de la biblioteca de Android Capacitor

Para actualizar la versión de @capacitor/android utilizada en su aplicación, solo npm instale la última versión:

npm install @capacitor/android@latest

Luego, desde Android Studio, haga clic en el botón "Sincronizar proyecto con archivos Gradle".

Actualización del proyecto de Android

Para actualizar la estructura base de su proyecto de Android, vea el proyecto de plantilla de Android en el repositorio de
Capacitor, debajo de la etiqueta correspondiente a la última versión estable de Capacitor. El proyecto principal se mantiene
simple a propósito: no debería llevar mucho tiempo ver qué es diferente del proyecto principal y su proyecto.

https://github.com/ionic-team/capacitor/tree/main/android-template
Código de Android nativo personalizado

Muchas aplicaciones querrán agregar código Java o Kotlin personalizado para implementar funciones nativas, sin la sobrecarga
de crear y publicar un complemento de Capacitor adecuado.

Hay dos formas de hacer esto dependiendo de si necesita o no acceder a ese código desde WebView:

Código nativo accesible de WebView

La forma más sencilla de crear código nativo personalizado que debe ser accesible en WebView es crear un complemento
Capacitor local para él. En este caso, crear el complemento es tan simple como crear una clase que herede de
com.getcapacitor.Plugin y use las anotaciones @NativePlugin () y @PluginMethod ().

A continuación, se muestran ejemplos de código personalizado en Java y Kotlin:

Java
com/example/myapp/CustomNativePlugin.java in android/app/src/main/java:
package com.example.myapp;

import com.getcapacitor.NativePlugin;
import com.getcapacitor.Plugin;
import com.getcapacitor.PluginCall;
import com.getcapacitor.PluginMethod;

@NativePlugin()
public class CustomNativePlugin extends Plugin {

@PluginMethod()
public void customCall(PluginCall call) {
String message = call.getString("message");
// More code here...
call.success();
}

@PluginMethod()
public void customFunction(PluginCall call) {
// More code here...
call.resolve();
}
}

Kotlin
También es posible desarrollar código personalizado con Kotlin. Al agregar nuevos archivos Kotlin en Android Studio, se le pedirá
que configure Kotlin en su proyecto si es necesario. Al hacer esto, asegúrese de configurar solo Kotlin en el módulo de su
aplicación, no en el capacitor o módulos de terceros.

com/example/myapp/CustomNativePlugin.kt in android/app/src/main/java:
package com.example.myapp;

import com.getcapacitor.NativePlugin;
import com.getcapacitor.Plugin;
import com.getcapacitor.PluginCall;
import com.getcapacitor.PluginMethod;

@NativePlugin
class CustomNativePlugin : Plugin() {

@PluginMethod
fun customCall(call: PluginCall) {
val message = call.getString("message")
 // More code here...
call.success()
}

@PluginMethod
fun customFunction(call: PluginCall) {
// More code here...
call.resolve()
}
}
Registro de código de complemento

El último paso es registrar el complemento en su actividad. Registrar una clase de complemento de Kotlin en la actividad es lo
mismo que registrar una clase de Java:

// Other imports...
import com.example.myapp.CustomNativePlugin;

public class MainActivity extends BridgeActivity {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

// Initializes the Bridge

this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
// Additional plugins you've installed go here
// Ex: add(TotallyAwesomePlugin.class);
add(CustomNativePlugin.class);
}});
}
}
Entonces puedes usar tus funciones en tu código webView:
// Other codes...
import { Plugins } from '@capacitor/core';
const { CustomNativePlugin } = Plugins;
// Other codes...
CustomNativePlugin.customCall({ message: 'CUSTOM MESSAGE' });
CustomNativePlugin.customFunction();
// Other codes...
Para conocer más usos de las API de complementos, consulte la Guía de complementos de Android Capacitor.
Código nativo privado
Si no es necesario que se pueda acceder a su código desde WebView, simplemente agregue su código donde sea que necesite ir.
Con Capacitor, tiene control total sobre su proyecto nativo. ¿Necesita agregar un nuevo controlador de eventos en su actividad?
Simplemente actualice MainActivity y agréguelo. El mundo es verdaderamente tu ostra.
Implementación de la aplicación de Android Capacitor en Google Play Store
Debido a que las aplicaciones de Capacitor son aplicaciones nativas normales al final del día, la forma en que se implementan en
Google Play Store es como cualquier otra aplicación nativa de Android.
Para comenzar, consulte la documentación oficial de Google en la lista de verificación de lanzamiento para preparar su aplicación
para enviarla. Consulte aquí para obtener detalles sobre la generación de iconos y pantallas de presentación para su aplicación.
 Creación de iconos y pantallas de presentación
Ya está disponible el soporte inicial para la generación de iconos y pantallas de presentación. Para obtener detalles completos,
consulte los documentos de cordova-res.
Primero, instale cordova-res:
npm install -g cordova-res
cordova-res espera una estructura similar a Cordova: coloque un icono y un archivo de pantalla de presentación en una carpeta
de recursos de nivel superior dentro de su proyecto, así:
resources/
├── icon.png
└── splash.png
A continuación, ejecute lo siguiente para generar todas las imágenes y luego cópielas en los proyectos nativos:
$ cordova-res ios --skip-config --copy
$ cordova-res android --skip-config --copy
https://github.com/ionic-team/cordova-res
Almacenamiento de datos en capacitor
La mayoría de las aplicaciones necesitan persistir y leer datos locales. Dependiendo del caso de uso específico, hay algunos
enfoques que se pueden tomar.
¿Por qué no puedo usar LocalStorage o IndexedDB?
Dado que las aplicaciones de Capacitor se ejecutan principalmente en una vista web o un navegador, las API web para
almacenamiento están disponibles para los desarrolladores de Capacitor. Sin embargo, hay algunas advertencias importantes
que se deben tener en cuenta con estas API.
El almacenamiento local se puede usar para pequeñas cantidades de datos temporales, como una identificación de usuario, pero
debe considerarse transitorio, lo que significa que su aplicación debe esperar que los datos se pierdan eventualmente. Esto se
debe a que el sistema operativo recuperará el almacenamiento local de las vistas web si un dispositivo se está quedando sin
espacio. Lo mismo puede decirse de IndexedDB al menos en iOS (en Android, la API de almacenamiento persistente está
disponible para marcar IndexedDB como persistente). Lea más sobre las políticas de desalojo de almacenamiento de datos en el
navegador.
API de almacenamiento de condensadores
Capacitor viene con una API de almacenamiento nativa que evita los problemas de desalojo anteriores, pero está diseñada para
pequeñas cantidades de datos.
La API de almacenamiento proporciona una API de clave / valor simple sin soporte de consultas avanzadas:
import { Plugins } from '@capacitor/core';

const { Storage } = Plugins;

// JSON "set" example
async setObject() {
await Storage.set({
key: 'user',
value: JSON.stringify({
id: 1,
name: 'Max'
})
});
}

// JSON "get" example

async getObject() {
const ret = await Storage.get({ key: 'user' });
const user = JSON.parse(ret.value);
}
Opciones de almacenamiento de datos grandes o de alto rendimiento
Para almacenar grandes cantidades de datos y acceder a ellos de una manera de alto rendimiento, existen algunas opciones.
La opción más soportada es SQLite. Hay una serie de complementos SQLite mantenidos por la comunidad que deberían
funcionar en Capacitor, incluidos capacitor-sqlite y cordova-plugin-sqlite.
El equipo de Capacitor también ofrece una solución de almacenamiento SQLite empresarial con soporte de cifrado e integración
con API de administración de claves seguras en el dispositivo.

Para obtener una guía con algunas consideraciones específicas de capacitadores, consulte la maravillosa guía de Josh Morony
sobre el tema.
https://www.joshmorony.com/deploying-capacitor-applications-to-android-development-distribution/