__CAPGO_KEEP_0__ home

Cómo poner una aplicación web en la Tienda de aplicaciones en 11 pasos

How to put a web app on the App Store and Google Play in 11 steps with Capacitor: native shell, plugins, accounts, signing, testing, review, live updates.

Créditos del artículo

Martín Donadieu

Escritor

Valeria

Revisor

Jordan

Editor

Cómo poner una aplicación web en la App Store en 11 pasos

Para poner una aplicación web en la App Store y Google Play, envuelva su aplicación web construida en un proyecto nativo con Capacitor, agregue algunas características nativas, cree cuentas de desarrollador de Apple y Google, firme y construya los binarios de iOS y Android, pruebe con usuarios reales, prepare las listas de tienda y envíe para revisión. Su HTML, CSS y JavaScript existente sigue funcionando dentro de un WebView nativo, por lo que no necesita reescribir la aplicación.

A continuación, se presentan los 11 pasos en el orden que evita esperar, con comandos para Capacitor 8 y las reglas de la tienda que se aplican en octubre de 2026.

Lo que necesitas

  • A una aplicación web que se compila a archivos estáticos (React, Vue, Angular, Svelte, Next.js export estático, Nuxt generate, HTML plano, o una aplicación creada con un constructor de inteligencia artificial como Lovable o Bolt).
  • Node.js 22 o posterior (Capacitor 8 requerimiento) y Bun o otro administrador de paquetes.
  • Android Studio para compilaciones de Android.
  • Xcode 26 en macOS para compilaciones de iOS, o un servicio de compilación en la nube si no tiene un Mac.
  • 99 USD al año para Apple y 25 USD una vez para Google.

Un cronograma realista.

Fase. Tiempo típico. Puede ejecutarse en paralelo?
Registro de cuenta de desarrollador. Horas (individual) a 2 semanas (organización con nuevo D-U-N-S). Sí, comience desde el día uno.
Capacitor setup and first device run 1 día
Mejoras móviles y características nativas 3 días a 3 semanas
Autenticación y primeras compilaciones 1 día
Prueba cerrada de Google Play (nuevas cuentas personales) 14 días mínimo, luego revisión de acceso a producción Sí, con TestFlight de iOS
Lista de tienda 1 a 2 días Sí
App Review Apple suele tardar entre 1 y 2 días, Google entre horas y varios días

Paso 1: Inscríbete en el programa de desarrolladores hoy mismo

Paso 1: Inscríbete en el programa de desarrolladores hoy mismo

  • Apple Developer Program: 99 USD per year. Individuals need an Apple Account with two-factor authentication and their legal name. Organizations also need a D-U-N-S number, a company website and a work email on that domain.
  • Google Play ConsoleCuesta 25 USD una vez. Las organizaciones necesitan un número D-U-N-S. Se requiere verificación de identidad.

Si te inscribes en Google Play como individuo, tu cuenta está sujeta a la regla de pruebas cerradas (Paso 9). Recorrido completo: cómo crear cuentas de desarrollador de Apple y Google Play.

¿Cómo crear cuentas de desarrolladores de Apple y Google Play?

