Crear aplicaciones móviles con SvelteKit y Capacitor

En este tutorial, comenzaremos con una nueva SvelteKit app and transition to native mobile development using Capacitor. You can also add Capgo Native Navigation and Transitions for a native mobile feel, and use tailwind-capacitor for safe areas.

Capacitor te permite convertir fácilmente tu aplicación web de SvelteKit en una aplicación móvil nativa sin necesidad de realizar modificaciones significativas o aprender una nueva habilidad como React Native.

Siguiendo este guía paso a paso, transforma tu aplicación SvelteKit en una aplicación móvil utilizando Capacitor, con navegación nativa opcional Capgo, transiciones y orientación de iOS.

Sobre Capacitor

CapacitorJS es un cambio de juego! Puede integrarse de manera eficiente en cualquier proyecto web, envolviendo tu aplicación en una vista web nativa y generando proyectos Xcode y Android Studio nativos para ti. Sus plugins proporcionan acceso a características de dispositivos nativos como la cámara a través de un puente de JavaScript.

Capacitor te permite crear una fantástica aplicación móvil nativa sin ningún setup complicado o curva de aprendizaje empinada. Su API y funcionalidad simplificada lo hacen fácil de integrar en tu proyecto. Te sorprenderá la simplicidad de lograr una aplicación nativa completamente funcional con Capacitor!

Preparando tu aplicación SvelteKit

Para crear una nueva aplicación SvelteKit, ejecuta el siguiente comando:

npm create svelte@latest my-app
cd my-app
npm install
npm run build

Después de ejecutar el build comando, deberías ver un nuevo dist carpeta en la raíz de tu proyecto.

Esta carpeta se utilizará por Capacitor más adelante, pero por ahora, necesitamos configurarla correctamente.

Agregar Capacitor a tu aplicación SvelteKit

Para empaquetar cualquier aplicación web en un contenedor móvil nativo, debemos seguir unos pocos pasos inicialmente. Después de eso, es tan simple como ejecutar un comando único sync comando.

Primero, instale el Capacitor CLI como dependencia de desarrollo y configúrelo dentro de su proyecto. Durante la configuración, puede pulsar “enter” para aceptar los valores predeterminados para el nombre y el ID de la aplicación.

A continuación, instale el paquete principal y los paquetes relevantes para las plataformas iOS y Android.

Finalmente, agregue las plataformas, y Capacitor creará carpetas para cada plataforma en la raíz de su proyecto:

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your SvelteKit project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

En este punto, debería ver nuevas ios y android carpetas en su proyecto de SvelteKit.

Estos son proyectos nativos reales!

To acceder al proyecto de Android más tarde, necesitarás instalar Android Studio. Para iOS, necesitas un Mac y debes instalar Xcode.

Además, debes encontrar un archivo capacitor.config.ts que contiene algunas configuraciones básicas de Capacitor utilizadas durante la sincronización. La única cosa a la que debes prestar atención es el webDircontexto: texto fragmento de HTML de una cadena de Capgo UI más larga (clave de página `solutions_cordova_to_capacitor_ai_step2_body`). Página/área: página de marketing de soluciones de Capgo. Rol: oración de copia de sitio web. Visto en: página solutions/cordova-to-capacitor-ai.astro. Clave de mensaje `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body).

, que debe apuntar al resultado de tu comando de compilación. Actualmente, está incorrecto. capacitor.config.ts __CAPGO_KEEP_0__.config.ts carpetaWeb:

import { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'build',
}

export default config

Una vez que hemos actualizado nuestros ajustes de Capacitor, vamos a cambiar nuestro proyecto de Sveltekit a una aplicación estática descargando el paquete de adaptador estático adecuado:

npm i -D @sveltejs/adapter-static

Después de instalar el paquete, necesitaremos alterar archivo svelte.config.js

import adapter from '@sveltejs/adapter-static'
import { vitePreprocess } from '@sveltejs/kit/vite'

/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
  preprocess: vitePreprocess(),

  kit: {
    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
    adapter: adapter({
      // default options are shown. On some platforms
      // these options are set automatically — see below
      pages: 'build',
      assets: 'build',
      fallback: null,
      precompress: false,
      strict: true
    })
  }
}

export default config

archivo svelte.config.js actualizado, necesitaremos agregar una opción de pre-renderizado creando una archivo +layout.js src/rutas y solo agrega la siguiente exportación a +layout.js:

export const prerender = true

Después de agregar y actualizar el +layout.js página, necesitaremos agregar nuestras plataformas móviles, reconstruir nuestro proyecto para crear el build contexto: texto fragmento de HTML de una cadena de UI de Capgo más larga (clave de la página `solutions_cordova_to_capacitor_ai_step2_body`). Página/área: página de marketing de soluciones de Capgo. Rol: oración de copia de sitio web. Visto en: página solutions/cordova-to-capacitor-ai.astro. Clave de mensaje `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body).

