Mobile Apps mit SvelteKit und Capacitor erstellen

In diesem Tutorial beginnen wir mit einer neuen SvelteKit Anwendung und wechseln zu nativen Mobilentwicklungen mit Capacitor. Sie können auch Capgo Native Navigation und Transitions hinzufügen, um ein nativ anführendes Mobilgeräusch zu erhalten, und tailwind-capacitor für sichere Bereiche verwenden.

Capacitor ermöglicht Ihnen, Ihre SvelteKit-Webanwendung leicht in eine native Mobilanwendung umzuwandeln, ohne dass Sie bedeutende Änderungen oder ein neues Wissen wie React Native benötigen.

Folgen Sie diesem Schritt-für-Schritt-Leitfaden, um Ihre SvelteKit-Anwendung in eine Mobilanwendung mit Capacitor umzuwandeln, mit optionalen Capgo-Native-Navigation, -Übergängen und iOS-Layout-Leitfäden.

Ü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 Ihnen, eine fantastische native Mobilanwendung ohne komplizierte Einstellungen oder steile 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 eine neue dist Ordner am Wurzelverzeichnis Ihres Projekts.

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-App 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 Befehls. sync Zuerst installieren Sie die

Capacitor und Capacitor CLI Als nächstes installieren Sie 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 Wurzelverzeichnis Ihres Projekts:

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 und Android Ordner in Ihrem SvelteKit-Projekt.

Diese sind echte native Projekte!

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

Darüber hinaus 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"-Einstellung., das auf das Ergebnis Ihres Build-Befehls verweist. Derzeit ist es falsch.

Um dies zu beheben, öffnen Sie das 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

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

HTML-Textfragment aus einer längeren Capgo-UI-Zeichenfolge (Übergeordneter Schlüssel `solutions_cordova_to_capacitor_ai_step2_body`). Seite/Bereich: Capgo-Lösungen-Marketingseite. Rolle: Website-Kopfsatz. Gesehen in: Seite solutions/cordova-to-capacitor-ai.astro. Nachrichtenschlüssel `solutions_cordova_to_capacitor_ai_step2_body` (Lösungen Cordova To Capacitor Ai Step2 Body). Da wir unsere __CAPGO_KEEP_0__

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

Einstellungen aktualisiert haben, lassen wir unser Sveltekit-Projekt zu einer statischen Anwendung umwandeln, indem wir das richtige statische Adapter-Paket herunterladen: Nachdem das Paket installiert ist, müssen wir das svelte.config.js prärender Option durch Erstellung einer +layout.js Seite zu src/routes und fügen Sie einfach folgenden Export zu +layout.js:

export const prerender = true

Nachdem Sie hinzugefügt und aktualisiert haben +layout.js Seite, müssen wir unsere mobilen Plattformen hinzufügen, unser Projekt neu aufbauen, um die 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 baut Ihr SvelteKit-Projekt und kopiert die statische Build, während der zweite Befehl npx cap sync alle Web code in die richtigen Orte der nativen Plattformen synchronisiert, damit sie in einer App angezeigt werden können.

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

Ohne es zu merken, haben Sie nun den Prozess 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 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 mit der Entwicklung von nativen Mobilanwendungen neu sind, können Sie die Capacitor CLI verwenden, um beide native Projekte leicht zu öffnen:

npx cap open ios
npx cap open android

Einmal Ihre native Projekte eingerichtet, 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 Ihre Signierungsanmeldung einrichten, um Ihre App auf einem echten Gerät bereitzustellen und nicht 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 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:

Glückwunsch! Sie haben erfolgreich Ihre SvelteKit-Web-App auf einem Mobilgerä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

Mit der Zeit bist du wahrscheinlich daran gewöhnt, dass du Hot Reload mit allen modernen Frameworks hast, und die gute Nachricht ist, dass du dieselbe Funktionalität auf einem mobilen Gerät mit minimalen Anstrengungen!

Zugriff auf deine lokal gehostete Anwendung mit Live Reload auf deinem Netzwerk erhalten, indem du die Capacitor-App dazu bringst, die Inhalte von der spezifischen URL zu laden.

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 im Terminal ausführst:

ipconfig getifaddr en0

Bei Windows ausführen:

ipconfig

Such dann 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 hinzufügen:

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;

Stelle sicher, dass du die korrekte IP-Adresse und den Port, wie im Beispiel oben gezeigt.

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

npx cap copy

Das copy Der Befehl ähnelt sich sync, aber er wird nur die Änderungen im Web-Ordner und der Konfiguration übernehmen, ohne das natives Projekt zu aktualisieren. Sie können Ihre App nun noch einmal über Android Studio oder Xcode bereitstellen. Anschließend wird, wenn Sie etwas in Ihrer Svelte-Anwendung ändern,

die App automatisch neu geladen und die Änderungen angezeigt! Beachten Sie

dass Wenn Sie neue Plugins wie das Kamera-Plugin installieren, ist eine Neuverteilung Ihres native Projekts erforderlich. Dies liegt daran, dass native Dateien geändert werden und dies nicht auf der Flugschleife erfolgen kann.

