Erstellen Sie eine mobile App mit SvelteKit und Capacitor

In diesem Tutorial beginnen wir mit einer neuen SvelteKit Anwendung und wechseln zur nativen mobilen Entwicklung mit Capacitor. Sie können auch Capgo Native Navigation und Transitions hinzufügen, um einem nativen mobilen Gefühl zu entsprechen, und tailwind-capacitor für sichere Bereiche verwenden.

Capacitor ermöglicht es Ihnen, Ihre SvelteKit-Webanwendung leicht in eine native mobile App umzuwandeln, ohne dass erhebliche Änderungen oder das Erlernen einer neuen Fähigkeit wie React Native erforderlich sind.

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.

Über Capacitor

CapacitorJS ist ein Game-Changer! Es kann problemlos in jedes Web-Projekt integriert werden, indem Ihre Anwendung in eine native WebView eingeschlossen und native Xcode- und Android Studio-Projekte generiert werden. Seine Plugins bieten Zugriff auf native Gerätefeatures wie die Kamera über eine JavaScript-Brücke.

Capacitor ermöglicht es Ihnen, eine fantastische native mobile App ohne einen komplizierten Setup oder eine steile Lernkurve zu erstellen. Seine schlanken API und gestreamten Funktionen machen es leicht, ihn in Ihr Projekt zu integrieren. Sie werden sich wundern, wie einfach es ist, eine voll funktionsfähige native App mit Capacitor zu erreichen!

Dein SvelteKit-App vorbereiten

Um eine neue SvelteKit-App zu erstellen, führe bitte folgenden Befehl aus:

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

Nachdem du den Befehl ausgeführt hast, solltest du ein neues Verzeichnis am Root deines Projekts sehen. build Dieses Verzeichnis wird später von __CAPGO_KEEP_0__ verwendet, aber für den Moment müssen wir es korrekt einrichten. dist __CAPGO_KEEP_0__ zu Deiner SvelteKit-App hinzufügen

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

Zuerst installiere bitte das Capacitor __CAPGO_KEEP_1__ als Entwicklungsabhängigkeit und richte es innerhalb deines Projekts ein. Während der Einrichtung kannst du auf „Enter“ drücken, um die Standardwerte für Namen und Bundle-ID anzunehmen.

Preparing Your SvelteKit App sync To create a new SvelteKit app, run the following command:

After running the command, you should see a new folder at the root of your project. Capacitor CLI Adding __CAPGO_KEEP_0__ to Your SvelteKit App

Installieren Sie als Nächstes das Kernpaket und die relevanten Pakete für die iOS- und Android-Plattformen.

Fügen Sie schließlich die Plattformen hinzu, und Capacitor wird für jede Plattform einen Ordner im Root Ihres Projekts erstellen:

# 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

In diesem Punkt sollten Sie neue ios und android Ordner in Ihrem SvelteKit-Projekt sehen.

Das sind echte native Projekte!

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

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

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

import { CapacitorConfig } from '@capacitor/cli'

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

export default config

Nachdem 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 den svelte.config.js Datei aus dem Auto-Adapter zu statisch:

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, müssen wir eine prerender Option hinzufügen, indem wir eine +layout.js Seite in src/routes und nur die folgende Ausgabe zu +layout.js:

export const prerender = true

Nachdem wir hinzugefügt und aktualisiert haben das +layout.js Seite, müssen wir unsere mobilen Plattformen hinzufügen, unser Projekt neu aufbauen, um das build 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 wird Ihr SvelteKit-Projekt bauen und die statische Build kopieren, während der zweite Befehl npx cap sync alle Web code in die richtigen Orte der nativen Plattformen synchronisieren wird, 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 wieder

Oh, Sie haben es ohne es zu merken geschafft, also sehen wir das App auf einem Gerät!

Native Apps erstellen und bereitstellen

Um iOS-Apps zu entwickeln, 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 Program und für Android im Google Play Console anmelden.

Wenn Sie mit der Entwicklung von nativen mobilen Apps noch nicht vertraut sind, können Sie die Capacitor CLI verwenden, um beide native Projekte leicht zu öffnen:

npx cap open ios
npx cap open android

