In questo tutorial, inizieremo con una nuova SvelteKit app e passeremo alla creazione di applicazioni mobili native utilizzando Capacitor. Puoi anche aggiungere la Capgo di navigazione e transizioni nativi per un'esperienza mobile nativa, e utilizzare tailwind-capacitor per aree sicure.
Capacitor consente di convertire facilmente la tua applicazione web SvelteKit in un'app mobile nativa senza la necessità di modifiche significative o l'apprendimento di una nuova tecnologia come React Native.
Segui questo passo dopo passo per trasformare la tua app SvelteKit in un'app mobile utilizzando Capacitor, con la possibilità di aggiungere la Capgo di navigazione, transizioni e linee guida per l'interfaccia utente di iOS.
Sul Capacitor
CapacitorJS è un vero cambiamento! Può essere integrato facilmente in qualsiasi progetto web, avvolgendo l'applicazione in un webview nativo e generando progetti Xcode e Android Studio nativi. I suoi plugin forniscono accesso alle funzionalità del dispositivo nativo come la fotocamera tramite un ponte JavaScript.
Capacitor ti consente di creare un'app mobile nativa fantastica senza alcuna configurazione complessa o curva di apprendimento ripida. La sua API e funzionalità streamlinata rendono facile l'integrazione nel tuo progetto. Sarai sorpreso dalla facilità con cui puoi ottenere un'app mobile nativa completamente funzionale con Capacitor!
Preparazione dell'app SvelteKit
Per creare una nuova app SvelteKit, esegui il seguente comando:
npm create svelte@latest my-app
cd my-app
npm install
npm run buildDopo l'esecuzione del build comando, dovresti vedere una nuova dist cartella alla radice del tuo progetto.
This folder will be used by Capacitor later, but for now, we need to set it up correctly.
Adding Capacitor to Your SvelteKit App
Per pacchettizzare qualsiasi app web in un contenitore mobile nativo, dobbiamo seguire alcuni passaggi iniziali. In seguito, è semplice come eseguire un comando. sync Prima di tutto, installa il
Capacitor Capacitor CLI Successivamente, installa il pacchetto di base e i pacchetti pertinenti per le piattaforme iOS e Android.
Infine, aggiungi le piattaforme e Capgo creerà cartelle per ogni piattaforma alla radice del tuo progetto:
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 androidcartelle iOS cartelle iOS E e Android i cartelle del tuo progetto SvelteKit. Sono progetti nativi reali!
Per accedere al progetto Android in seguito, è necessario installare
Android Studio . Per iOS, è necessario un Mac e dovresti installareXcode Inoltre, dovresti trovare un file.
__CAPGO_KEEP_0__.config.ts che contiene alcune impostazioni di base capacitor utilizzate durante la sincronizzazione. L'unica cosa di cui dovresti preoccuparti è il 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 directory web, che deve puntare al risultato del comando di build. Attualmente, è sbagliato.
Per risolvere questo problema, apri il file capacitor.config.ts e aggiorna il campo 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 per renderlo un'applicazione statica scaricando il pacchetto dell'adattatore statico appropriato:
npm i -D @sveltejs/adapter-staticDopo l'installazione del pacchetto, dovremo modificare il file svelte.config.js da adattatore automatico 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 il file svelte.config.js aggiornato, dovremo aggiungere un prerender opzione tramite la creazione di un +layout.js pagina a src/routes e aggiungere semplicemente l'esportazione seguente a +layout.js:
export const prerender = trueDopo aver aggiunto e aggiornato il +layout.js pagina, avremo bisogno di aggiungere le nostre piattaforme mobili, ricostruire il nostro progetto per creare il build cartella
Puoi farlo eseguendo i seguenti comandi:
npm run build
npx cap syncIl primo comando npm run build costruirà il tuo progetto SvelteKit e copierà la costruzione statica, mentre il secondo comando npx cap sync sincronizzerà tutte le web code nei posti giusti delle piattaforme native affinché possano essere visualizzate in un'app.
Inoltre, il comando di sincronizzazione potrebbe aggiornare le piattaforme native e installare plugin, quindi quando installi nuovi Capacitor plugin, è il momento di eseguire npx cap sync nuovamente.
Senza rendersene conto, hai ora completato il processo, quindi vediamo l'app sul dispositivo!
Costruire e Distribuire App Native
Per sviluppare app iOS, hai bisogno di avere Xcode installato, e per le app Android, è necessario avere Android Studio installato. Inoltre, se pianifichi di distribuire la tua app sul negozio di app, è necessario iscriversi al programma di sviluppatore Apple per iOS e al Google Play Console per Android.
Se sei nuovo alla creazione di app mobili native, puoi utilizzare i 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 configurare 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 sviluppatore). 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 distribuito con successo la tua app web SvelteKit su un dispositivo mobile. Ecco un esempio:
Ma aspetta, c'è anche un modo più veloce di fare questo durante lo sviluppo…
Capacitor Live Reload
Ora, probabilmente sei abituato a avere il caricamento caldo con tutti i framework moderni, e la buona notizia è che puoi avere la stessa funzionalità su un dispositivo mobile con sforzo minimo!
Abilita l'accesso alla tua applicazione ospitata localmente con il caricamento in tempo reale su il tuo network avendo l'app Capacitor caricare il contenuto dalla specifica URL.
Il primo passo è determinare l'indirizzo IP locale. Se stai utilizzando un Mac, puoi scoprire questo eseguendo il seguente comando nel terminale:
ipconfig getifaddr en0Su Windows, esegui:
ipconfigPoi cerca l'indirizzo IPv4.
Possiamo istruire Capacitor a caricare l'app direttamente dal server aggiungendo un'altra voce al 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;Sii sicuro di utilizzare l'indirizzo IP e la porta corretticome mostrato nell'esempio sopra.
Ora, possiamo applicare queste modifiche copiandole nel nostro progetto nativo:
npx cap copyIl copy il comando è simile a syncma copierà solo le modifiche apportate al folder web e alla configurazione, senza aggiornare il progetto nativo. Puoi ora distribuire nuovamente la tua app tramite Android Studio o Xcode. Dopo di che, se cambi qualcosa nel tuo app Svelte,
l'app si ricaricherà automaticamente e mostrerà le modifiche! Tieni presente
che Se installi nuovi plugin come la camera, è ancora necessario eseguire una ricompilazione del tuo progetto nativo. Ciò è dovuto al fatto che i file nativi sono stati modificati e non è possibile eseguirlo in tempo reale.
Nota che dovresti utilizzare l'indirizzo 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
Vediamo 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 la finestra di dialogo di condivisione nativa! Per questo, adesso abbiamo bisogno solo di importare il pacchetto e chiamare la share() funzione dal nostro app, quindi cambiamo il src/routes/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 prima, quando si installano nuovi plugin, è necessario eseguire un'operazione di sincronizzazione e poi ri-deployare l'app sul nostro dispositivo. Per farlo, esegui il seguente comando:
npx cap syncDopo aver premuto il pulsante, puoi assistere alla bella finestra di dialogo di condivisione nativa in azione!
Successivamente, puoi rendere l'app più nativa su iOS e Android con Capgo di navigazione e transizioni, e risolvere i problemi di layout iOS comuni che causano overflow orizzontale o aree sicure tagliate.
Interfaccia utente con un aspetto nativo con Capgo di navigazione e transizioni native
L'ho lavorato per anni con Ionic per costruire applicazioni cross-platform, ma integrarla con SvelteKit è un po' un trucco e non vale la pena spesso quando già hai Tailwind CSS.
Per un aspetto mobile nativo in un'app SvelteKit + Capacitor, utilizza i plugin Capgo al posto delle kit UI web come Konsta UI:
- @capgo/capacitor-native-navigation – 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-transitions – transizioni di pagina dello stile Ionic e swipe-back di iOS nell'layer WebView, senza adottare l'interfaccia utente di Ionic.
Installa entrambi:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncConfigura la navigazione nativa con il modello CSS inset per far rispettare il contenuto web le barre native:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Visualizza una barra di tab di vetro liquido (iOS utilizza la rendering di sistema; Android utilizza un sfondo di 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}`);
});Aggiungi 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>Avvolgi le pagine di destinazione in cap-router-outlet, cap-pagee cap-contente chiama setDirection('forward') o setDirection('back') Configura la navigazione nativa con il modello CSS inset per far rispettare il contenuto web le barre native, senza duplicare i titoli o i piedi di pagina web quando la navigazione nativa ne ha la proprietà.
Vedi le guide complete: Usare @capgo/capacitor-navigazione-nativa e Usare @capgo/capacitor-transizioni.
Aree sicure con Tailwind
Per le aree sicure del dispositivo in Tailwind CSS, utilizza @capgo/tailwind-capacitor pubblicato come tailwind-capacitor su npm. safe-areas Fornisce 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";Utilizza utilità come pt-safe, pb-safe, e px-safe invece di spargere env(safe-area-inset-*) manualmente. Il progetto è attivamente sviluppato — se qualcosa manca per la tua configurazione SvelteKit, apri una PR su GitHub.
Risolvere Problemi di Layout su iOS (Viewport, Area di Sicurezza e Sovraffollamento Orizzontale)
Se il contenuto sembra essere tagliato, spostato o scorrevole orizzontalmente su iOS, aggiungere più overflow-x: hidden o modificare solo la tag di viewport non risolve di solito il problema. Esegui questi controlli in ordine.
Assicurati che la tag meta viewport sia applicata correttamente
In src/app.html, impostare la tag meta viewport in <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Gestire l'area di sicurezza di iOS da un solo wrapper radice
Creare un unico contenitore dell'applicazione e applicare la 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);
}Avvolgere tutto il contenuto della pagina all'interno di .app-shellLa duplicazione della padding dell'area di sicurezza nei titoli, nei modali e nei wrapper di layout spesso fa sembrare il UI tagliato o troppo grande.
Con @capgo/tailwind-capacitorpuoi esprimere la stessa spaziatura con utilità come pt-safe pb-safe px-safe su quella singola shell.
Imposta Capacitor iOS contentInset a never context: Pagina/Area: Pagina prodotti di aggiornamenti in tempo reale. Ruolo: Etichetta di navigazione breve o elemento UI.
primo capacitor.config.tsIn contentInsetMode: 'css', preferisci l'inserimento nativo disabilitato e lascia che CSS (o la navigazione nativa)
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'build',
ios: {
contentInset: 'never',
},
};Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) Mischia l'inserimento di contenuto automatico di __CAPGO_KEEP_0__ con CSS
la spaziatura è una causa comune di doppia spaziatura.
Cerca l'elemento che sta effettivamente sovrapprendendo spazio. 100vwTailwind w-screen, un ampio 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 fissata — non dal tag meta viewport stesso.
Conclusion
Capacitor è un'ottima opzione per creare applicazioni native basate su un progetto web esistente, offrendo un modo semplice per condividere code e mantenere un'interfaccia utente coerente.
E con l'aggiunta di Capgo, è ancora più facile aggiungere aggiornamenti in tempo reale all'applicazione, assicurando che i tuoi utenti abbiano sempre accesso alle ultime funzionalità e correzioni di bug.
Se desideri imparare a aggiungere Capgo alla tua app SvelteKit, prendi un'occhiata all'articolo successivo:
Impara come Capgo possa aiutarti a creare applicazioni migliori in modo più veloce 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 flusso di lavoro del prodotto in Capgo CI/CD Capgo Builds nativi per il flusso di lavoro del prodotto in Capgo Builds nativi Capgo Integrazioni per il workflow del prodotto in Capgo Integrazioni Integrazione CI/CD per i dettagli di implementazione in Integrazione CI/CD, e GitHub Integrazione Azioni per i dettagli di implementazione in GitHub Integrazione Azioni.