Hinweis: Verwenden Sie bitte die richtige IP-Adresse und den richtigen Port in Ihrer Konfiguration. Der code-Block oben zeigt die Standard-Portnummer von SvelteKit zur Demonstration.

Verwendung von Capacitor-Plugins

Lassen Sie uns nun sehen, 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 folgenden Befehl ausführen:

npm i @capacitor/share

Es ist nichts Besonderes an dem Teilen-Plugin, aber es öffnet den native Teilen-Dialog! share() Für dies benötigen wir nur noch die Paketimport und die Aufruf der Funktion aus unserer App, also ändern wir den

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

src/routes/index.svelte

npx cap sync

zu diesem:

Als nächstes können Sie die App so gestalten, dass sie sich auf iOS und Android nativer anfühlt, mit Capgo Navigation und Übergängen, und Probleme mit der iOS-Layouts lösen, 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 mit Ionic gearbeite, um cross-plattformische Anwendungen zu erstellen, aber die Integration mit SvelteKit ist hackig und selten wertvoll, wenn Sie bereits Tailwind CSS.

haben. Für einen nativen mobilen Look in einer SvelteKit + Capacitor-Anwendung verwenden Sie anstatt web-only UI-Kits wie Konsta UI Capgo-Plugins:

• @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 — Ionic-Style-Seitenübergänge 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 eine Glass-Liquid-Tasteleiste (iOS verwendet die Systemeigene Rendertechnik; 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 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>

Umgehen Sie die gerouteten Seiten mit cap-router-outlet, cap-pageund cap-contentund rufen Sie setDirection('forward') oder setDirection('back') Konfigurieren Sie die native Navigation mit CSS-Inset-Modus, damit Webinhalte die native Balken respektieren, bevor Sie navigieren. Duplizieren Sie Web-Überschriften oder -Fußzeilen nicht, wenn die native Navigation diese Oberflächen besitzt.

Sehen Sie sich die vollständigen Anleitungen an: Mit @capgo/capacitor-native-Navigation und Mit @capgo/capacitor-Übergängen.

Sichere Bereiche mit Tailwind

Für sichere Bereiche auf Geräten in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor veröffentlicht als tailwind-capacitor auf npm safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

Nutzfunktionen und andere __CAPGO_KEEP_0__-freundliche Tailwind-Plugins: src/app.css:

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

In pt-safe, pb-safeVerwenden Sie Nutzungen wie px-safe , und env(safe-area-inset-*) anstatt sie manuell zu verteilen. Das Projekt wird aktiv weiterentwickelt — wenn etwas für Ihre SvelteKit-Konfiguration fehlt, öffnen Sie einen PR auf GitHub.

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

Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar aussehen, hilft das Hinzufügen oder Ändern des Viewport-Tags normalerweise nicht. Arbeiten Sie durch diese Kontrollen in der Reihenfolge. overflow-x: hidden Stellen Sie sicher, dass die Viewport-Metatag korrekt angewendet wird

In

, setzen Sie den Viewport-Metatag 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 wenden Sie dort die sichere Flächenabstände an — nicht in mehreren verschachtelten Komponenten:

Verwenden Sie alle Seiteninhalte 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);
}

Doppelte sichere-Flächenabstände in Kopfzeilen, Modalen und Layout-Wrapper können die Benutzeroberfläche gekürzt oder zu groß aussehen lassen. .app-shellMit

@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitorSind Sie in der Lage, denselben Abstand mit Hilfsfunktionen wie pt-safe pb-safe px-safe auf dieser einzelnen Shell.

Setzen Sie Capacitor iOS contentInset zu never erst

auf 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 Inhaltsabstand mit CSS env(safe-area-inset-*) padding ist eine häufige Ursache für doppelten Abstand.

Finden Sie das überlaufende Element

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

In Safari Web Inspector, ausführen:

[...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 Wenn möglich. Viele horizontale Überlaufprobleme kommen von 100vw / w-screen, duplizierter sichere Bereich-Padding oder einem festschrittigen Container — nicht von der Viewport-Meta-Tags selbst.

Zusammenfassung

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 Ergänzung von Capgo, ist es sogar einfacher, live Aktualisierungen in Ihre 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 Ihre SvelteKit-Anwendung integrieren können, sollten Sie sich die nächste Artikel ansehen:

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

Fortsetzen Sie mit Building Mobile Apps with SvelteKit und Capacitor.

Wenn Sie Building Mobile Apps with SvelteKit und __CAPGO_KEEP_0__ verwenden, um die CI/CD-Automatisierung zu planen, verbinden Sie es mit __CAPGO_KEEP_0__ CI/CD. Für den Produktworkflow in Capacitor CI/CD. __CAPGO_KEEP_0__ Native Builds. Für den Produktworkflow in Capgo Native Builds. Capgo kann Ihnen dabei helfen, bessere Apps schneller zu erstellen. Capgo CI/CD Capgo Native Builds Capgo Integrations zur Produktionsablauf in Capgo Integrations CI/CD-Integration zur Implementierungsdetail in CI/CD-Integration, und GitHub Aktionen-Integration zur Implementierungsdetail in GitHub Aktionen-Integration.