Building Mobile Apps with SvelteKit and Capacitor

In diesem Tutorial beginnen wir mit einer neuen 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 allows you to easily convert your SvelteKit web application into a native mobile app without the need for significant modifications or learning a new skill like 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.

About Capacitor

CapacitorJS ist ein Game-Changer! Es kann problemlos in jede Web-Projekt integriert werden, indem Ihre Anwendung in eine native Webview eingehüllt wird und native Xcode- und Android-Studio-Projekte generiert werden.

Capacitor enables you to create a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it easy to integrate into your project. You’ll be amazed at how simple it is to achieve a fully functional native app with Capacitor!

Vorbereitung Ihrer SvelteKit-Anwendung

Um eine neue SvelteKit-Anwendung zu erstellen, führen Sie den folgenden Befehl aus:

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

After Ausführung des build Kommandos, sollten Sie ein neues dist Ordner am Wurzelort Ihres Projekts sehen.

This folder will be used by Capacitor later, but for now, we need to set it up correctly.

Adding Capacitor to Your SvelteKit App

Um jede Web-Anwendung in einen nativen mobilen Container zu packen, müssen wir einige Schritte ausführen. Anschließend ist es so einfach wie das Ausführen eines einzigen sync Kommandos.

Zuerst installieren Sie Capgo und Capacitor als Entwicklungszusammenhänge und richten sie innerhalb Ihres Projekts ein. Während der Einrichtung können Sie auf "Enter" drücken, um die Standardwerte für Name und Bundle-ID zu akzeptieren. Capacitor CLI Schließlich fügen Sie die Plattformen hinzu, und Capgo erstellt Ordner für jede Plattform am Wurzelort Ihres Projekts:

__CAPGO_KEEP_0__

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

Sie sollten jetzt neue ios und android Ordner in Ihrem SvelteKit-Projekt finden.

Diese sind echte native Projekte!

Um auf das Android-Projekt später zuzugreifen, müssen Sie installieren.Für iOS benötigen Sie einen Mac und sollten installieren..

Darüber hinaus sollten Sie ein capacitor.config.ts Datei in Ihrem Projekt, die einige grundlegende Capacitor Einstellungen enthält, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten müssen, ist das webDirder auf das Ergebnis Ihres Build-Befehls verweisen muss. Derzeit ist dies jedoch falsch.

Um dies zu beheben, öffnen Sie die capacitor.config.ts Datei und aktualisieren Sie die webDir:

import { CapacitorConfig } from '@capacitor/cli'

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

export default config

Da wir unsere Capacitor Einstellungen aktualisiert haben, lassen wir unser Sveltekit-Projekt zu einer statischen Anwendung umwandeln, indem wir das entsprechende statische Adapter-Paket herunterladen:

npm i -D @sveltejs/adapter-static

Nachdem das Paket installiert ist, müssen wir das svelte.config.js Datei von der Auto-Adapter zu statisch ändern:

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

Mit dem svelte.config.js aktualisiert, wir müssen eine Vorabrender Option durch die Erstellung einer +layout.js Seite zu src/routes und fügen einfach die folgende Ausgabe zu +layout.js:

export const prerender = true

Nachdem wir hinzugefügt und aktualisiert haben +layout.js Seite, müssen wir unsere mobilen Plattformen hinzufügen, unser Projekt neu aufbauen, um die erstellen Ordner

Sie können es tun, indem Sie die folgenden Befehle ausführen:

npm run build
npx cap sync

Der erste Befehl npm run build werden Ihr SvelteKit-Projekt erstellen und die statische Ausgabe kopieren, während der zweite Befehl npx cap sync alle Web code in die richtigen Orte der nativen Plattformen synchronisieren, damit sie in einer App angezeigt werden können.

Zusätzlich kann der Synchronisierungs-Befehl die nativen Plattformen aktualisieren und Plugins installieren, sodass, wenn Sie neue Capacitor-Pluginsinstallieren, es Zeit ist, npx cap sync erneut auszuführen.

Ohne es zu merken, haben Sie den Prozess nun abgeschlossen, also sehen wir uns das App auf einem Gerät an!

Erstellen und Bereitstellen von nativen Apps

To entwickeln Sie iOS-Apps, benötigen Sie Xcode installiert, und für Android-Apps benötigen Sie Android Studio installiert. Darüber hinaus müssen Sie, wenn Sie Ihre App im App-Store verteilen möchten, sich für iOS im Apple Developer Programm und für Android im Google Play Console anmelden.

Wenn Sie neu bei der nativen mobilen Entwicklung sind, können Sie die Capacitor CLI verwenden, um beide native Projekte leicht zu öffnen:

npx cap open ios
npx cap open android

Nachdem Sie Ihre native Projekte eingerichtet haben, ist das Bereitstellen Ihrer App auf einem verbundenen Gerät einfach. In Android Studio müssen Sie nur auf alles warten, bis alles bereit ist, und Sie können Ihre App auf einem verbundenen Gerät bereitstellen, ohne dass Sie Einstellungen ändern müssen. Hier ist ein Beispiel:

