Crear aplicaciones móviles con SvelteKit y Capacitor

In este tutorial, comenzaremos con una nueva SvelteKit aplicación y pasaremos a desarrollar aplicaciones móviles nativas utilizando Capacitor. También puedes agregar Capgo de navegación nativa y transiciones para un sentir de aplicación móvil nativa, y utilizar tailwind-capacitor para áreas de seguridad.

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.

Follow this step-by-step guide to transform your SvelteKit app into a mobile app using Capacitor, with optional Capgo Native Navigation, Transitions, and iOS layout guidance.

Sobre Capacitor

CapacitorJS es un cambio de juego! Puede integrarse fácilmente en cualquier proyecto web, envolviendo tu aplicación en una vista web nativa y generando proyectos de Xcode y Android Studio nativos para ti. Sus plugins te 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 aplicación móvil nativa fantástica sin ningún setup complicado o curva de aprendizaje pronunciada. Su API y funcionalidad simplificada lo hacen fácil de integrar en tu proyecto. Te sorprenderá la simplicidad de lograr una aplicación móvil nativa completamente funcional con Capacitor!

Preparando tu aplicación de SvelteKit

Para crear una nueva aplicación de 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 una nueva 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 de SvelteKit

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

como una dependencia de desarrollo y configúralo dentro de tu proyecto. Durante la configuración, puedes pulsar “enter” para aceptar los valores predeterminados para el nombre y el ID de la caja. Capacitor CLI Finalmente, agrega las plataformas, y __CAPGO_KEEP_0__ creará carpetas para cada plataforma en la raíz de tu proyecto:

En este punto, deberías ver nuevas

Finally, add the platforms, and Capacitor will create folders for each platform at the root of your project:

# 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

ios ios y android carpetas en tu proyecto SvelteKit.

Estos son proyectos nativos reales!

Para acceder al proyecto de Android más tarde, debes 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 Capacitor utilizadas durante la sincronización. La única cosa a la que debes prestar atención es el webDirque debe apuntar al resultado de tu comando de compilación. Actualmente, está incorrecto.

Para solucionar esto, abre el archivo capacitor.config.ts y actualiza la propiedad webDir:

import { CapacitorConfig } from '@capacitor/cli'

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

export default config

ow that we’ve updated our Capacitor settings, let’s change out Sveltekit project to a static application by downloading the proper static adapter package:

npm i -D @sveltejs/adapter-static

Ahora que hemos actualizado nuestros ajustes de __CAPGO_KEEP_0__, vamos a cambiar nuestro proyecto Sveltekit a una aplicación estática descargando el paquete adaptador estático adecuado: Después de instalar el paquete, necesitaremos alterar el archivo

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

svelte.config.js para cambiarlo del adaptador automático a estático: Con el archivo de configuración de Svelte actualizado, necesitaremos agregar un prerender opción por crear un +layout.js página a src/routes y solo agregar el siguiente export a +layout.js:

export const prerender = true

