Costruire App Mobili con SvelteKit e Capacitor

In questo tutorial, inizieremo con una nuova app SvelteKit e passeremo alla sviluppo mobile nativo utilizzando __CAPGO_KEEP_0__. Puoi anche aggiungere __CAPGO_KEEP_1__ Navigazione e Transizioni Nativa per un'app mobile nativa e utilizzare tailwind-__CAPGO_KEEP_2__ per aree sicure. 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.

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

Aggiunta di Capacitor all'app SvelteKit

Per pacchettare qualsiasi app web in un contenitore mobile nativo, dobbiamo seguire alcuni passaggi iniziali. Dopo di che, basta eseguire un comando singolo sync command.

Prima di tutto, installa il Capacitor CLI 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.

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

In questo punto, dovresti vedere nuove ios e android cartelle nel tuo progetto SvelteKit.

Sono progetti nativi reali!

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

Inoltre, dovresti trovare un file capacitor.config.ts 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 directory del web:

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 di Capacitor, passiamo il nostro progetto Sveltekit a un'applicazione statica scaricando il pacchetto di adattatore statico appropriato:

npm i -D @sveltejs/adapter-static

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

da adattatore automatico a statico: Con il svelte.config.js aggiornato, dovremo aggiungere un'opzione di prerender creando una pagina +layout.js src/route e basta aggiungere l'esportazione seguente a +layout.js:

export const prerender = true

Dopo aver aggiunto e aggiornato la +layout.js pagina, avremo bisogno di aggiungere le nostre piattaforme mobili, ricostruire il nostro progetto per creare la build 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.

Inoltre, il comando di sincronizzazione potrebbe aggiornare le piattaforme native e installare i plugin, quindi quando installi nuovi Capacitorplugin npx cap sync , è il momento di eseguire

ancora.

Senza rendersene conto, hai ora completato il processo, quindi vediamo l'applicazione su un dispositivo!

Sviluppa e distribuisci applicazioni native Per sviluppare app iOS, hai bisogno di avere Xcode installato, e per le app Android, hai bisogno di avere Android Studio

If you’re new to native mobile development, you can use the Capacitor CLI to easily open both native projects:

npx cap open ios
npx cap open android

Una volta che hai configurato 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, devi configurare il tuo account di firma per distribuire la tua app su un dispositivo reale invece che solo sul simulatore. Se non l'hai fatto 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 live reload 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 live reload 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 en0

On Windows, esegui:

ipconfig

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

Le copy La comandi è simile a syncma lo farà solo copierà solo le modifiche apportate al cartella 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 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 stati modificati, 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 di SvelteKit a scopo dimostrativo.

Utilizzo dei Plugin Capacitor

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

npm i @capacitor/share

There’s nothing fancy about il Condividi plugin, but it brings up the native share dialog! For this, we now only need to import the package and call the share() funzione from our app, so let’s change the src/routes/index.svelte to this:

<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, when installing new plugins, we need to perform a sync operation and then redeploy the app to our device. To do this, run the following command:

npx cap sync

Dopo aver premuto il pulsante, you can witness the beautiful native share dialog in action!

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.

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

I’ve worked for years with Ionic To costruire applicazioni cross-platform, ma integrarla con SvelteKit è un po' artigianale e raramente vale la pena quando già ne hai una Per un aspetto nativo su dispositivi mobili in un'app SvelteKit + __CAPGO_KEEP_0__ utilizza i plugin __CAPGO_KEEP_1__ al posto di kit UI web come Konsta UI:.

@Capacitor/Capgo-native-navigation

• @capgo/capacitor-native-navigation @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions
• @capgo/capacitor-transitions Installa entrambi:

Configura la navigazione nativa con modalità CSS inset per far rispettare il contenuto web le barre native:

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

Rendi una barra delle schede Liquido Glass (su iOS viene utilizzato il rendering di sistema; su Android viene utilizzato uno sfondo sfocato di WebView):

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

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

Aggiungi transizioni di pagina native nel contenitore dell'app:

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

Avvolgi le pagine di destinazione 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>

__CAPGO_KEEP_0__ cap-router-outlet, cap-page, e cap-content, e chiamare setDirection('forward') o setDirection('back') prima di navigare. Non duplicare i testi di intestazione o piè di pagina quando la navigazione nativa gestisce queste superfici.

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

Aree sicure con Tailwind

Per le aree sicure del dispositivo in Tailwind CSS, utilizza @capgo/tailwind-capacitor (pubblicato come tailwind-capacitor On npm). Offre safe-areas strumenti 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";

Utilizza strumenti come pt-safe, pb-safe, e px-safe al posto di aggiungerli env(safe-area-inset-*) a mano. Il progetto è attivamente sviluppato — se qualcosa manca per la tua configurazione SvelteKit, apri una PR su GitHub.

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

Inserisci src/app.html, impostare il meta tag di viewport in <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Gestisci l'area sicura di iOS da un unico wrapper radice

Creare un unico contenitore per l'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);
}

Avvolgi tutta il contenuto della pagina dentro .app-shell. Il padding dell'area sicura duplicato nei titoli, nei modali e nei wrapper di layout spesso fa sembrare l'interfaccia utente tagliata o troppo grande.

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

Imposta Capacitor iOS contentInset a never Inizia con

In capacitor.config.tspreferisci l'inserimento nativo disabilitato e lascia che CSS (o la navigazione nativa) gestisca l'area sicura: contentInsetMode: 'css'Mischia l'inserimento automatico del contenuto di __CAPGO_KEEP_0__ con CSS

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-*) Trova l'elemento che sta veramente sovrapponendo

L'elemento solito colpevole è un elemento che utilizza

, Tailwind 100vw, una larghezza in pixel fissata, o una larghezza w-screenIn Safari Web Inspector, esegui: min-width.

Con Tailwind, sostituisci

[...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 With 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 costruire 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 gli 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:

Scopri come Capgo possa aiutarti a costruire applicazioni migliori in modo più veloce, iscrivi gratuitamente 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, connettilo con Capgo CI/CD per il flusso di lavoro del prodotto in Capgo 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 i dettagli di implementazione in Integrazione CI/CD, e Azioni di integrazione di GitHub per i dettagli di implementazione in Azioni di integrazione di GitHub