Creare App Mobili con SvelteKit e Capacitor

In questo tutorial, inizieremo con una nuova SvelteKit app e passeremo alla sviluppo mobile nativa utilizzando Capacitor. È possibile aggiungere anche la Capgo Navigazione e Transizioni native per un sentimento di mobile nativo, e utilizzare tailwind-capacitor per aree sicure.

Capacitor consente di convertire facilmente la vostra applicazione web SvelteKit in un'app mobile nativa senza la necessità di significative modifiche o di imparare una nuova abilità come React Native.

Segui questo passo dopo passo per trasformare la vostra app SvelteKit in un'app mobile utilizzando Capacitor, con la possibilità di aggiungere Capgo Navigazione, Transizioni e linee guida per la disposizione di iOS.

Su Capacitor

CapacitorJS è un vero cambiamento! Può essere integrato facilmente in qualsiasi progetto web, avvolgendo la vostra applicazione in una view web nativa e generando progetti Xcode e Android Studio nativi per voi. I suoi plugin forniscono accesso alle funzionalità del dispositivo nativo come la fotocamera tramite un ponte JavaScript.

Capacitor consente di creare un'app mobile nativa fantastica senza alcun setup complesso o curva di apprendimento ripida. La sua API e funzionalità streamlinata rendono facile l'integrazione nel progetto. Sarà sorpreso dalla semplicità con cui si può raggiungere un'app mobile funzionale completa con Capacitor!

Preparazione della tua 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 build

Dopo 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.

Aggiungere Capacitor alla tua App SvelteKit

Per pacchettare qualsiasi app web in un contenitore mobile nativo, dobbiamo seguire alcuni passaggi iniziali. Successivamente, è semplice come eseguire un singolo sync comando.

Prima di tutto, 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.

Installa quindi 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 android

Al momento dovresti vedere nuove cartelle ios e android nelle tue cartelle SvelteKit.

Sono progetti nativi reali!

Per accedere al progetto Android in seguito, hai bisogno di installare Android Studio. Per iOS, hai bisogno di un Mac e dovresti installare Xcode.

Inoltre, dovresti trovare un file capacitor.config.ts nel tuo progetto, che contiene alcune impostazioni di base Capacitor utilizzate durante la sincronizzazione. L'unica cosa a cui dovresti prestare attenzione è il webDir, che deve puntare al risultato del tuo comando di build. Attualmente, è sbagliato.

Per risolvere questo problema, apri il file capacitor.config.ts e aggiorna il webDir:

import { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'build',
}

export default config

Siamo stati aggiornati le nostre impostazioni di Capacitor, quindi passiamo a modificare il nostro progetto Sveltekit in un'applicazione statica scaricando il pacchetto di adattatore statico appropriato:

npm i -D @sveltejs/adapter-static

Dopo l'installazione del pacchetto, dovremo modificare svelte.config.js dal file dell'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 config

Con il svelte.config.js aggiornato, avremo bisogno di aggiungere un' opzione di prerendering creando una +layout.js pagina in src/routes e aggiungendo semplicemente l'esportazione seguente a +layout.js:

export const prerender = true

Dopo aver aggiunto e aggiornato il +layout.js In questo caso, dovremo aggiungere le nostre piattaforme mobili, ricostruire il nostro progetto per creare il costruzione cartella

Puoi farlo eseguendo i seguenti comandi:

npm run build
npx cap sync

Il 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 rendersi conto, hai completato il processo, quindi vediamo l'applicazione su un dispositivo!

Costruisci e distribuisci applicazioni native

Per sviluppare app iOS, hai bisogno di Xcode installato, e per le app Android, hai bisogno di 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 nativi:

npx cap open ios
npx cap open android

Una volta impostati i tuoi progetti nativi, distribuire la tua app su un dispositivo connesso è facile. In Android Studio, basta aspettare che tutto sia pronto, e puoi distribuire la tua app su un dispositivo connesso senza modificare alcun impostazione. Ecco un esempio:

In Xcode, devi 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, devi essere iscritto 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:

Ecco! Hai avuto successo nel distribuire 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 reload 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 app ospitata localmente con live reload su il tuo rete avendo l'app Capacitor 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 en0

Su Windows, esegui:

ipconfig

Poi cerca l'indirizzo IPv4.

Possiamo 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'IP e il port corretti, come mostrato nell'esempio sopra.

Ora, possiamo applicare queste modifiche copiandole nel nostro progetto nativo:

npx cap copy

Il copy comando è simile a sync, ma copierà solo le modifiche apportate al folder web e la configurazione, senza aggiornare il progetto nativo.

You potrai ora distribuire la tua app una volta di più attraverso 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 fotocamera, è ancora necessario un rebuild del tuo progetto nativo. Ciò è dovuto al fatto che i file nativi sono cambiati, e non può essere fatto in tempo reale.

Nota che dovresti utilizzare l'IP e il port corretti nella tua configurazione. Il blocco code sopra mostra il porto predefinito SvelteKit per scopi dimostrativi.

Utilizzo dei plugin Capacitor