Después de agregar y actualizar el +layout.js página, necesitaremos agregar nuestras plataformas móviles, volver a construir nuestro proyecto para crear el carpeta de construcción contexto: fragmento de texto HTML de una cadena de UI de Capgo más larga (clave de la cadena `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).

Puedes hacerlo ejecutando los siguientes comandos:

npm run build
npx cap sync

El primer comando npm run build construirá tu proyecto SvelteKit y copiará la compilación estática, mientras que el segundo comando npx cap sync sincronizará todos los web code en los lugares adecuados de las plataformas nativas para que puedan ser mostrados en una aplicación.

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 darte 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 de 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 utilizar 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, necesitas configurar tu cuenta de firma para desplegar tu aplicación en un dispositivo real en lugar del simulador. Si no lo has hecho antes, Xcode te guía a través del proceso (pero otra vez, necesitas 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

Por ahora, probablemente estás acostumbrado a tener recarga caliente con todos los marcos modernos, y la buena noticia es que puedes tener la misma funcionalidad en un dispositivo móvil con un mínimo esfuerzo!

Habilite el acceso a su aplicación localmente hospedada con recarga en vivo en su red teniendo la aplicación Capacitor cargar el contenido desde la URL específica.

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

ipconfig getifaddr en0

En Windows, ejecuta:

ipconfig

Luego busque la dirección IPv4.

Puedemos instruir a Capacitor para cargar la aplicación directamente desde el servidor agregando otra entrada a nuestro capacitor.config.ts archivo:

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;

Asegúrese de utilizar la dirección IP y el puerto correctos, tal como se muestra en el ejemplo anterior.

Ahora, podemos aplicar estos cambios copiándolos a nuestro proyecto nativo:

npx cap copy

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

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

Ten en cuenta Si instala nuevos plugins como la cámara, todavía requiere una reconstrucción de su proyecto nativo. Esto es porque los archivos nativos se han modificado, y no se puede hacer en tiempo real.

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

Usando Capacitor Plugins

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

npm i @capacitor/share

No hay nada sofisticado 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 a 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, al instalar nuevos plugins, necesitamos realizar una operación de sincronización y luego volver a desplegar la aplicación en nuestro dispositivo. Para hacer esto, ejecute el siguiente comando:

npx cap sync

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

En segundo lugar, puede hacer que la aplicación se sienta más nativa en iOS y Android con Capgo de navegación y transiciones, y solucione problemas de diseño comunes de iOS que causan rebosamiento horizontal o áreas de seguridad recortadas.

Interfaz de usuario que se siente nativa con Capgo de navegación nativa y transiciones

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

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

• @capgo/capacitor-native-navigation — barra de navegación nativa, barra de pestañas de vidrio líquido en iOS y un estilo de barra de pestañas difuminado en Android. Su router SvelteKit mantiene el estado de ruta; el plugin es dueño del navegador nativo.
• @capgo/capacitor-transiciones — transiciones de página estilo Ionic y retroceso de arrastre de 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',
  },
});

Render una barra de pestañas de vidrio líquido (iOS utiliza la renderización propia del sistema; Android utiliza un fondo de vista de Web desenfocado):

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}`);
});

Agregar transiciones de página nativas en la caja de tu 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>

Envolver las páginas de ruteo en cap-router-outlet, cap-page, y cap-content, y llamar a setDirection('forward') o setDirection('back') Antes de navegar. No duplique los encabezados o pie de página de Web cuando la navegación nativa posee esas superficies.

Consulte las guías completas: Usando @capgo/capacitor-navegación-nativa y Usando @capgo/capacitor-transiciones.

Áreas seguras con Tailwind

Para áreas seguras de dispositivos en Tailwind CSS, utilice @capgo/tailwind-capacitor publicado como tailwind-capacitor en npm safe-areas Proporciona 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";

Utilice utilidades como pt-safe, pb-safe, y px-safe en lugar de esparcir 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.

Resolviendo Problemas de Diseño en 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 en sí solo no suele solucionar el problema. Pase por estas comprobaciones en orden.

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

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

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

Gestione el área segura 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);
}

Envuelva 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 esa sola caja.

Establece Capacitor iOS contentInset a never contexto: Página/área: Página de producto de actualizaciones en vivo. Rol: Etiqueta de IU breve o elemento de navegación. Clave de mensaje `live_update_dynamic_label_to` (Etiqueta dinámica de actualización en vivo a).

primero capacitor.config.tsEn contentInsetMode: 'css', prefiere el relleno nativo deshabilitado y deja que CSS (o la navegación nativa)

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-*) Mezclar el relleno automático de contenido de __CAPGO_KEEP_0__ con CSS

es una causa común de doble espaciado.

Encuentra el elemento que está desbordando en realidad 100vwEn Safari Web Inspector, ejecuta: w-screenCon Tailwind, reemplaza min-width.

con

[...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,
  }));

cuando sea posible. Muchos problemas de rebosamiento horizontal provienen de w-screen duplicado relleno de área segura, o un contenedor de ancho fijo — no del etiqueta meta de viewport en sí. w-full Conclusión 100vw / w-screen__CAPGO_KEEP_0__ es una excelente opción para crear aplicaciones nativas basadas en un proyecto web existente, ofreciendo una forma sencilla de compartir __CAPGO_KEEP_1__ y mantener una interfaz de usuario consistente.

Y con la adición de

Capacitor is an excellent option for building native applications based on an existing web project, offering a simple way to share code and maintain a consistent UI.

contexto Capgo, es aún más fácil agregar actualizaciones en vivo a tu aplicación, asegurando que tus usuarios siempre tengan acceso a las últimas características y correcciones de errores.

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

Aprende cómo Capgo puede ayudarte a crear aplicaciones mejoradas de manera más rápida regístrate en una cuenta gratuita hoy

Sigue adelante 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 CI/CD para el detalle de implementación en Integración CI/CD, y GitHub Integración de Acciones para el detalle de implementación en GitHub Integración de Acciones.