In Xcode müssen Sie Ihre Signierungsaccount einrichten, um Ihre App auf einem echten Gerät bereitzustellen, anstatt nur auf dem Simulator. Wenn Sie dies noch nicht getan haben, führt Xcode Sie durch den Prozess (aber wiederum benötigen Sie sich im Developer Programm angemeldet zu haben). Anschließend können Sie einfach auf 'Play' klicken, um die App auf Ihrem verbundenen Gerät auszuführen, das Sie oben auswählen können. Hier ist ein Beispiel:

Herzlichen Glückwunsch! Sie haben erfolgreich Ihre SvelteKit-Web-App auf einem mobilen Gerät bereitgestellt. Hier ist ein Beispiel:

Aber wartet, es gibt auch eine schnellere Möglichkeit, dies während der Entwicklung zu tun…

Capacitor Live Reload

Bis jetzt bist du wahrscheinlich an heißen Reloads mit allen modernen Frameworks gewöhnt und die gute Nachricht ist, dass du die gleiche Funktionalität auf einem mobilen Gerät mit minimalen Anstrengungen erhalten kannst!

Aktiviere den Zugriff auf deine lokal gehostete Anwendung mit Live Reload auf deinem Netzwerk indem du die Capacitor-App so einrichtest, dass sie den Inhalt von der spezifischen URL lädt.

Der erste Schritt besteht darin, deine lokale IP-Adresse zu ermitteln. Wenn du einen Mac verwendest, kannst du dies herausfinden, indem du den folgenden Befehl in der Terminal-Anwendung ausführst:

ipconfig getifaddr en0

Bei Windows ausführen:

ipconfig

Dann such nach der IPv4-Adresse.

Wir können Capacitor anweisen, die App direkt vom Server zu laden, indem wir eine weitere Eintragung in unsere capacitor.config.ts Datei:

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;

Stellen Sie sicher, dass Sie den richtigen IP-Adresse und Port verwenden wie im Beispiel oben gezeigtJetzt können wir diese Änderungen übernehmen, indem wir sie in unser natives Projekt kopieren

Der

npx cap copy

Befehl ähnelt sich copy aber wird nur syncdie Änderungen im Web-Ordner und der Konfiguration übernehmen, ohne das natives Projekt zu aktualisieren Sie können Ihre App nun ein weiteres Mal über Android Studio oder Xcode bereitstellen. Nachdem Sie dies getan haben, wird sich die App automatisch neu laden, wenn Sie etwas in Ihrer Svelte-Anwendung ändern Beispiel

Befehl native und zeigen Sie die Änderungen!

Bedenken Sie dass Sie bei der Installation neuer Plugins wie der Kamera immer noch eine Neuverteilung Ihres nativen Projekts benötigen. Dies liegt daran, dass native Dateien geändert werden und dies nicht auf der Flugschreibe erfolgen kann.

Hinweis: Verwenden Sie bitte die richtige IP-Adresse und den Port in Ihrer Konfiguration. Der code-Block oben zeigt die Standard-Portnummer von SvelteKit für Demonstrationszwecke an.

Verwendung von Capacitor-Plugins

Lassen Sie uns nun einen Blick darauf werfen, wie man ein Capacitor-Plugin in Aktion verwendet, das wir bereits mehrfach erwähnt haben. Um dies zu tun, können wir ein einfaches Plugin installieren, indem wir Folgendes ausführen:

npm i @capacitor/share

Es ist nichts Besonderes an dem Teilen-Plugin, aber es öffnet den nativen Teilen-Dialog! Für dies benötigen wir nun nur noch die Paketimport und die Aufruf der share() Funktion aus unserer App, also ändern wir das src/routes/index.svelte in Folgendes:

<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>

As erwähnt, müssen wir bei der Installation neuer Plugins eine Synchronisierung durchführen und die App dann auf unserem Gerät neu bereitstellen. Um dies durchzuführen, führen Sie bitte folgenden Befehl aus:

npx cap sync

Nachdem Sie auf den Button geklickt haben, können Sie das schöne native Teilen-Dialog sehen!

Als nächstes können Sie die App mit Capgo Navigation und Übergängen noch nativer auf iOS und Android anfühlen und häufige iOS-Anzeigefehler beheben, die zu horizontaler Überschreitung oder gekürzten sicheren Bereichen führen.

Nativ anfühlen UI mit Capgo Native Navigation und Übergängen

Im Laufe der Jahre habe ich mich mit Ionic beschäftigt, um cross-plattformische Anwendungen zu erstellen, aber die Integration mit SvelteKit ist hackig und selten wertvoll, wenn Sie bereits Tailwind CSS.

For a native mobile feel in a SvelteKit + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

• Für einen nativen mobilen Look in einer SvelteKit + capgo-App verwenden Sie stattdessen capacitor-Plugins anstelle von web-only UI-Kits wie Konsta UI: @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation
• @capgo/capacitor-transitions --- Ionische-Seitenübergänge und iOS-Rückgabetasten am Rand der WebView-Schicht, ohne Ionic-UI zu übernehmen.