carpeta

npm run build
npx cap sync

Puedes hacerlo ejecutando los siguientes comandos: npm run build El primer comando npx cap sync will sync all the web code into the right places of the native platforms so they can be displayed in an app.

Además, el comando de sincronización podría actualizar las plataformas nativas e instalar plugins, por lo que cuando instales nuevos Capacitor plugins, es hora de ejecutar npx cap sync de nuevo.

Sin darse cuenta, has completado el proceso, así que veamos la aplicación en un dispositivo!

Crear y Desplegar Aplicaciones Nativas

Para desarrollar aplicaciones iOS, necesitas tener Xcode instalado, y para aplicaciones Android, necesitas tener Android Studio instalado. Además, si planeas distribuir tu aplicación en la tienda de aplicaciones, necesitas inscribirte en el Programa de Desarrolladores de Apple para iOS y en el Console de Google Play para Android.

Si eres nuevo en el desarrollo de aplicaciones móviles nativas, puedes usar el Capacitor CLI para abrir fácilmente ambos proyectos nativos:

npx cap open ios
npx cap open android

Una vez que hayas configurado tus proyectos nativos, desplegar tu aplicación en un dispositivo conectado es fácil. En Android Studio, solo necesitas esperar a que todo esté listo, y puedes desplegar tu aplicación en un dispositivo conectado sin cambiar ninguna configuración. Aquí tienes un ejemplo:

En Xcode, debes configurar tu cuenta de firma para desplegar tu aplicación en un dispositivo real en lugar de solo en el simulador. Si no lo has hecho antes, Xcode te guía a través del proceso (pero de nuevo, debes estar inscrito en el Programa de Desarrolladores). Después de eso, puedes simplemente pulsar play para ejecutar la aplicación en tu dispositivo conectado, que puedes seleccionar en la parte superior. Aquí tienes un ejemplo:

Felicidades! Has desplegado con éxito tu aplicación web de SvelteKit en un dispositivo móvil. Aquí tienes un ejemplo:

Pero espera, hay una forma más rápida de hacer esto durante el desarrollo…

Capacitor Live Reload

Hasta ahora, probablemente estás acostumbrado a tener hot reload con todas las marcos modernas, y la buena noticia es que puedes tener la misma funcionalidad en un dispositivo móvil con un mínimo esfuerzo!

Habilita acceso a tu aplicación hospedada localmente con live reload On tu red de red. Por tener la aplicación Capacitor cargar el contenido desde la URL específica.

El primer paso es determinar tu dirección IP local. Si estás utilizando un Mac, puedes encontrar esto ejecutando el comando siguiente en la terminal:

ipconfig getifaddr en0

On Windows, ejecuta:

ipconfig

Luego busca la dirección IPv4.

Puedes instruir a Capacitor para cargar la aplicación directamente desde el servidor agregando otra entrada a nuestro archivo: capacitor.config.ts Asegúrate de utilizar

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

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:3000',
    cleartext: true
  }
};

export default config;

la dirección IP y puerto correctos como se muestra en el ejemplo anterior.Ahora, podemos aplicar estos cambios copiándolos a nuestro proyecto nativo:

El

npx cap copy