Sobald Sie Ihre native Projekte eingerichtet haben, ist die Bereitstellung 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 Ihren Signingschlüssel einrichten, um Ihre App auf einem realen Gerät bereitzustellen, anstatt nur auf dem Simulator. Wenn Sie das noch nicht gemacht haben, führt Xcode Sie durch den Prozess (aber wiederum benötigen Sie sich im Developer Program 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 sind Sie wahrscheinlich an heißen Reloads mit allen modernen Frameworks gewöhnt, und die gute Nachricht ist, dass Sie die gleiche Funktionalität auf einem mobilen Gerät mit minimalen Anstrengungen haben können!

Aktivieren Sie den Zugriff auf Ihre lokal gehostete Anwendung mit Live Reload auf Ihrem Netzwerk indem Sie die Capacitor-App laden, die Inhalte von der spezifischen URL.

Der erste Schritt besteht darin, Ihre lokale IP-Adresse zu ermitteln. Wenn Sie einen Mac verwenden, können Sie dies herausfinden, indem Sie den folgenden Befehl in der Terminal-Anwendung ausführen:

ipconfig getifaddr en0

Auf Windows ausführen:

ipconfig

Dann suchen Sie nach der IPv4-Adresse.

Wir können Capacitor anweisen, die App direkt vom Server zu laden, indem wir ein weiteres Eintrag in unserem capacitor.config.ts file:

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- und Port verwenden, wie im Beispiel oben gezeigt.

Jetzt können wir diese Änderungen anwenden, indem wir sie in unser natives Projekt übernehmen:

npx cap copy

Der copy Befehl ist ähnlich wie sync, aber er wird nur die Änderungen im Web-Ordner und die Konfiguration übernehmen, ohne das natives Projekt zu aktualisieren.

Sie können Ihre App nun noch einmal über Android Studio oder Xcode bereitstellen. Nachdem Sie dies getan haben, wird die App automatisch neu geladen und zeigt die Änderungen an!

Beachten Sie dass wenn Sie neue Plugins wie die Kamera installieren, ein Neubuild Ihres nativen Projekts erforderlich ist. Dies liegt daran, dass native Dateien geändert werden und dies nicht auf der Fliege erfolgen kann.

Note that you should use the correct IP and port in your configuration. The code block above shows the default SvelteKit port for demonstration purposes.

Verwenden Sie bitte die richtige IP-Adresse und den Port in Ihrer Konfiguration. Der Capacitor-Block oben zeigt die Standard-Port für SvelteKit zur Demonstration.

Mit Capacitor-Plugins

npm i @capacitor/share

Lassen Sie uns einen Blick darauf werfen, wie man ein __CAPGO_KEEP_0__-Plugin in Aktion verwendet, das wir vorher mehrfach erwähnt haben. Um dies zu tun, können wir ein einfaches Plugin installieren, indem wir Folgendes ausführen: Es ist nichts Besonderes an demShare-Plugin share() aber es öffnet den nativen Teilen-Dialog! Für dies benötigen wir nun nur noch die Pakete zu importieren und die Funktion in unserer App aufzurufen, also ändern wir die src/routes/index.svelte zu diesem:

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

Wie bereits erwähnt, müssen wir bei der Installation neuer Plugins eine Synchronisierungsoperation durchführen und das App dann auf unserem Gerät neu bereitstellen. Um dies durchzuführen, führen Sie bitte folgende Kommando aus:

npx cap sync

Nachdem Sie auf den Button geklickt haben, können Sie das schöne native Share-Dialog in Aktion 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-Anzeige-Probleme lösen, die zu horizontaler Überschreitung oder gekürzten sicheren Bereichen führen.

Natürliche Benutzeroberfläche mit Capgo Native Navigation und Übergängen

Ich habe in den letzten Jahren mit Ionic Kreuzplattform-Anwendungen entwickelt, aber die Integration mit SvelteKit ist hackig und selten wertvoll, wenn Sie bereits Tailwind CSS.

Für einen nativen mobilen Look in einer SvelteKit + Capacitor App verwenden Sie stattdessen Capgo-Plugins anstelle von web-only UI-Kits wie Konsta UI:

• @capgo/capacitor-native-navigation — native Navbar, Liquid Glass Tabbar auf iOS und ein abgetönter Tabbar-Stil auf Android. Ihr SvelteKit-Router hält Routenstatus; der Plugin besitzt die native Chrome.
• @capgo/capacitor-Übergänge — Seitenübergänge im Ionic-Stil und iOS-Rück-Edge-Swipe im 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 Webinhalte die native Balken respektieren:

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

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

Rendern Sie einen Liquid Glass Tabbar (iOS verwendet die Systemeigene Rendering; Android verwendet einen abgetönten 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 hinzu:

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

Umfasst die gerouteten Seiten in cap-router-outlet, cap-page, und cap-content, und rufen Sie setDirection('forward') oder setDirection('back') vor der Navigation auf. Duplizieren Sie Web-Über- oder Fußzeilen nicht, wenn die native Navigation diese Oberflächen besitzt.

Siehe die vollständigen Anleitungen: Mit @capgo/capacitor-native-navigationsystem und Mit @capgo/capacitor-Übergänge.

Sichere Bereiche mit Tailwind

Für Gerätesichere Bereiche in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (veröffentlicht als tailwind-capacitor auf npm). Es bietet safe-areas Nutzfunktionen und andere Capacitor-freundliche Tailwind-Plugins:

bun add -D tailwind-capacitor

In src/app.css:

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

Verwenden Sie Nutzfunktionen wie pt-safe, pb-safeund px-safe anstatt, dass man es env(safe-area-inset-*) entwickelt wird — wenn etwas für Ihre SvelteKit-Konfiguration fehlt, Öffnen Sie einen PR auf GitHub.

iOS-Layoutprobleme beheben (Viewport, Safe Area und horizontale Überschuss)

Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar aussehen, overflow-x: hidden oder die Anpassung des Viewport-Tags allein reicht normalerweise nicht aus. Arbeiten Sie durch diese Kontrollen in der Reihenfolge.

Stellen Sie sicher, dass der Viewport-Meta-Tag korrekt angewendet wird

In src/app.html, setzen Sie den Viewport-Meta-Tag in <head>:

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

Behandeln Sie das iOS-Safe-Area aus einer einzigen Root-Wrapper

Erstellen Sie ein einzelnes App-Shell und fügen Sie dort Safe-Area-Padding hinzu — nicht in mehreren verschachtelten Komponenten:

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

Alle Seiteninhalte innerhalb von .app-shellDoppelte sichere Bereichsabstände in Kopfzeilen, Modalen und Layout-Wrappern machen die Benutzeroberfläche oft gekürzt oder zu groß aussehen.

Mit @capgo/tailwind-capacitor, können Sie denselben Abstand mit Hilfsfunktionen wie pt-safe pb-safe px-safe auf dieser einzelnen Shell ausdrücken.

Setzen Sie Capacitor iOS contentInset auf never erst

In capacitor.config.ts, bevorzugen Sie native Inset deaktiviert 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-*) Ein zu großes Padding ist eine häufige Ursache für doppelte Abstände.

Finden Sie das überlaufende 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ühren Sie 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 ersetzen Sie w-screen mit w-full sofern möglich. Viele horizontale Überlaufprobleme kommen von 100vw / w-screen, dupliziertem sicherem Abstand oder einem fixbreiten Container — nicht von der Viewport-Metatag selbst.

Zusammenfassung

Capacitor ist eine hervorragende Option für die Erstellung nativer 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 Hinzufügung von Capgo, ist es noch einfacher, Live-Updates in Ihrer App hinzuzufügen, sodass Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.

Wenn Sie gerne erfahren möchten, wie Sie Capgo in Ihrer SvelteKit-Anwendung hinzufügen können, nehmen Sie einen Blick auf das nächste Artikel:

Lernen Sie, wie Capgo Ihnen helfen kann, bessere Apps schneller zu erstellen. Registrieren Sie sich für ein kostenloses Konto heute.

Fortsetzen Sie von 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 Capacitor __CAPGO_KEEP_1__ Capgo CI/CD für den Produktworkflow in Capgo CI/CD, Capgo Native Builds für den Produktworkflow in Capgo Native Builds, Capgo Integrations für den Produktworkflow in Capgo Integrations, CI/CD-Integration für die Implementierungsdetails in CI/CD-Integration, und GitHub Actions-Integration für die Implementierungsdetails in GitHub Actions-Integration.