Prendiamo in considerazione come utilizzare un plugin Capacitor in azione, che abbiamo menzionato alcune volte prima. Per farlo, possiamo installare un plugin semplice eseguendo:

npm i @capacitor/share

Non 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 As 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: Proseguendo, puoi rendere l'app più nativa su iOS e Android con la navigazione e le transizioni __CAPGO_KEEP_0__ e risolvere i problemi di layout comuni di iOS che causano overflow orizzontale o aree sicure tagliate.

<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>

Interfaccia utente nativa con __CAPGO_KEEP_0__ Navigazione e Transizioni native

npx cap sync

Ho lavorato per anni con

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.

Native-feeling UI with Capgo Native Navigation and Transitions

Tailwind CSS Per un sentore di mobile nativo in un'app SvelteKit + __CAPGO_KEEP_0__, utilizza i plugin __CAPGO_KEEP_1__ al posto di kit UI web come Konsta UI: @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation src/routes/index.svelte.

For a native mobile feel in a SvelteKit + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

• @capgo/capacitor-native-navigation – barra di navigazione nativa, Liquid Glass tab bar su iOS e uno stile di barra tab con sfondo sfocato su Android. Il tuo router SvelteKit mantiene lo stato delle rotte; il plugin possiede il chrome nativo.
• @capgo/capacitor-transizioni – transizioni di pagina dello stile Ionic e swipe indietro su iOS nell' layer WebView, senza adottare l'interfaccia utente di Ionic.

Installa sia:

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

Configura la navigazione nativa con il CSS inset mode in modo che il contenuto web rispetti le barre native:

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Rendi una barra tab di vetro liquido (su iOS si utilizza la rendering di sistema; su Android si 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 tuo 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 rotta in cap-router-outlet, cap-page, e cap-content, e chiama setDirection('forward') o setDirection('back') prima di navigare. Non duplicare i titoli o i piedi di pagina web quando la navigazione nativa possiede quelle superfici.

Vedi le guide complete: Usando @capgo/capacitor-navigazione nativa e Usando @capgo/capacitor-transizioni.

Aree sicure con Tailwind

Per aree sicure del dispositivo in Tailwind CSS, utilizza @capgo/tailwind-capacitor (pubblicato come tailwind-capacitor su npm). Offre safe-areas utilità e altri plugin Tailwind compatibili con Capacitor:

bun add -D tailwind-capacitor

In src/app.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

Usa utilità come pt-safe, pb-safee px-safe invece di spruzzare env(safe-area-inset-*) mano a mano. 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 Scoramento Orizzontale)

Se il contenuto sembra essere tagliato, spostato o scorrevole orizzontalmente su iOS, aggiungere più overflow-x: hidden o regolare il tag viewport da solo non risolve di solito il problema. Esegui 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" />

Gestisci 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);
}

Racchiuda tutto il contenuto della pagina all'interno di .app-shellLa duplicazione del padding di sicurezza dell'area sicura nei capisaldi, nelle finestre modal e nei contenitori di layout rende spesso l'interfaccia utente tagliata o troppo grande.

Con @capgo/tailwind-capacitor, puoi esprimere lo stesso padding con utilità come pt-safe pb-safe px-safe su quel singolo shell.

Imposta Capacitor iOS contentInset a never primo

In capacitor.config.ts, preferisci disabilitare l'inserimento nativo e lascia che CSS (o la navigazione nativa) gestisca l'area sicura: contentInsetMode: 'css'Set __CAPGO_KEEP_0__ iOS to first

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'build',
  ios: {
    contentInset: 'never',
  },
};

Mischia Capacitor’s automatico contenuto di inserimento con CSS env(safe-area-inset-*) La sovrapposizione di padding è una causa comune di doppia spaziatura.

Cerca l'elemento che sta effettivamente sovrascrivendo

L'elemento più comune è un elemento che utilizza 100vw, Tailwind w-screen, una larghezza di pixel fissata, 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 sovrascrittura orizzontale provengono da 100vw / w-screen, sovrapposizione di padding di area sicura duplicata, o da un contenitore di larghezza fissata — 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.

E con l'aggiunta di Capgo, è ancora più facile aggiungere aggiornamenti in tempo reale all'app, assicurando che i tuoi utenti abbiano sempre accesso alle ultime funzionalità e correzioni di bug.

Se desideri imparare a aggiungere Capgo al tuo app SvelteKit, prendi un'occhiata all'articolo successivo:

Impara come Capgo possa aiutarti a creare applicazioni migliori in modo più veloce, iscrivi gratuitamente 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 Integrazione CI/CD per il flusso di lavoro del prodotto in Capgo Integrazione CI/CD, Capgo Costruzioni Native per il flusso di lavoro del prodotto in Capgo Costruzioni Native, Capgo Integrazioni per il flusso di lavoro del prodotto in Capgo Integrazioni, Integrazione CI/CD per il dettaglio di implementazione in Integrazione CI/CD, e GitHub Integrazione di Azioni per il dettaglio di implementazione in GitHub Integrazione di Azioni.