In questo tutorial, inizieremo con un nuovo SvelteKit app e passare alla creazione di app mobili native utilizzando Capacitor. Puoi anche aggiungere la Capgo di navigazione e transizioni native per un tocco di realismo mobile, e utilizzare tailwind-capacitor per aree sicure.
Capacitor consente di convertire facilmente la tua applicazione web SvelteKit in un'app mobile nativa senza dover effettuare modifiche significative o imparare una nuova tecnologia come 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.
Su Capacitor
CapacitorJS è un vero cambiamento! Può essere integrato facilmente in qualsiasi progetto web, avvolgendo la tua applicazione in una vista web nativa e generando progetti Xcode e Android Studio nativi per te. I suoi plugin forniscono accesso alle funzionalità di dispositivo nativo come la fotocamera tramite un ponte JavaScript.
Capacitor consente di creare un'app mobile nativa fantastica senza alcuna configurazione complessa o curva di apprendimento impegnativa. La sua API sottile e la sua funzionalità ottimizzata rendono facile integrarlo nel tuo progetto. Sarai impressionato dalla semplicità con cui puoi raggiungere un'app nativa funzionale completa con Capacitor.
Preparazione dell'applicazione SvelteKit
To creare una nuova app SvelteKit, esegui il seguente comando:
npm create svelte@latest my-app
cd my-app
npm install
npm run buildDopo aver eseguito il build command, dovresti vedere un nuovo dist Aggiungere __CAPGO_KEEP_0__ alla tua app SvelteKit
Questo cartella verrà utilizzata in futuro da Capacitor, ma per ora dobbiamo configurarla correttamente.
Aggiungere Capacitor alla tua App SvelteKit
To package any web app into a native mobile container, we need to follow a few initial steps. Afterward, it’s as simple as running a single sync command.
Installa prima il Capacitor CLI First, install the __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ as a development dependency and set it up within your project. During the setup, you can press “enter” to accept the default values for name and bundle ID.
Installa il pacchetto di base e i pacchetti pertinenti per le piattaforme iOS e Android.
Infine, aggiungi le piattaforme, e Capacitor creerà cartelle per ogni piattaforma nella radice del tuo progetto:
# 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 androidAl momento dovresti vedere nuovi ios e android Sono progetti nativi reali!
Sono progetti nativi reali!
Per accedere al progetto Android in seguito, è necessario installare Android StudioPer iOS, è necessario un Mac e si dovrebbe installare Xcode.
Inoltre, dovresti trovare un capacitor.config.ts il file del tuo progetto, che contiene alcune impostazioni di base Capacitor utilizzate durante la sincronizzazione. L'unica cosa di cui devi tenere conto è il webDir, che deve puntare al risultato del tuo comando di build. Attualmente, è sbagliato.
Per risolvere questo problema, apri il capacitor.config.ts file e aggiorna il webDir:
import { CapacitorConfig } from '@capacitor/cli'
const config: CapacitorConfig = {
appId: 'com.example.app',
appName: 'my-app',
webDir: 'build',
}
export default configOra che abbiamo aggiornato le nostre impostazioni Capacitor, passiamo a modificare il nostro progetto Sveltekit in un'applicazione statica scaricando il pacchetto di adattatore statico appropriato:
npm i -D @sveltejs/adapter-staticDopo l'installazione del pacchetto, dovremo modificare il svelte.config.js file dall'adattatore auto a statico:
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 configCon svelte.config.js aggiornato, dovremo aggiungere una prerender opzione creando una +layout.js pagina in src/route e aggiungendo semplicemente l'esportazione seguente a +layout.js:
export const prerender = trueDopo aver aggiunto e aggiornato +layout.js pagina, avremo bisogno di aggiungere le nostre piattaforme mobili, ricostruire il nostro progetto per creare il costruire folder
Puoi farlo eseguendo i seguenti comandi:
npm run build
npx cap syncPotete farlo eseguendo i seguenti comandi: npm run build costruirà il tuo progetto SvelteKit e copierà la build statica, mentre il secondo comando npx cap sync Sincronizzerà tutte le code web nei posti giusti delle piattaforme native affinché possano essere visualizzate nell'app.
synccherà tutti i web __CAPGO_KEEP_0__ nei posti giusti delle piattaforme native, in modo che possano essere visualizzati in un'app. Capacitor plugins__CAPGO_KEEP_0__ plugin npx cap sync again.
Senza rendersi conto, hai completato il processo, quindi vediamo l'applicazione su un dispositivo!
Costruisci e distribuisci applicazioni native
Per sviluppare app iOS, è necessario avere Xcode installato, e per app Android, è necessario avere Android Studio installato. Inoltre, se pianifichi di distribuire la tua app sul negozio di app, è necessario iscriverti al Apple Developer Program per iOS e al Google Play Console per Android.
Se sei nuovo nello sviluppo di app mobili native, puoi utilizzare il Capacitor CLI per aprire facilmente entrambi i progetti nativi:
npx cap open ios
npx cap open androidUna volta impostati i tuoi progetti nativi, distribuire la tua app su un dispositivo connesso è facile. In Android Studio, basta attendere che tutto sia pronto, e puoi distribuire la tua app su un dispositivo connesso senza modificare alcun impostazione. Ecco un esempio:
In Xcode, è necessario impostare il tuo account di firma per distribuire la tua app su un dispositivo reale invece che solo sul simulatore. Se non hai fatto questo prima, Xcode ti guida attraverso il processo (ma di nuovo, è necessario essere iscritti al Programma di sviluppo). Dopo di che, puoi semplicemente premere play per eseguire l'app sul tuo dispositivo connesso, che puoi selezionare in alto. Ecco un esempio:
Congratulazioni! Hai con successo distribuito la tua app web SvelteKit su un dispositivo mobile. Ecco un esempio:
Ma aspetta, c'è anche un modo più veloce per farlo durante lo sviluppo…
Capacitor Live Reload
Da adesso, sei probabilmente abituato a avere il live reload con tutti i framework moderni, e la buona notizia è che puoi avere la stessa funzionalità su un dispositivo mobile con minimo sforzo!
Abilita l'accesso alla tua applicazione ospitata localmente con live reload su il tuo rete avendo l'Capacitor app caricare il contenuto dalla specifica URL.
Il primo passo è capire il tuo indirizzo IP locale. Se stai utilizzando un Mac, puoi scoprire questo esplorando il seguente comando nel terminale:
ipconfig getifaddr en0Su Windows, esegui:
ipconfigPoi cerca l'indirizzo IPv4.
Posiamo istruire Capacitor a caricare l'app direttamente dal server aggiungendo un'altra voce nel nostro 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;Assicurati di utilizzare l'indirizzo IP e il port corretti, come mostrato nell'esempio sopra.
Ora possiamo applicare queste modifiche copiandole nel nostro progetto nativo.
npx cap copyLa copy comando è simile a syncma copierà solo le modifiche apportate al folder web e alla configurazione, senza aggiornare il progetto nativo. copia le modifiche apportate al cartella web il tuo progetto nativo verrà aggiornato automaticamente.
Ora puoi distribuire nuovamente la tua app tramite Android Studio o Xcode. Dopo di che, se modifichi qualcosa nel tuo'app Svelte, l'applicazione si ricaricherà automaticamente e mostrerà le modifiche!
Tieni presente che se installi nuovi plugin come la fotocamera, è ancora necessario ricostruire il tuo progetto nativo. Ciò è dovuto al fatto che i file nativi sono cambiati, e non è possibile farlo in tempo reale.
Nota che dovresti utilizzare l'IP e il port corretti nella tua configurazione. Il blocco code sopra mostra il porto predefinito di SvelteKit per scopi dimostrativi.
Utilizzo dei plugin Capacitor
Ecco un esempio di come utilizzare un plugin Capacitor in azione, di cui abbiamo parlato prima. Per farlo, possiamo installare un plugin semplice eseguendo:
npm i @capacitor/shareNon c'è nulla di particolarmente complesso nel plugin di condivisione, ma apre il dialogo di condivisione nativo! Per questo, adesso abbiamo bisogno solo di importare il pacchetto e chiamare la share() funzione dal nostro app, quindi cambiamo il src/route/index.svelte a questo:
<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>Come menzionato in precedenza, quando si installano nuovi plugin, è necessario eseguire un'operazione di sincronizzazione e quindi ripubblicare l'app sul dispositivo. Per far ciò, esegui il seguente comando:
npx cap syncDopo aver premuto il pulsante, puoi assistere alla bella finestra di condivisione nativa in azione!
Successivamente, puoi rendere l'app più nativa su iOS e Android con la navigazione e le transizioni Capgo e risolvere i problemi di layout comuni di iOS che causano un sovrappiù orizzontale o aree sicure tagliate.
Interfaccia utente con un aspetto nativo con Capgo Navigazione e Transizioni Native
Ho lavorato per anni con Ionic per costruire applicazioni cross-platform, ma integrarla con SvelteKit è un processo complicato e raramente vale la pena quando già si dispone di Tailwind CSS.
Per un aspetto mobile nativo in un'app SvelteKit + Capacitor, utilizza i plugin Capgo al posto delle kit UI web-only come Konsta UI:
- @capgo/capacitor-navigazione nativa — barra di navigazione nativa, Liquid Glass bar delle schede su iOS e uno stile di barra delle schede sfocato su Android. Il router SvelteKit mantiene lo stato delle rotte; il plugin gestisce il chrome nativo.
- @capgo/capacitor-transizioni — Transizioni di pagina stile Ionic e swipe indietro su iOS nel layer WebView, senza adottare l'interfaccia utente di Ionic.
Installate sia:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncConfigura la navigazione nativa con modalità CSS inset affinché il contenuto web rispetti le barre native:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Visualizza una barra dei pulsanti Liquido Glass (iOS utilizza la rendering di sistema; Android utilizza un sfondo WebView sfocato):
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}`);
});Aggiungere le transizioni di pagina native nel contenitore dell'app:
<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>Avvolgere le pagine di destinazione in cap-router-outlet, cap-pagee cap-contente chiamare setDirection('forward') o setDirection('back') Prima di navigare. Non duplicare i titoli o i piedi di pagina web quando la navigazione nativa gestisce queste aree.
Vedi le guide complete: Utilizzando @capgo/capacitor-navigazione nativa e Utilizzando @capgo/capacitor-transizioni.
Aree sicure con Tailwind
Per le aree sicure del dispositivo in Tailwind CSS, utilizzare @capgo/tailwind-capacitor Pubblicato su tailwind-capacitor con npm). Fornisce safe-areas utilità e altri plugin Tailwind compatibili con Capacitor
bun add -D tailwind-capacitorIn src/app.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Utilizzare utilità come pt-safe, pb-safe, e px-safe al posto di diffondere env(safe-area-inset-*) manualmente. Il progetto è attivamente sviluppato — se qualcosa manca per la tua configurazione SvelteKit, apri un PR su GitHub.
Risolvere Problemi di Layout iOS (Viewport, Area di Sicurezza e Flusso Orizzontale)
Se il contenuto sembra essere tagliato, spostato o scorrevole orizzontalmente su iOS, aggiungere più overflow-x: hidden o modificare il tag viewport da solo non risolve di solito il problema. Passa attraverso questi controlli in ordine.
Assicurati che il tag meta viewport sia applicato correttamente
In src/app.html, impostare il tag meta viewport in <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Tratta l'area di sicurezza di iOS da un solo wrapper radice
Creare un unico contenitore dell'applicazione e applicare il padding dell'area di sicurezza lì — non in componenti nidificati multipli:
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);
}Avvolgi tutto il contenuto della pagina all'interno .app-shellLa duplicazione dello spazio di sicurezza nella zona di visualizzazione spesso fa sembrare l'interfaccia utente tagliata o troppo grande.
Con @capgo/tailwind-capacitor, puoi esprimere la stessa spaziatura con utilità come pt-safe pb-safe px-safe su quella singola shell.
Imposta Capacitor iOS contentInset su never primo
In capacitor.config.tspreferare l'inserzione nativa disabilitata e lasciare CSS (o la navigazione nativa) contentInsetMode: 'css') gestisca l'area sicura:
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'build',
ios: {
contentInset: 'never',
},
};Mischia Capacitor's automatico contenuto inset con CSS env(safe-area-inset-*) La spaziatura è una causa comune di doppia spaziatura.
Trova l'elemento sovrapposto reale
L'elemento colpevole è spesso un elemento che utilizza 100vw, Tailwind w-screen, una larghezza fissa in pixel, o un grande min-width.
In Safari Web Inspector, esegui:
[...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,
}));Con Tailwind, sostituisci w-screen con w-full quando possibile. Molti problemi di sovrapposizione orizzontale derivano da 100vw / w-screen, padding di area sicura duplicato, o un contenitore di larghezza fissa — non dal tag meta viewport stesso.
Conclusioni
Capacitor è un'ottima scelta per creare applicazioni native basate su un progetto web esistente, offrendo un modo semplice per condividere code e mantenere un'interfaccia utente coerente.
And con l'aggiunta di CapgoEcco perché è ancora più facile aggiungere aggiornamenti in tempo reale all'applicazione, garantendo che i tuoi utenti abbiano sempre accesso alle ultime funzionalità e correzioni di bug.
Se desideri imparare a aggiungere Capgo al tuo'app SvelteKit, consulta l'articolo successivo.
Learn how Capgo can help you build better apps faster, iscrivi un account gratuito oggi.
Continua da Building Mobile Apps con SvelteKit e Capacitor
Se stai utilizzando Building Mobile Apps con SvelteKit e Capacitor per pianificare l'automazione CI/CD, connettilo con Capgo CI/CD per il workflow del prodotto in Capgo CI/CD, Capgo Costruzioni native per il workflow del prodotto in Capgo Costruzioni native, Capgo Integrazioni per il workflow del prodotto in Capgo Integrazioni, Integrazione CI/CD per il dettaglio di implementazione in Integrazione CI/CD, e GitHub Integrazione azioni per il dettaglio di implementazione in GitHub Integrazione azioni.
