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 eingeschlossen 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 buildNachdem 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 androidiOS-Ordner 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 , das muss auf das Ergebnis Ihres Build-Befehls verweisen. 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 configow 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-staticNachdem wir unsere __CAPGO_KEEP_0__-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
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 configDatei vom Auto-Adapter auf statisch ändern: Mit dem 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 = trueNachdem 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 syncDer erste Befehl npm run build baut Ihr SvelteKit-Projekt und kopiert die statische Build, während der zweite Befehl npx cap sync synchronisiert alle Web code 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-Pluginsinstallieren, es Zeit ist, npx cap sync wieder zu laufen.
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 neu bei der nativen mobilen Entwicklung sind, können Sie die Capacitor CLI verwenden, um beide native Projekte einfach zu öffnen:
npx cap open ios
npx cap open androidEinmal 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, 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 Signierungsaccount einrichten, um Ihre App auf einem echten 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 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 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
Bis jetzt 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 haben kannst auf einem mobilen Gerät mit minimalen Anstrengungen!
Aktiviere den Zugriff auf deine lokal gehostete Anwendung mit Live Reload auf deinem Netzwerk 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 in der Terminal-Anwendung ausführst:
ipconfig getifaddr en0Auf Windows ausführen:
ipconfigDann suchst du 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 __CAPGO_KEEP_0__ und __CAPGO_KEEP_1____CAPGO_KEEP_0__, wie im Beispiel oben gezeigt.
Jetzt können wir diese Änderungen übernehmen, indem wir sie in unser natives Projekt übernehmen:
npx cap copyDer copy Diese Kommando ähnelt sync, aber es 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 sichergestellt, dass, wenn Sie etwas in Ihrer Svelte-Anwendung ändern, die App automatisch neu geladen wird und die Änderungen anzeigt!
Beachten Sie Beachten Sie, dass Beachten Sie, dass die App
Beachten Sie, dass die App Wenn Sie neue Plugins wie das Kamera-Plugin installieren, ist ein Neubuild Ihres native Projekts erforderlich. Dies liegt daran, dass native Dateien geändert werden und dies nicht auf der Fliege erfolgen kann.
Bitte beachten Sie, dass Sie die richtige IP-Adresse und den richtigen Port in Ihrer Konfiguration verwenden sollten. Der code-Block oben zeigt die Standard-Portnummer von SvelteKit für Demonstrationszwecke.
Verwendung von Capacitor-Plugins
Lassen Sie uns nun sehen, wie ein Capacitor-Plugin in der Praxis verwendet wird. Dazu können wir ein einfaches Plugin installieren, indem wir folgenden Befehl ausführen:
npm i @capacitor/shareEs ist nichts Besonderes an dem Teilen-Plugin, aber es öffnet den native Teilen-Dialog! share() Für dies benötigen wir nur noch das Paket importieren und die Funktion in unserer App aufrufen. Lassen Sie uns also die
<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 syncin folgende Zeilen ändern: Als erwähnt wurde, ist bei der Installation neuer Plugins eine Synchronisationsoperation erforderlich und das App-Programm muss dann neu auf dem Gerät bereitgestellt werden. Dazu führen Sie bitte folgenden Befehl aus: Nachdem Sie auf den Button geklickt haben, können Sie den schönen native Teilen-Dialog in Aktion sehen!
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 horizontalen Überschreitung oder gekürzten sicheren Bereichen auf iOS beheben.
Nativ anfühlsende 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.
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-Anwendung verwenden Sie stattdessen capacitor-Plugins anstelle von web-basierten UI-Kits wie Konsta UI: @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation
- @capgo/capacitor-transitions @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-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 syncKonfigurieren 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-Liquide-Tasteleiste (iOS verwendet die Systemeigene Rendernung; 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>Wrap routed Pages in cap-router-outlet, cap-page, und cap-content, und 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 Verwenden Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-Übergänge Verwenden Sie @capgo/capacitor-native-Navigation und @capgo/capacitor-Übergänge.
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. Es bietet safe-areas Nützlichkeiten 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 Nützlichkeiten 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 einen PR auf __CAPGO_KEEP_0__ Sichere Bereiche auf Geräten in Tailwind CSS verwenden Sie @GitHub/tailwind-__CAPGO_KEEP_1__.
iOS-Layout-Probleme beheben (Viewport, Safe Area 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 das iOS-Safe-Area aus einer einzigen Root-Wrapper <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Erstellen Sie eine einzelne App-Shell und wenden Sie dort Safe-Area-Padding an — nicht in mehreren verschachtelten Komponenten:
Um 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);
}zu kapseln. Doppelte Safe-Area-Padding in Kopfzeilen, Modalen und Layout-Wrapper macht die UI gekürzt oder zu groß aussehen. .app-shellMithilfe von
@__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 deaktivieren und lassen Sie CSS (oder Native Navigation’s contentInsetMode: 'css') den sicheren Bereich besetzen:
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 100vwTailwind w-screeneinem festen Pixelbreite oder einem großen 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 w-screen mit w-full wenn möglich. Viele horizontale Überlaufprobleme kommen von 100vw / w-screendoppeltem sicheren Bereichsabstand oder einer festen Breite des Containers — 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 CapgoEs ist sogar einfacher, Live-Updates 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 einfügen können, nehmen Sie einen Blick auf das nächste Artikel:
Lernen Sie, wie Capgo Ihnen helfen kann, bessere Apps schneller zu bauen. Registrieren Sie sich für ein kostenloses Konto. Machen Sie das 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 für den Produktworkflow in Capgo Native Builds für den Produktworkflow in 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
