Building Mobile Apps with SvelteKit and Capacitor

In questo tutorial, inizieremo con una nuova 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 è un vero cambiamento! Può essere facilmente integrato in qualsiasi progetto web, avvolgendo l'applicazione in una view web nativa 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 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!

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 build

After l'esecuzione del comando, dovresti vedere una nuova cartella alla radice del tuo progetto. build La cartella verrà utilizzata da Capgo in seguito, ma per ora, dobbiamo configurarla correttamente. dist Aggiungere Capgo al tuo App SvelteKit

This folder will be used by Capacitor later, but for now, we need to set it up correctly.

Adding Capacitor to Your SvelteKit App

Capacitor sync come dipendenza di sviluppo e configuralo all'interno del 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. Capacitor CLI La cartella verrà utilizzata da Capgo in seguito, ma per ora, dobbiamo configurarla correttamente.

Aggiungere Capgo al tuo App SvelteKit

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 android

In questo punto, dovresti vedere nuovi ios e android cartelle

Queste sono vere applicazioni native!

Per accedere al progetto Android in seguito, è necessario installare Android StudioPer iOS, è necessario un Mac e dovresti 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 a cui devi prestare attenzione è il webDirche deve puntare al risultato del 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 config

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

Dopo l'installazione del pacchetto, dovremo modificare 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 config

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

export const prerender = true

Dopo aver aggiunto e aggiornato la +layout.js pagina, dovremo aggiungere le nostre piattaforme mobili, ricostruire il nostro progetto per creare costruisci 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 syncronizzerà tutte le web code nei posti giusti delle piattaforme native affinché possano essere visualizzate in un'app.

Di conseguenza, 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 ancora.

Senza rendersene conto, hai ora completato il processo, quindi vediamo l'app sul dispositivo!

Costruisci e Distribuisci Applicazioni Native

To 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 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 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 al posto del simulatore. Se non hai fatto questo prima, Xcode ti guida attraverso il processo (ma di nuovo, devi essere iscritto 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 distribuito con successo la tua app web SvelteKit su un dispositivo mobile. Ecco un esempio:

But aspettate, c'è anche un modo più veloce per farlo durante lo sviluppo…

Capacitor Live Reload

Da adesso, siete probabilmente abituati a avere il live reload con tutti i framework moderni, e la buona notizia è che potete avere la stessa funzionalità su un dispositivo mobile con sforzo minimo!

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 eseguendo il seguente comando nel terminale:

ipconfig getifaddr en0

Su Windows, esegui:

ipconfig

Poi cerca l'indirizzo IPv4.

Potremmo istruire Capacitor a caricare l'app direttamente dal server aggiungendo un'altra voce ai nostri 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 porto 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 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

You can now deploy your app one more time through Android Studio or Xcode. After that, if you change something in your Svelte app, the app will automatically reload e mostrare le modifiche!

Tenere a mente se infatti installi nuovi plugin come la fotocamera, richiede ancora una volta una ricompilazione del tuo progetto nativo. Ciò è dovuto al fatto che i file nativi sono stati modificati, 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 fini 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/share

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

As menzionato in precedenza, quando si installano nuovi plugin, è necessario eseguire un'operazione di sincronizzazione e poi ri-deployare l'app sul dispositivo. Per farlo, esegui il seguente comando:

npx cap sync

Dopo 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 overflow orizzontale o aree sicure tagliate.

Interfaccia utente con un aspetto nativo con Capgo Navigazione e Transizioni native

Lavoro da anni con Ionic per costruire applicazioni cross-platform, ma integrarla con SvelteKit è un processo hacky 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-native-navigation — barra di navigazione nativa, Liquid Glass barra dei tab su iOS e uno stile di barra dei tab sfocato su Android. Il router SvelteKit mantiene lo stato delle rotte; il plugin gestisce il chrome nativo.
• @capgo/capacitor-transitions — Transizioni di pagina stile Ionic e swipe-back di iOS nell layer WebView, senza adottare l'interfaccia utente di Ionic.

Installate sia:

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

Configurare la navigazione nativa con il modo di inserimento CSS 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',
  },
});

Rendere 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}`);
});

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 routing 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 possiede queste superfici.

Vedi le guide complete: Usare @capgo/capacitor-navigazione-nativa E e Utilizzando @capgo/capacitor-transizioni.

Aree sicure con Tailwind

Per aree sicure del dispositivo in Tailwind CSS, utilizzare @capgo/tailwind-capacitor Pubblicato su tailwind-capacitor (pubblicato su npm). Fornisce safe-areas strumenti e altri plugin di 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";

Utilizzare strumenti come pt-safe, pb-safe, e px-safe al posto di spargere env(safe-area-inset-*) con le proprie mani. Il progetto è attivamente sviluppato — se qualcosa manca per la tua configurazione SvelteKit, apri una PR su GitHub.

Il problema dei layout iOS (Viewport, Area di sicurezza e sovrapposizione orizzontale)

Se il contenuto sembra essere tagliato, spostato o scrollabile orizzontalmente su iOS, aggiungere più overflow-x: hidden o modificare il tag viewport da solo non risolve spesso 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 unico 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 di .app-shellLa duplicazione del padding dell'area di sicurezza nei titoli, nei modali e nei wrapper di layout spesso fa sembrare l'interfaccia utente tagliata o troppo grande.

With @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 context: Pagina/Area: Pagina prodotti con aggiornamenti in tempo reale. Ruolo: Etichetta breve o elemento di navigazione. Chiave messaggio `live_update_dynamic_label_to` (Etichetta dinamica di aggiornamento in tempo reale).

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 automatico del contenuto di __CAPGO_KEEP_0__ con CSS per ottenere spaziature doppie.

Trova l'elemento che si sta sovrapponendo

Il solito colpevole è un elemento che utilizza 100vw, Tailwind w-screen, una larghezza in pixel fissata, o un contenitore molto 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 fissata — non dal tag meta viewport stesso.

Conclusioni

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 CapgoE' 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, consulta l'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 Costruzioni nativa per il flusso di lavoro del prodotto in Capgo Costruzioni nativa Capgo Integrazioni for the product workflow in Capgo Integrations, per il flusso di lavoro del prodotto in __CAPGO_KEEP_0__ Integrazioni Integrazione CI/CD GitHub Actions Integration for the implementation detail in GitHub Actions Integration.