Installieren Sie beide:

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

Konfigurieren Sie die native Navigation mit CSS-Inset-Modus, damit das Webinhalts die native Balken respektiert:

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

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

Rendern Sie eine flüssige Glas-Tastenleiste (iOS verwendet die Systemeigene Rendering; Android verwendet einen verschwommenen WebView-Hintergrund):

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

Fügen Sie native Seitenübergänge in Ihrem App-Shell ein:

<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>

Wrap routed Pages in cap-router-outlet, cap-pageund cap-contentund rufen Sie setDirection('forward') oder setDirection('back') Beachten Sie die vollständigen Anleitungen:

Verwenden Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-Navigation Using @capgo/capacitor-native-navigation und @capgo/capacitor-Übergänge.

Sichere Bereiche mit Tailwind

Für die Gerätesichere Bereiche in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (als tailwind-capacitor auf npm). Es bietet safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

, und src/app.css:

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

anstatt pt-safe, pb-safeanstatt px-safe anstatt env(safe-area-inset-*) per Hand. Das Projekt wird aktiv weiterentwickelt — wenn etwas für Ihre SvelteKit-Konfiguration fehlt, Öffnen Sie einen PR auf GitHub.

iOS-Bereichsprobleme beheben (Viewport, sichere Fläche und horizontale Überschreitung)

Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar sind, hilft es oft nicht, nur den Viewport-Tag zu ändern. Arbeiten Sie durch diese Kontrollen in der Reihenfolge. overflow-x: hidden Stellen Sie sicher, dass der Viewport-Meta-Tag korrekt angewendet wird

In

, setzen Sie den Viewport-Meta-Tag in src/app.htmlBehandeln Sie die iOS-sichere Fläche von einem einzigen Root-Wrapper aus <head>:

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

Erstellen Sie ein einzelnes App-Shell und fügen Sie dort die sichere Flächenabstände hinzu — nicht in mehreren verschachtelten Komponenten:

Umfasst alle Seite-Inhalte innerhalb von

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

Zweifach angebrachte sichere-Flächenabstände in Kopfzeilen, Modalen und Layout-Wrapper können die Benutzeroberfläche gekürzt oder zu groß erscheinen lassen. .app-shellFixing iOS Layout Issues (Viewport, Safe Area, and Horizontal Overflow)

With @capgo/tailwind-capacitor, Sie können denselben Abstand mit Hilfsmitteln wie pt-safe pb-safe px-safe auf dieser einzelnen Shell.

Setzen Sie Capacitor iOS contentInset auf never erst

In capacitor.config.ts, bevorzugt native inset disabled und lassen Sie CSS (oder Native Navigation’s contentInsetMode: 'css') den sicheren Bereich besitzen:

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

Mischen Sie Capacitor’s automatische Inhaltsabstände mit CSS env(safe-area-inset-*) Padding ist eine häufige Ursache für doppelten Abstand.

Finde das überfließende Element

Der übliche Täter ist ein Element, das 100vw, Tailwind w-screen, eine fixe Pixelbreite oder eine große min-width.

In Safari Web Inspector, führe aus:

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

Mit Tailwind ersetze w-screen mit w-full wenn möglich. Viele horizontale Überflussprobleme kommen von 100vw / w-screen, dupliziertem sicheren Bereichsabstand oder einem fixbreiten Container — nicht von der Viewport-Meta-Tags selbst.

Fazit

Capacitor ist eine hervorragende Option für die Erstellung von nativen Anwendungen auf der Basis eines bestehenden Web-Projekts, die eine einfache Möglichkeit bietet, code zu teilen und eine konsistente Benutzeroberfläche zu erhalten.

Und mit der Zugabe von CapgoEs ist sogar einfacher, live Updates in Ihre App zu hinzufügen, sodass Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.

Wenn Sie gerne wissen möchten, wie Sie Capgo in Ihre SvelteKit-App einbinden können, nehmen Sie einen Blick auf das nächste Artikel:

Erhalten Sie Informationen darüber, wie Capgo Ihnen helfen kann, bessere Apps schneller zu bauen. Registrieren Sie sich für ein kostenloses Konto heute.

Fortsetzen Sie mit Building Mobile Apps mit SvelteKit und Capacitor

Wenn Sie Building Mobile Apps mit SvelteKit und __CAPGO_KEEP_0__ verwenden, um die CI/CD-Automatisierung zu planen, verbinden Sie es mit __CAPGO_KEEP_0__ CI/CD Capacitor CI/CD __CAPGO_KEEP_0__ CI/CD Capgo CI/CD Capgo CI/CD Capgo Native Builds für das Produktworkflow in Capgo Native Builds Capgo Integrations für das Produktworkflow in Capgo Integrations CI/CD-Integration für die Implementierungsdetail in CI/CD-Integration, und GitHub Actions-Integration für die Implementierungsdetail in GitHub Actions-Integration