In questo tutorial, inizieremo con un nuovo SvelteKit app e transizione al sviluppo mobile nativo utilizzando Capacitor. Puoi anche aggiungere la Capgo 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 apportare 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.
Di 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 per te. 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 la sua funzionalità streamlinata rendono facile l'integrazione nel tuo progetto. Sarai sorpreso dalla semplicità con cui puoi ottenere un'app 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.
Questa cartella verrà utilizzata da Capacitor in seguito, ma per ora dobbiamo configurarla correttamente.
Aggiunta di Capacitor all'app SvelteKit
Per pacchettizzare qualsiasi app web in un contenitore mobile nativo, dobbiamo seguire alcuni passaggi iniziali. Dopo di che, è sufficiente eseguire un comando singolo. sync comando.
Prima, installa il Capacitor CLI come dipendenza di sviluppo e configuralo nel tuo progetto. Durante la configurazione, puoi premere “invio” per accettare i valori predefiniti per nome e ID bundle.
Successivamente, 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 androidIn questo punto, dovresti vedere nuove ios e contexto: Pagina/Area: Sito web di marketing Capgo. Ruolo: Etichetta breve o elemento di navigazione. Visto in: pagina trust.astro. Chiave di messaggio `e` (E). android
cartelle nel tuo progetto SvelteKit.
To accedere al progetto Android in seguito, è necessario installare Android Studio. Per iOS, è necessario un Mac e dovresti installare Xcode.
Inoltre, dovresti trovare un file capacitor.config.ts che contiene alcune impostazioni di base di Capacitor utilizzate durante la sincronizzazione. L'unica cosa a cui dovresti prestare attenzione è il webDirche deve puntare al risultato del tuo comando di build. Attualmente, è sbagliato.
Per risolvere questo problema, apri il file capacitor.config.ts e aggiorna webDir:
import { CapacitorConfig } from '@capacitor/cli'
const config: CapacitorConfig = {
appId: 'com.example.app',
appName: 'my-app',
webDir: 'build',
}
export default configDopo aver 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 file 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 configda adattatore automatico a statico: Dopo aver aggiornato svelte.config.js dovremo aggiungere un'opzione di pre-rendering creando una pagina +layout.js per per src/route e basta aggiungere 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 folder
Si può fare eseguendo i seguenti comandi:
npm run build
npx cap syncIl primo comando npm run build costruirà il progetto SvelteKit e copierà la build statica, mentre il secondo comando npx cap sync syncronizzerà tutti i web code nei posti giusti delle piattaforme native affinché possano essere visualizzati in un'app.
Allo stesso tempo, il comando di sincronizzazione potrebbe aggiornare le piattaforme native e installare i plugin, quindi quando installi nuovi Capacitor plugin, è il momento di eseguire npx cap sync nuovamente.
Senza rendersene conto, hai completato il processo, quindi vediamo l'app sul dispositivo!
Sviluppa e distribuisci app native
Per sviluppare app iOS, hai bisogno di avere Xcode installato, e per le app Android, hai bisogno di avere Android Studio installato. Inoltre, se hai l'intenzione di distribuire la tua app sul negozio di app, devi iscriverti al programma di sviluppatore Apple 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 native:
npx cap open ios
npx cap open androidUna volta che hai configurato i tuoi progetti nativi, distribuire la tua app su un dispositivo connesso è facile. In Android Studio, non devi fare altro che attendere che tutto sia pronto, e puoi distribuire la tua app su un dispositivo connesso senza modificare alcun impostazione. Ecco un esempio:
In Xcode, devi 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, devi essere iscritto al Programma per sviluppatori). 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 per farlo durante lo sviluppo…
Capacitor Live Reload
Da adesso, sei probabilmente abituato a avere il carico caldo 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 il carico caldo On il tuo rete avendo l'app Capacitor caricare il contenuto dalla specifica URL.
Il primo passo è capire l'indirizzo IP locale. Se stai utilizzando un Mac, puoi scoprire questo eseguendo il seguente comando nel terminale:
ipconfig getifaddr en0On Windows, esegui:
ipconfigPoi cerca l'indirizzo IPv4.
Posiamo 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;Assicurati di utilizzare l'indirizzo IP e il port corretti, come mostrato nell'esempio sopra.
Ora, possiamo applicare questi cambiamenti copiandoli nel nostro progetto nativo:
npx cap copyIl copy il comando è simile a syncma copierà solo copierà solo le modifiche apportate al cartello web e alla configurazione, senza aggiornare il progetto nativo.
Ora puoi distribuire nuovamente il tuo app tramite Android Studio o Xcode. Dopo di che, se cambi qualcosa nel tuo Svelte app, l'app 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 stati modificati, e ciò non può essere fatto in modo dinamico.
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 semplice plugin eseguendo:
npm i @capacitor/shareNon c'è nulla di particolarmente sofisticato nel Plugin di condivisione, ma apre comunque il dialogo di condivisione nativo! Per questo, adesso dobbiamo solo importare il pacchetto e chiamare la share() funzione dal nostro app, quindi cambiamo il src/routes/index.svelte in 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 poi ri-deployare l'app sul nostro dispositivo. Per farlo, esegui il seguente comando:
npx cap syncDopo aver premuto il pulsante, potrai assistere al bellissimo dialogo di condivisione nativo 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 la navigazione e le transizioni Capgo native
L'ho utilizzato per anni con Ionic To costruire applicazioni cross-platform, ma integrarla con SvelteKit è un po' un trucco e non vale la pena quando già hai Tailwind CSS.
Per un aspetto nativo su mobile in un'app SvelteKit + Capacitor, utilizza i plugin Capgo al posto di kit UI web come Konsta UI:
- @capgo/capacitor-native-navigation – barra di navigazione nativa, Liquid Glass bar delle schede su iOS e stile di barra delle schede sfocata su Android. Il tuo router SvelteKit mantiene lo stato delle rotte; il plugin gestisce il chrome nativo.
- @capgo/capacitor-transitions – transizioni di pagina stile Ionic e swipe indietro su iOS nell' layer WebView, senza adottare l'interfaccia UI di Ionic.
Installa entrambi:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncConfigura la navigazione nativa con modalità 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',
},
});Rendi una barra delle schede di vetro liquido (iOS utilizza la rendering di sistema; Android utilizza un sfondo sfocato di WebView):
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-pageEcco, e cap-contentEcco, e chiamare setDirection('forward') o setDirection('back') Ecco, e prima di navigare. Non duplicare i titoli o i piedi di pagina web quando la navigazione nativa gestisce quelle superfici.
Vedi le guide complete: Utilizzare @capgo/capacitor-navigazione-nativa e Utilizzare @capgo/capacitor-transizioni.
Zone sicure con Tailwind
Per le aree sicure del dispositivo in Tailwind CSS, utilizza @capgo/tailwind-capacitor (pubblicato come tailwind-capacitor On npm). Fornisce safe-areas utilità e altri plugin di 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 al posto di aggiungerle env(safe-area-inset-*) manualmente. Il progetto è attivamente sviluppato — se qualcosa manca per la tua configurazione SvelteKit, apri una PR su GitHub.
I Problemi di layout iOS (Viewport, Area sicura, e sovrapposizione 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.htmlimpostare la meta tag di viewport in <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />gestire l'area sicura di iOS da un wrapper radice solo
Creare un unico contenitore dell'applicazione e applicare il padding dell'area sicura lì — non nei 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 dentro .app-shellIl duplicato del padding dell'area sicura nei titoli, nei modali e nei wrapper di layout spesso fa sembrare l'interfaccia utente tagliata o troppo grande.
Con @capgo/tailwind-capacitorpuoi esprimere lo stesso padding con utilità come pt-safe pb-safe px-safe su quel singolo contenitore.
Impostare Capacitor iOS contentInset a never primo
In capacitor.config.ts, preferisci l'ingombro nativo disabilitato e lascia che 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',
},
};Mescolare l'ingombro automatico di contenuto di Capacitor con CSS env(safe-area-inset-*) padding è una causa comune di doppia spaziatura.
Trova l'elemento che sta veramente sovrapprendendo
Il solito colpevole è un elemento che utilizza 100vw, Tailwind w-screen, una larghezza di pixel fissata, o una larghezza 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 overflow orizzontale derivano da 100vw / w-screenuna duplicazione di padding di area sicura, o da un contenitore di larghezza fissata — non dal tag meta viewport stesso.
Conclusioni
Capacitor è un'ottima opzione per creare applicazioni native sulla base di 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 gli 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:
Scopri come Capgo possa aiutarti a creare applicazioni migliori in modo più veloce. iscrivi un account gratuito oggi.
Continua con Building Mobile Apps con SvelteKit e Capacitor
Se stai utilizzando Building Mobile Apps con SvelteKit e Capacitor per pianificare l'automazione CI/CD, collega Capgo CI/CD per il workflow del prodotto in Capgo CI/CD, Capgo Build Nativi per il workflow del prodotto in Capgo Build 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 Azioni di integrazione per il dettaglio di implementazione in GitHub Azioni di integrazione.