El copy El comando es similar a sync, pero solo copiará los cambios realizados en la carpeta web y la configuración, sin actualizar el proyecto nativo.

Puedes desplegar tu aplicación una vez más a través de Android Studio o Xcode. Después de eso, si cambias algo en tu aplicación Svelte, la aplicación se recargará automáticamente y mostrará los cambios!

Tener en cuenta que si installas nuevos plugins como la cámara, todavía requiere una reconstrucción de tu proyecto nativo. Esto se debe a que los archivos nativos se han modificado, y no se puede hacer en tiempo real.

Ten en cuenta que debes utilizar la IP y el puerto correctos en tu configuración. El bloque code anterior muestra el puerto por defecto de SvelteKit para fines de demostración.

Usando Capacitor Plugins

Vamos a echar un vistazo a cómo utilizar un plugin Capacitor en acción, que mencionamos antes. Para hacer esto, podemos instalar un plugin simple ejecutando:

npm i @capacitor/share

No hay nada de especial sobre el plugin de Compartir, pero muestra el diálogo de compartir nativo! Para esto, ahora solo necesitamos importar el paquete y llamar a la share() función desde nuestra aplicación, así que cambiemos el src/routes/index.svelte por esto:

<script>
  import { Share } from '@capacitor/share';

  async function share() {
    await Share.share({
      title: 'Open Youtube',
      text: 'Check new video on youtube',
      url: 'https://www.youtube.com',
      dialogTitle: 'Share with friends'
    });
  }
</script>

<h1>Welcome to SvelteKit and Capacitor!</h1>
<button on:click={share}>Share now!</button>

Como se mencionó anteriormente, cuando instalamos nuevos plugins, necesitamos realizar una operación de sincronización y luego volver a desplegar la aplicación en nuestro dispositivo. Para hacer esto, ejecuta el siguiente comando:

npx cap sync

Después de pulsar el botón, puedes ver el hermoso diálogo de compartir nativo en acción!

Ahora puedes hacer que la aplicación se sienta más nativa en iOS y Android con la navegación y las transiciones de Capgo y solucionar problemas de diseño comunes de iOS que causan desbordamiento horizontal o áreas de seguridad recortadas.

Interfaz de usuario que se siente nativa con Capgo Navegación y Transiciones Nativas

He trabajado durante años con Ionic para construir aplicaciones de múltiples plataformas, pero integrarlo con SvelteKit es engorroso y raramente vale la pena cuando ya tienes Tailwind CSS.

Para un sentir móvil nativo en una aplicación SvelteKit + Capacitor, utilice los plugins Capgo en lugar de kits de interfaz de usuario web solo como Konsta UI:

• @capgo/capacitor-navegación-nativa — barra de navegación nativa, Liquid Glass de pestañas en iOS, y un estilo de pestañas difuminado en Android. Su router SvelteKit mantiene el estado de ruta; el plugin es dueño de la cromología nativa.
• @capgo/capacitor-transiciones — transiciones de página estilo Ionic y retroceso de arrastre en iOS en la capa de WebView, sin adoptar la interfaz de usuario de Ionic.

Instale ambos:

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

Configure la navegación nativa con el modo de inserción de CSS para que el contenido web respete las barras nativas:

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Renderice una barra de pestañas de vidrio líquido (iOS utiliza la renderización propiedad del sistema; Android utiliza un fondo difuminado de WebView):

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  goto(`/${id}`);
});

Agregue transiciones de página nativas en su concha de aplicación:

<script>
  import { goto } from '$app/navigation';
  import { routerOutlet, page, setDirection } from '@capgo/capacitor-transitions/svelte';
  import '@capgo/capacitor-transitions';

  function openSettings() {
    setDirection('forward');
    goto('/settings');
  }
</script>

<cap-router-outlet use:routerOutlet>
  <cap-page use:page>
    <cap-content slot="content">
      <slot />
    </cap-content>
  </cap-page>
</cap-router-outlet>

Envuelva páginas de ruta en cap-router-outlet, cap-pagey cap-contenty y setDirection('forward') o setDirection('back') ¿O

