Mobile Apps mit SvelteKit und Capacitor erstellen

In diesem Tutorial beginnen wir mit einer neuen SvelteKit Anwendung und wechseln zu einer nativen mobilen Entwicklung mit Capacitor. Sie können auch Capgo-Native-Navigation und -Transitions hinzufügen, um eine nativere mobile Erfahrung zu erhalten, 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 ein neues Wissen 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 jede 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 Ihnen, eine fantastische native mobile Anwendung ohne komplizierten Setup oder steilen Lernkurve zu erstellen. Seine schlanke API und gestreamte Funktionalität machen es einfach, es in Ihr Projekt zu integrieren. Sie werden sich wundern, wie einfach es ist, eine voll funktionsfähige native App mit Capacitor zu erreichen!

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

Nachdem Sie den build Befehl ausgeführt haben, sollten Sie ein neues dist Verzeichnis am Root Ihres Projekts sehen.

Dieses Verzeichnis wird später von Capacitor verwendet, aber für den Moment müssen wir es korrekt einrichten.

Capacitor in Ihre SvelteKit-Anwendung hinzufügen

Um jede Web-Anwendung in eine native mobile Container zu packen, müssen wir ein paar Anfangsschritte befolgen. Anschließend ist es so einfach, wie den Ausführung von einem einzigen sync Befehl.

Zunächst installieren Sie das Capacitor CLI als Entwicklungspaket und konfigurieren Sie es innerhalb Ihres Projekts. Während der Einrichtung können Sie „Enter“ drücken, um die Standardwerte für Namen und Bundle-ID zu akzeptieren.

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

Schließlich fügen Sie die Plattformen hinzu, und Capacitor erstellt Ordner für jede Plattform am Root Ihres Projekts:

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

To haben Sie Zugriff auf das Android-Projekt später, müssen Sie Android Studio installieren. Für iOS benötigen Sie einen Mac und sollten Xcode.

installieren. Zusätzlich sollten Sie ein capacitor.config.ts file in your project, which contains some basic Capacitor settings used during the sync. The only thing you need to pay attention to is the __CAPGO_KEEP_0__-Einstellungen enthält, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten sollten, ist die

webDir capacitor.config.ts To korrigieren, öffnen Sie das 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 vom Auto-Adapter auf 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 der svelte.config.js -Datei aktualisiert, müssen wir eine prerender -Option hinzufügen, indem wir eine +layout.js -Seite erstellen src/Routen und fügen Sie einfach folgenden Export hinzu: Nachdem Sie hinzugefügt und aktualisiert haben,:

export const prerender = true

die +layout.js Datei, wir müssen 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:

Der erste Befehl

npm run build
npx cap sync

wird Ihr SvelteKit-Projekt erstellen und die statische Build kopieren, während der zweite Befehl npm run build synchronisiert alle Web __CAPGO_KEEP_0__ in die richtigen Orte der native Plattformen, damit sie in einer App angezeigt werden können. 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.

Zusätzlich aktualisiert der Synchronisierungs-Befehl die nativen Plattformen und installiert Plugins, sodass Sie, wenn Sie neue Capacitor Plugins, es Zeit ist, npx cap sync wieder zu laufen.

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

Um iOS-Apps zu entwickeln, benötigen Sie Xcode installiert, und um Android-Apps zu entwickeln, 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

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 ein verbundenes Gerät bereitstellen, ohne dass Sie Einstellungen ändern müssen. Hier ist ein Beispiel:

In Xcode müssen Sie Ihre Signierungsanmeldung einrichten, um Ihre App auf einem realen Gerät bereitzustellen, anstatt nur auf dem Simulator. Wenn Sie dies noch nicht getan haben, führt Xcode Sie durch den Prozess (aber wiederum müssen Sie sich im Entwicklerprogramm angemeldet 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 warten Sie, es gibt auch eine schnellere Möglichkeit, dies während der Entwicklung zu tun…

Capacitor Live Reload

Indem Sie jetzt wahrscheinlich mit allen modernen Frameworks Hot Reload gewöhnt sind, ist die gute Nachricht, dass Sie die gleiche Funktionalität auf einem mobilen Gerät mit minimalen Anstrengungen haben können.

Zugriff auf Ihre lokal gehostete Anwendung mit Live Reload aktivieren On Ihrem Netzwerk Durch das Laden der Capacitor-App den Inhalt 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

Bei 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 eine weitere Eintragung in unserem 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 die richtige IP-Adresse und den Portwie im Beispiel oben gezeigt.

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

npx cap copy

Die copy command ähnelt sync, aber es wird nur die Änderungen im Web-Ordner und Konfiguration, ohne das native Projekt zu aktualisieren.

Sie können Ihre App noch einmal über Android Studio oder Xcode bereitstellen. Anschließend, wenn Sie etwas in Ihrer Svelte-Anwendung ändern wird die App automatisch neu geladen und zeigt die Änderungen an!

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

Hinweis: Sie sollten die richtige IP-Adresse und den Port in Ihrer Konfiguration verwenden. Der code-Block oben zeigt die Standard-Port für SvelteKit zur Demonstration.

Mit Capacitor-Plugins

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

npm i @capacitor/share

There ist nichts Besonderes an dem Teilen-Plugin, aber es öffnet das native Teilen-Dialog! Für dies benötigen wir nun nur noch die Verwendung des Pakets 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>

Wie bereits erwähnt, müssen wir bei der Installation neuer Plugins eine Synchronisierungsoperation durchführen und dann die App auf unserem Gerät neu bereitstellen. Dazu 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 in Aktion sehen!

Als nächstes können Sie die App auf iOS und Android mit Capgo Navigation und Übergängen noch nativer anfühlen lassen und gängige iOS-Anzeigeeinblendungsprobleme lösen, die zu horizontaler Überlauf 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 um plattformübergreifende Anwendungen zu erstellen, aber die Integration mit SvelteKit ist umständlich und selten lohnenswert, wenn Sie bereits über Tailwind CSS.

Für ein nativ auf Mobilgeräten anmutendes Design in einer SvelteKit + Capacitor-Anwendung verwenden Sie stattdessen Capgo-Plugins anstelle von web-basierten UI-Kits wie Konsta UI:

• @capgo/capacitor-native-navigation — nativer Navbar, Liquid Glass-Tasteleiste auf iOS und eine verschwommene Tasteleiste-Style auf Android. Der SvelteKit-Router hält die Routenstatus; der Plugin besitzt die native Chrome.
• @capgo/capacitor-transitions — Seitenübergänge im Ionic-Stil und iOS-Rückgabetaste auf der Edge in 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 Webinhalte die native Balken respektieren:

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

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

Rendern Sie eine Liquid Glass-Tasteleiste (iOS verwendet die Systemeigene Rendering; Android verwendet eine verschwommene WebView-Hintergrundtaste):

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>

Umranden Sie die gerouteten Seiten: cap-router-outlet, cap-pageund cap-content, und rufen Sie setDirection('forward') oder setDirection('back') vor der Navigation. Duplizieren Sie keine Web-Ober- oder -Unterschriften, wenn die native Navigation diese Ober- und Unterschriften besitzt.

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

Sichere Bereiche mit Tailwind

Für Gerätesichere Bereiche in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (als tailwind-capacitor On npm). Es bietet safe-areas Hilfsfunktionen 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 Hilfsfunktionen wie pt-safe, pb-safe, und px-safe anstatt sie env(safe-area-inset-*) manuell zu verteilen. Das Projekt wird aktiv weiterentwickelt – wenn etwas für Ihre SvelteKit-Konfiguration fehlt, Öffnen Sie ein Pull-Request auf GitHub.

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

Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar aussehen, overflow-x: hidden das Hinzufügen von mehr

oder das Anpassen der Viewport-Tags allein reicht in der Regel nicht aus, um das Problem zu beheben. Arbeiten Sie durch diese Kontrollen in der angegebenen Reihenfolge.

In src/app.html, die Viewport-Metatag einstellen in <head>:

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

Das iOS-Safe-Area von einem einzigen Root-Wrapper behandeln

Eine einzelne App-Shell erstellen und dort den Safe-Area-Padding anwenden — 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-shellEs wird oft wiederholt Safe-Area-Padding in Kopfzeilen, Modalen und Layout-Wrappern angezeigt, was die Benutzeroberfläche gekürzt oder zu groß erscheinen lässt.

Mithilfe von @capgo/tailwind-capacitorKönnen Sie denselben Padding mit Hilfsmitteln wie pt-safe pb-safe px-safe auf dieser einzelnen Shell anwenden.

Capacitor iOS contentInset auf __CAPGO_KEEP_0__ setzen never erstes

In capacitor.config.ts, bevorzugt 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 Inhaltsabstand mit CSS env(safe-area-inset-*) Padding ist eine häufige Ursache für doppelten Abstand.

Finden Sie das überlaufende Element

Der übliche Schuldige ist ein Element, das 100vw, Tailwind w-screen, einen fixen Pixelbreite oder eine große min-width.

In Safari Web Inspector, führen Sie:

[...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 With w-full wenn möglich. Viele horizontale Überschreitung von Problemen kommen von 100vw / w-screen, dupliziertes sicheres Bereichs-Puffer, oder ein fester Breite Container — nicht von der Viewport Meta-Tag selbst.

Zusammenfassung

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

Und mit der Hinzufügung von Capgo, ist es sogar einfacher, live Updates in Ihre App hinzuzufügen, um sicherzustellen, dass Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.

Wenn Sie gerne erfahren möchten, wie Sie Capgo in Ihre SvelteKit-Anwendung hinzufügen 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 erstellen, registrieren Sie sich für ein kostenloses Konto heute.

Weitermachen von Building Mobile Apps mit SvelteKit und Capacitor

Wenn Sie "__CAPGO_KEEP_0__" verwenden Building Mobile Apps mit SvelteKit und Capacitor um die CI/CD-Automatisierung zu planen, verbinden Sie es mit 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 Aktionen-Integration für die Implementierungsdetails in GitHub Aktionen-Integration.