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.
Über Capacitor
CapacitorJS ist ein echter Game-Changer! Es kann problemlos in jede Web-Projekt integriert werden, indem es Ihre Anwendung in eine native WebView einhüllt und native Xcode- und Android Studio-Projekte für Sie generiert. 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 komplizierten Setup oder steile Lernkurve zu erstellen. Sein schlanker API und gestreamteter Funktionsumfang 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 bitte folgenden Befehl aus:
npm create svelte@latest my-app
cd my-app
npm install
npm run buildNachdem Sie den build Befehl ausgeführt haben, sollten Sie ein neues dist Ordner am Wurzelort Ihres Projekts sehen.
Dieser Ordner wird später von Capacitor verwendet, aber für den Moment müssen wir ihn korrekt einrichten.
Capacitor in Ihre SvelteKit-Anwendung hinzufügen
Um jede Web-Anwendung in einen native mobile Container zu packen, müssen wir einige erste Schritte befolgen. Anschließend ist es so einfach, wie den Ausführung eines einzigen sync Befehls.
Zuerst installieren Sie das Capacitor CLI als Entwicklungspaket und konfigurieren Sie es innerhalb Ihres Projekts. Während der Einrichtung können Sie auf "Enter" drücken, um die Standardwerte für Name und Bundle-ID zu akzeptieren.
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 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 androidAn diesem Punkt sollten Sie neue ios und android Ordner in Ihrem SvelteKit-Projekt.
Diese sind echte native Projekte!
Um auf das Android-Projekt später zuzugreifen, müssen Sie es installieren Android StudioFür iOS benötigen Sie einen Mac und sollten Xcode installieren Xcode.
Zusätzlich sollten Sie ein capacitor.Konfigurationsdatei 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.Konfigurationsdatei 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 configNachdem wir unsere Capacitor Einstellungen aktualisiert haben, lassen wir unser Sveltekit-Projekt zu einem statischen Anwendungsprojekt umwandeln, indem wir das entsprechende statische Adapter-Paket herunterladen:
npm i -D @sveltejs/adapter-staticNachdem 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 configMit der svelte.config.js aktualisiert, müssen wir eine prerender Option hinzufügen, indem wir eine +layout.js Seite in src/Routen And fügen Sie einfach folgenden Export hinzu zu +layout.js:
export const prerender = trueNachdem Sie hinzugefügt und aktualisiert haben die +layout.js Seite, müssen wir unsere mobilen Plattformen, unsere Projekt neu aufbauen, um die Erstellung Ordner
Sie können es tun, indem Sie die folgenden Befehle ausführen:
npm run build
npx cap syncDer erste Befehl npm run build werden Ihr SvelteKit-Projekt bauen und die statische Erstellung kopieren, während der zweite Befehl npx cap sync alle Web code synchronisieren, in die richtigen Orte der nativen Plattformen, 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-Plugins, es ist Zeit, loszulegen npx cap sync Wieder.
Ohne es zu merken, hast du den Prozess nun abgeschlossen, also sehen wir das App auf einem Gerät!
Erstellen und Bereitstellen von nativen Apps
Um iOS-Apps zu entwickeln, benötigst du Xcode installiert, und für Android-Apps benötigst du Android Studio installiert. Darüber hinaus musst du, wenn du deine App im App Store verteilen möchtest, dich für iOS im Apple Developer Programm und für Android im Google Play Console anmelden.
Wenn du neu bei der nativen mobilen Entwicklung bist, kannst du die Capacitor CLI verwenden, um beide native Projekte leicht zu öffnen:
npx cap open ios
npx cap open androidEinmal eingerichtet, ist das Bereitstellen deiner App auf einem verbundenen Gerät einfach. In Android Studio musst du nur abwarten, bis alles bereit ist, und du kannst deine App auf einem verbundenen Gerät bereitstellen, ohne dass du Einstellungen ändern musst. Hier ist ein Beispiel:
Um in Xcode eine Signierungsanmeldung einzurichten, um die App auf einem echten Gerät zu deployen, anstatt nur auf dem Simulator, müssen Sie die Einstellungen einrichten. 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 wartet, es gibt auch eine schnellere Möglichkeit, dies während der Entwicklung zu tun…
Capacitor Live Reload
Mit dieser Funktion können Sie die gleiche Funktionalität wie Hot Reload mit allen modernen Frameworks auf einem mobilen Gerät haben, mit minimalen Anstrengungen! auf einem mobilen Gerät mit minimaler Anstrengung!
Zugriff auf Ihre lokal gehostete Anwendung mit Live Reload auf Ihrem Netzwerk durch die Capacitor-App laden Sie 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 en0Führen Sie auf Windows aus:
ipconfigDann 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 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 die richtige IP-Adresse und den Port verwendenwie im Beispiel oben gezeigt.
Jetzt können wir diese Änderungen anwenden, indem wir sie in unsere native Projekt kopieren:
npx cap copyDer copy Befehl ähnelt sich syncaber es wird nur Übertragen Sie die Änderungen im Web-Ordner. und Konfiguration, ohne die native Projekt zu aktualisieren.
Sie können Ihre App nun noch einmal über Android Studio oder Xcode bereitstellen. Nachdem Sie danach in Ihrer Svelte-Anwendung etwas geändert haben, die App wird automatisch neu geladen und zeigt die Änderungen an!
Beachten Sie dass, wenn Sie neue Plugins wie die Kamera installieren, noch eine Rebuild Ihres 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 an.
Verwendung von Capacitor-Plugins
Schauen wir uns an, wie man ein Capacitor-Plugin in Aktion verwendet, von dem wir bereits mehrfach gesprochen haben. Dazu können wir ein einfaches Plugin installieren, indem wir Folgendes ausführen:
npm i @capacitor/shareEs ist nichts Besonderes an der Plugin teilenAber es öffnet den native Share Dialog! Für dies müssen wir nur das Paket importieren und die Funktion aufrufen. share() Funktion in unserer App aufrufen, also ändern wir das src/routes/index.svelte wie folgt:
<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 die App dann auf unserem Gerät neu bereitstellen. Dazu führen Sie bitte folgende Befehl aus:
npx cap syncNachdem Sie auf den Button geklickt haben, können Sie den schönen nativen Teilen-Dialog in Aktion erleben!
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 Überlauf oder gekürzten sicheren Bereichen führen.
Natürliche Benutzeroberfläche mit Capgo Native Navigation und Übergängen
Jahre lang habe ich mit Ionic Um cross-plattform-Anwendungen zu erstellen, aber die Integration mit SvelteKit ist umständlich und lohnt sich in der Regel nicht, wenn man bereits } Tailwind CSS.
Für eine nativ anmutende App in einer SvelteKit + Capacitor-Anwendung verwenden Sie Capgo-Plugins anstelle von web-only UI-Kits wie Konsta UI:
- @capgo/capacitor-native-navigations — nativ gestaltete Navbar, Liquid Glass Tab-Leiste auf iOS und eine verschwommene Tab-Leiste-Stil auf Android. Ihr SvelteKit-Router hält die Routen-Zustände; der Plugin besitzt die native Chrome.
- @capgo/capacitor-Übergänge — Seitenübergänge im Ionic-Stil und iOS-Rückwärts-Schub am Rand in der WebView-Schicht, ohne Ionic-UI zu übernehmen.
Installieren Sie beide:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncKonfigurieren Sie die native Navigation mit CSS-Inset-Modus, damit web-inhaltige Inhalte die native Leisten respektieren:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Rendern Sie eine Liquid Glass Tab-Leiste (iOS verwendet die Systemeigene Rendering; Android verwendet eine verschwommene 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>Wrap routed Pages in cap-router-outlet, cap-pageund cap-contentund rufen Sie an setDirection('forward') oder setDirection('back') Bevor Sie fortfahren. Vermeiden Sie Duplikate von Web-Überschriften oder -Füßen, wenn native Navigation diese Oberflächen besitzt.
Siehe die vollständigen Anleitungen: Verwenden Sie @capgo/capacitor-native-Navigation und Verwenden Sie @capgo/capacitor-Übergänge.
Sichere Bereiche mit Tailwind
Für sichere Bereiche auf Geräten in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (publikiert als) tailwind-capacitor Veröffentlicht auf npm. Es bietet safe-areas Tools und andere Capacitor-freundliche Tailwind-Plugins:
bun add -D tailwind-capacitorIn src/app.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Verwenden Sie Tools wie pt-safe, pb-safe, und px-safe anstatt das Sprühen env(safe-area-inset-*) von Hand. Das Projekt wird aktiv weiterentwickelt – wenn etwas für Ihre SvelteKit-Konfiguration fehlt, Öffnen Sie einen PR auf GitHub.
Wenn Inhalte gekürzt, verschoben oder horizontal scrollbar auf iOS aussehen, fügen Sie mehr
Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar sind, fügen Sie mehr overflow-x: hidden oder allein das Anpassen der Viewport-Tags hilft normalerweise nicht. Arbeiten Sie durch diese Kontrollen in der Reihenfolge.
Stellen Sie sicher, dass die Viewport-Metatag korrekt angewendet wird.
In src/app.htmlSetze die Viewport-Metatag ein <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Behandle den sicheren Bereich von iOS aus einer einzigen Root-Wrapper
Erstelle eine einzelne App-Shell und füge dort den sicheren Bereich ein – 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);
}Umfasst alle Seite-Inhalte innerhalb von .app-shell. Doppelte sichere Bereich-Padding in Kopfzeilen, Modalen und Layout-Wrapper macht die UI oft gekürzt oder zu groß aussehen.
Mit @capgo/tailwind-capacitorKannst du denselben Padding mit Hilfsfunktionen wie pt-safe pb-safe px-safe auf dieser einzigen Hülle ausdrücken.
Setze Capacitor iOS contentInset auf never first
In capacitor.config.ts, bevor Sie native Einstellungen deaktivieren und CSS (oder Native Navigation’s) contentInsetMode: 'css') die sichere Fläche übernehmen lassen:
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'build',
ios: {
contentInset: 'never',
},
};Mischen Sie Capacitor’s automatische Inhaltseinstellung mit CSS env(safe-area-inset-*) 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 feste 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 durch w-full Wenn möglich. Viele horizontalen Überschreitungsprobleme kommen von 100vw / w-screendoppeltem sicheren Bereichsabstand oder einem festsitzenden Container — nicht von der Viewport-Meta-Tags selbst.
Zusammenfassung
Capacitor ist eine hervorragende Option für das Erstellen 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 Capgo, ist es sogar einfacher, Live-Updates in Ihre App hinzuzufü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-Anwendung hinzufügen können, nehmen Sie einen Blick auf das nächste Artikel:
Learn how Capgo can help you build better apps faster, Registrieren Sie sich für ein kostenloses Konto heute.
Fortsetzen Sie mit Building Mobile Apps with SvelteKit und Capacitor
Wenn Sie bereits Building Mobile Apps with SvelteKit and Capacitor zur Planung der CI/CD-Automatisierung, mit ihr verbinden Capgo CI/CD für den Produktworkflow in Capgo CI/CD, Capgo nativee 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 der CI/CD-Integration GitHub Aktionen-Integration Für die Implementierungsdetails in GitHub Aktionen-Integration.