antes de navegar. No duplique los encabezados o pie de página web cuando la navegación nativa se encarga de esas superficies. Using @capgo/capacitor-native-navigation Usando @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-navegación-nativa Using @capgo/capacitor-transitions.

Usando @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transiciones

Áreas seguras con Tailwind @capgo/tailwind-capacitor @__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ tailwind-capacitor en el npm). Ofrece safe-areas utilidades y otros plugins de Tailwind compatibles con Capacitor:

bun add -D tailwind-capacitor

En src/app.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

Utiliza utilidades como pt-safe, pb-safe, y px-safe en lugar de agregarlas env(safe-area-inset-*) manualmente. El proyecto está activamente desarrollado — si algo falta para tu configuración de SvelteKit, abre una solicitud de extracción en GitHub.

Corrección de problemas de diseño de iOS (Viewport, Área Segura y Desbordamiento Horizontal)

Si el contenido parece recortado, desplazado o desplazable horizontalmente en iOS, agregar más overflow-x: hidden o ajustar la etiqueta de viewport sola no suele solucionar el problema. Trabaja a través de estas comprobaciones en orden.

Asegúrate de que la etiqueta meta de viewport se aplique correctamente

Inicia src/app.html, establece la etiqueta de meta de viewport en <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Administra el área seguro de iOS desde un solo contenedor raíz

Crear un solo contenedor de aplicación y aplicar allí el relleno de área segura — no en múltiples componentes anidados:

html,
body,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Envuelve todo el contenido de la página dentro de .app-shellEl relleno de área segura duplicado en encabezados, modales y contenedores de diseño a menudo hace que la interfaz de usuario parezca recortada o demasiado grande.

Con @capgo/tailwind-capacitorpuedes expresar el mismo relleno con utilidades como pt-safe pb-safe px-safe en ese solo contenedor.

Establece Capacitor iOS contentInset a never primero

En capacitor.config.ts, prefiere el diseño nativo deshabilitado y deja que CSS (o la navegación nativa) maneje el área segura: contentInsetMode: 'css'Mezclar el diseño de contenido automático de __CAPGO_KEEP_0__ con CSS

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'build',
  ios: {
    contentInset: 'never',
  },
};

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) Encuentra el elemento que está desbordando realmente

El culpable usual es un elemento que utiliza

, Tailwind 100vw, un ancho de píxeles fijo, o un tamaño w-screenEn Safari Web Inspector, ejecuta: min-width.

Con Tailwind, reemplaza

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

Con Tailwind, reemplaza w-screen con w-full cuando sea posible. Muchos problemas de rebosamiento horizontal provienen de 100vw / w-screenduplicado relleno de zona segura, o un contenedor de ancho fijo — no del etiqueta meta de viewport en sí misma.

Conclusion

Capacitor es una excelente opción para crear aplicaciones nativas basadas en un proyecto web existente, ofreciendo una forma sencilla de compartir code y mantener una interfaz de usuario consistente.

Y con la adición de Capgocontexto

If you would like to learn how to add Capgo to your SvelteKit app, take a look at the next article:

Learn how Capgo can help you build better apps faster, Si deseas aprender a agregar __CAPGO_KEEP_0__ a tu aplicación SvelteKit, mira el próximo artículo: Aprende cómo __CAPGO_KEEP_0__ puede ayudarte a crear aplicaciones mejoradas más rápido,

Continúa desde Crear aplicaciones móviles con SvelteKit y Capacitor

Si estás utilizando Crear aplicaciones móviles con SvelteKit y Capacitor para planificar la automatización de CI/CD, conecta con Capgo CI/CD para el flujo de trabajo del producto en Capgo CI/CD, Capgo Builds nativos para el flujo de trabajo del producto en Capgo Builds nativos, Capgo Integraciones para el flujo de trabajo del producto en Capgo Integraciones, Integración de CI/CD para el detalle de implementación en Integración de CI/CD, y GitHub Acciones de Integración para el detalle de implementación en GitHub Acciones de Integración.