Capacitor runs your app in a WebView. Things that are fine in a browser tab feel wrong in an app:

  • Salida de compilación estática. El Capacitor carga archivos desde el paquete de la aplicación. La renderización del lado del servidor no se ejecuta en el teléfono. Utilice la salida estática de su framework ("next build con output: 'export', nuxt generateVite buildLas llamadas de API se realizan a su backend sobre HTTPS como antes.
  • Ruteo del lado del cliente que funciona desde un origen de archivo. Utilice el ruteo de historia (Capacitor sirve la aplicación desde https://localhost en Android y capacitor://localhost en iOS, por lo que funciona) y asegúrese de que las URL profundas se redirijan a index.html.
  • CORS. Agregue los orígenes Capacitor a los orígenes permitidos de su API: capacitor://localhost (iOS) y https://localhost (Android).
  • Toca, no desplaza. Quitar menús de solo ratón. Asegúrate de que los blancos de clic sean al menos 44 x 44 puntos.
  • Áreas seguras. Agregar viewport-fit=cover Agrega a la etiqueta meta del viewport y rellena los encabezados y barras inferiores con env(safe-area-inset-top) y env(safe-area-inset-bottom).
  • Redes inalámbricas y redes lentas. Muestre un estado correcto en lugar de una pantalla en blanco. Los revisores prueban en Wi-Fi inestable.
  • No banners de “descarga nuestra app” y sin enlaces que envíen a los usuarios a su sitio web para realizar tareas básicas.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Step 3: Add Capacitor

Desde la raíz de tu proyecto web:

bun add @capacitor/core
bun add -d @capacitor/cli
bunx cap init "My App" com.example.myapp --web-dir dist
bun add @capacitor/ios @capacitor/android
bun run build
bunx cap add ios
bunx cap add android

Utiliza el directorio de salida real para --web-dir: dist para Vite out para Next.js exportación estática .output/public para Nuxt generar build para Create React App dist/<project>/browser para Angular.

El identificador de paquete (com.example.myapp) es permanente una vez que la aplicación está en las tiendas. Utiliza un dominio inverso que controlas.

Tu capacitor.config.ts ahora se ve así:

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

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'My App',
  webDir: 'dist',
};

export default config;

Capacitor 8 crea el proyecto de iOS con el Gestor de Paquetes de Swift por defecto, por lo que no necesita CocoaPods. Cada vez que cambies el code

bun run build
bunx cap sync

Correlo:

bunx cap run ios
bunx cap run android

Comita el ios/ y android/ carpetas. Son fuentes code que editarás (permisos, iconos, firmas). Para más información de fondo, consulta ¿Cómo es fácil convertir una aplicación web en una aplicación móvil con Capacitor, and if you built with an AI tool, our Guía de amor a la movilidad.

Paso 4: Agrega características nativas que justifiquen una aplicación

La guía 4.2 de Apple (Funcionalidad Mínima) rechaza aplicaciones que son solo una página web en una caja. No necesitas docenas de características nativas, pero el app debe comportarse como una aplicación. Añadidos comunes y útiles:

Característica Plugin
Notificaciones de push @capacitor/push-notifications
Ingreso nativo de Google, Apple y Facebook @capgo/capacitor-social-login
Bloqueo con Face ID / huella dactilar @capgo/capacitor-native-biometric
Cámara y fotos @capacitor/camera
Compras y suscripciones en la aplicación @capgo/capacitor-native-purchases
Hoja de compartición nativa @capacitor/share
Haptics @capacitor/haptics
Barra de estado y pantalla de bienvenida @capacitor/status-bar, @capacitor/splash-screen
Solicitar calificación de la aplicación @capgo/capacitor-in-app-review
Actualizaciones en vivo @capgo/capacitor-updater

Ejemplo: mostrar la hoja de compartición nativa en lugar de un botón "copiar enlace".

import { Share } from '@capacitor/share';
import { Capacitor } from '@capacitor/core';

export async function shareLink(url: string, title: string) {
  if (Capacitor.isNativePlatform()) {
    await Share.share({ title, url });
  } else {
    await navigator.clipboard.writeText(url);
  }
}

Si vende contenido digital o suscripciones, planifique los pagos ahora. Apple y Google requieren sus sistemas de compras en la aplicación para bienes digitales en la mayoría de los casos. En la tienda de aplicaciones de EE. UU., las aplicaciones también pueden enlazar a una página de pago web externa después de la sentencia de la corte en 2025; otras regiones tienen sus propias reglas. Los bienes físicos y servicios (entregas, viajes) pueden usar Stripe o cualquier proveedor de pago. Consulte compras en la aplicación con Capacitor.

El catálogo completo de Capgo plugins está en la página de plugins.

Paso 5: Iconos, pantalla de bienvenida y cadenas de permisos

Generate all icon and splash sizes from two source images:

bun add -d @capacitor/assets
# assets/icon.png 1024x1024, assets/splash.png 2732x2732
bunx capacitor-assets generate

En iOS, cada permiso que utilices necesita una descripción de uso en ios/App/App/Info.plist, o la aplicación se cae cuando pregunta y Apple la rechaza:

<key>NSCameraUsageDescription</key>
<string>Take a photo of your receipt to attach it to an expense.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Choose receipt photos from your library.</string>

Escribir razones específicas. "Esta aplicación necesita la cámara" se rechaza.

En Android, los plugins agregan la mayoría de los permisos al archivo de manifest. Elimine los permisos que no utilice; Google le pide que justifique los sensibles.

También agregue un archivo de manifest de privacidad (PrivacyInfo.xcprivacySi su code utiliza APIs de razones requeridas. guía de privacidad para Capacitor.

Step 6: Configura la firma

iOS. Necesitas un certificado de distribución de Apple (con su clave privada, generalmente exportada como .p12) y un perfil de configuración de App Store Connect para tu ID de paquete. Xcode puede crearlos automáticamente, o puedes crearlos tú mismo, incluso sin un Mac. Lee Certificados y perfiles de configuración de iOS explicados; el Generador de certificado iOS gestiona el paso de CSR en el navegador.

Android. Crear un archivo de llave de carga y manténlo respaldado. Google Play utiliza Play App Signing, por lo que Google almacena la clave de firma final y firmas las cargas con la tuya.

keytool -genkeypair -v -keystore upload-keystore.jks -alias upload \
  -keyalg RSA -keysize 2048 -validity 10000

O utiliza el Generador de llave de Android.

Paso 7: Construye los binarios de lanzamiento

Localmente

iOS (en un Mac con Xcode 26, necesario para subir aplicaciones a la Tienda de App desde abril de 2026):

  1. bunx cap open ios
  2. Seleccione el App objetivo, establezca la versión y el número de compilación, seleccione su equipo bajo Firmas y capacidades.
  3. Elija Cualquier dispositivo iOS (arm64), luego Producto > Archivo.
  4. En el Organizador, Distribuye App > App Store Connect > Subir.

Android:

bun run build
bunx cap sync android
cd android
./gradlew bundleRelease

El AAB está en android/app/build/outputs/bundle/release/. Configura signingConfigs in android/app/build.gradle con tu keystore, cargando contraseñas desde variables de entorno.

Asegúrate de targetSdkVersion es 36. Desde el 31 de agosto de 2026, Google Play requiere que las nuevas aplicaciones y actualizaciones se dirijan a Android 16 (API 36), que es el Capacitor 8 por defecto.

En la nube

Si no tienes un Mac, o quieres que los builds sean reproducibles desde CI, Capgo Construcción construye ambas plataformas en máquinas hospedadas y puede subir directamente a TestFlight y Google Play:

bunx @capgo/cli@latest build credentials save --appId com.example.myapp --platform ios
bunx @capgo/cli@latest build credentials save --appId com.example.myapp --platform android
bunx @capgo/cli@latest build request com.example.myapp --platform ios --path .
bunx @capgo/cli@latest build request com.example.myapp --platform android --path .

Los credenciales se utilizan solo para la compilación y no se almacenan en los servidores Capgo. Consulte los Capgo docs de compilación.

Paso 8: Distribuir a los probadores

Coloque la compilación en teléfonos reales antes de que nadie en Apple o Google la vea.

  • iOS: subir a TestFlight. Los probadores internos (hasta 100 miembros del equipo) lo obtienen después del procesamiento; los probadores externos (hasta 10,000) después de una breve revisión de la aplicación beta.
  • AndroidCree una versión de prueba interna en Play Console y comparte el enlace de opt-in.

Pruebe el registro y la autenticación en el entorno de pruebas, las notificaciones push, el comportamiento en línea, el teclado cubriendo los campos de entrada y el comportamiento del botón de retroceso en Android. Detalles para cada opción: cómo distribuir aplicaciones iOS y Android a probadores.

Paso 9: Ejecuta la prueba cerrada de Google Play (nuevas cuentas personales)

Si su cuenta de Play es una cuenta personal creada después del 13 de noviembre de 2023, no puede publicar en producción hasta que haya ejecutado un prueba cerrada con al menos 12 participantes inscritos durante 14 días consecutivosPosteriormente, solicita acceso a producción en la consola de Play, que Google revisa dentro de una semana.

Comienza esto tan pronto como tengas una versión de Android funcional. Utiliza un grupo de Google como lista de participantes para que las personas puedan unirse ellos mismos. Envía actualizaciones durante los 14 días y recopila retroalimentación, ya que Google pregunta qué aprendiste. Las cuentas de organización están exentas.

Paso 10: Prepara las listas de tienda y envía

Para ambas tiendas necesitas: nombre de la aplicación, descripciones, capturas de pantalla en las tamañas aceptadas, icono, URL de la política de privacidad, declaraciones de privacidad (Apple App Privacy y Google Data safety), cuestionario de calificación de edad, contacto de soporte y una cuenta de demostración si la aplicación tiene inicio de sesión. Google también necesita una imagen de características de 1024 x 500. Especificaciones y límites: Cómo preparar tu lista de App Store y Google Play.

Enviar en iOS: En App Store Connect, crea la versión, selecciona la compilación de TestFlight, rellena la información de revisión de la aplicación (cuenta de demostración, notas) y haz clic Agregar para Revisiónluego Enviar.

Enviar en Android: crear una versión de producción con el AAB (o promover la probada desde una pista de prueba), completar todos los App content declaración, establecer países y enviar para revisión.

Las rechazaciones que golpean a las aplicaciones web más a menudo:

  1. 4.2 Funcionalidad mínimaLa aplicación es solo tu sitio web. Agrega valor nativo y elimina la interfaz de usuario del navegador.
  2. Requiere inicio de sesión pero no cuenta de demo, o la cuenta no funciona.
  3. Opción de inicio de sesión enfocada en la privacidad cuando ofreces inicio de sesión con Google o Facebook en iOS. La directiva 4.8 requiere una opción equivalente que limita la recopilación de datos; Sign in with Apple es la elección habitual.
  4. No eliminación de cuenta dentro de la aplicación cuando los usuarios pueden crear cuentas.
  5. Compras digitales a través de Stripe donde se requiere una compra en la aplicación.
  6. Disposición de pantalla de iPad rota porque el proyecto admite iPad por defecto.
  7. Falta o permisos vagos de la aplicación.

Nuestra guía de revisión de aplicaciones para primerizos y Guía de envío de aplicaciones para iOS pasa por cada uno en detalle.

Paso 11: Envía actualizaciones sin esperar a la revisión

Después del lanzamiento, la mayoría de tus cambios todavía estarán en la web code. En lugar de una nueva construcción de tienda para cada corrección, agrega actualizaciones en vivo. El Capgo actualizador descarga nuevos conjuntos de la web de Capgo y los aplica en el próximo arranque, con rollback automático si el nuevo conjunto falla al iniciar.

bun add @capgo/capacitor-updater
bunx cap sync
bunx @capgo/cli@latest init

Llamar notifyAppReady() cuando tu aplicación ha iniciado para que el actualizador conozca que el paquete es saludable:

import { CapacitorUpdater } from '@capgo/capacitor-updater';

CapacitorUpdater.notifyAppReady();

Entonces cada lanzamiento de web code es un comando:

bun run build
bunx @capgo/cli@latest bundle upload --channel production

Ambos tiendas permiten esto para interpretados code siempre que la actualización no cambie el propósito principal de la aplicación o evite sus reglas de pago. Los cambios nativos (nuevos plugins, nuevos permisos, Capacitor actualizaciones) todavía pasan por las tiendas. Lee más en Capgo actualizaciones en vivo y documentación del actualizador.

Agrega el plugin antes de tu primera presentación de tienda. Tiene que estar en el binario que los usuarios instalan, de lo contrario tu primera live update solo puede llegar a los usuarios después de una segunda publicación de tienda.

Finalmente, automatiza: construye y sube en cada etiqueta desde GitHub Actions o GitLab CI, envía actualizaciones en vivo en cada fusión a mainy mantiene las liberaciones nativas para cambios nativos.

Lista de verificación previa al lanzamiento

  • cuentas de Apple y Google aprobadas, acuerdos aceptados
  • Funciona sin conexión o muestra un estado de conexión claro
  • Áreas seguras, teclado y botón de retroceso de Android gestionados
  • Al menos algunas características nativas que una página web no puede ofrecer
  • Iconos, pantalla de inicio, cadenas de permisos, manifiesto de privacidad
  • Certificado de distribución, perfil de App Store, keystore subido
  • Target SDK 36 en Android, construido con Xcode 26 en iOS
  • Pruebas de TestFlight y Play realizadas en dispositivos reales
  • Prueba cerrada de Google Play finalizada (cuentas personales)
  • Listados completos en ambas tiendas, cuenta de demostración agregada
  • In-app account deletion if users can sign up
  • Plugin de actualizaciones en vivo incluido en la primera versión binaria

Solución de problemas

pantalla blanca al iniciar. webDir apunta a la carpeta equivocada o te has olvidado bunx cap sync después de compilar. Verifica ios/App/App/public y android/app/src/main/assets/public contiene index.html.

API solo falla en la aplicación. CORS: permite capacitor://localhost y https://localhost. También verifica que no estás llamando http:// URLs, que iOS bloquea por defecto.

Rutas 404 después de refrescar o enlace profundo. Utiliza un router que se desplome a index.htmlo hash de rutas para configuraciones más antiguas.

Errores de firma de Xcode. Ver la lista de errores en Explicación de certificados y perfiles de provisión de iOS.

Gradle build fails after upgrading. Capacitor 8 requiere Android Studio Otter (2025.2.1) o una versión posterior y JDK 21, como se indica en la Capacitor 8 guía de actualización. Para otros errores de Gradle, consulte cómo resolver errores de compilación de Android en Capacitor.

La subida a Google Play rechazada para el objetivo SDK. Configurar targetSdkVersion = 36 in android/variables.gradle.

Envíos en vivo para aplicaciones Capacitor

Cuando un bug en la capa de web está en vivo, envíe la corrección a través de Capgo en lugar de esperar días para la aprobación de la tienda de aplicaciones. Los usuarios obtienen la actualización en segundo plano mientras los cambios nativos siguen en el camino de revisión normal.

Últimas noticias de nuestro Blog

Capgo le da las mejores perspectivas que necesita para crear una aplicación móvil verdaderamente profesional.