Creare App Mobili con SvelteKit e Capacitor

In questo tutorial, inizieremo con una nuova SvelteKit app e passeremo alla creazione di applicazioni mobili native utilizzando Capacitor. Puoi anche aggiungere la Capgo Navigazione e le Transizioni native per un'esperienza di app 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 di imparare 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 Navigazione, le Transizioni e la guida per la disposizione di iOS.

Sul Capacitor

CapacitorJS è un vero cambiamento! Può essere facilmente integrato in qualsiasi progetto web, avvolgendo l'applicazione in una vista 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 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 funzionale nativa 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.

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 avvolgere qualsiasi app web in un contenitore mobile nativo, dobbiamo seguire alcuni passaggi iniziali. In seguito, basta eseguire un comando. sync In primo luogo, installa il

Capacitor Capgo 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 android

cartelle ios cartelle ios e android le 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 installare Xcode.

Inoltre, dovresti trovare un file capacitor.config.ts che contiene alcune impostazioni di base Capacitor utilizzate durante la sincronizzazione. L'unica cosa di cui dovresti preoccuparti è 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

ow that we’ve updated our Capacitor settings, let’s change out Sveltekit project to a static application by downloading the proper static adapter package:

npm i -D @sveltejs/adapter-static

Ora che abbiamo aggiornato le nostre impostazioni __CAPGO_KEEP_0__, passiamo a modificare il nostro progetto Sveltekit in un'applicazione statica scaricando il pacchetto di adattatore statico appropriato: Dopo l'installazione del pacchetto, dovremo modificare 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

file dall'adattatore auto a statico: Con il svelte.config.js 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 = true

Dopo 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 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 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 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, è necessario 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, è necessario essere iscritti 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:

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

Capacitor Live Reload

Ora probabilmente siete abituati a avere il ricarica caldo 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 il ricarica 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 esplorando 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 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 corretti, come mostrato nell'esempio sopra.

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

npx cap copy

Il copy il 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 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 eseguire l'operazione in tempo reale.

Nota che dovresti utilizzare l'IP e il port corretti nella tua configurazione. Il blocco code sopra mostra il port di default di SvelteKit per fini dimostrativi.

Utilizzo dei plugin Capacitor

Vediamo come utilizzare un plugin Capacitor in azione, di cui abbiamo parlato precedentemente. 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>

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 sync

Dopo 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 la Capgo navigazione e le transizioni, e risolvere i problemi di layout comuni di iOS che causano overflow orizzontale o aree sicure tagliate.

Interfaccia utente con un aspetto nativo utilizzando la Capgo Navigazione e le Transizioni native

Lavoro da anni con Ionic per costruire applicazioni cross-platform, ma integrarla con SvelteKit è un processo complicato e raramente vale la pena quando già disponi di Tailwind CSS.

Per un aspetto mobile nativo in un'app SvelteKit + Capacitor, utilizza i plugin Capgo al posto delle kit UI esclusivamente web 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 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 sync

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

Avvolgi le pagine di destinazione in cap-router-outlet, cap-pagee cap-contente chiama setDirection('forward') o setDirection('back') context: HTML testo frammento da una stringa UI Capgo più lunga (chiave genitore `alternatives_cta_questions`). Pagina/area: pagina di confronto delle alternative di Capacitor live-update. Ruolo: lungo paragrafo di marketing o legale. Visto in: pagina alternatives.astro. Preservare i termini di prodotto e marchio Capgo e i termini di sviluppatore esattamente. Chiave del messaggio `alternatives_cta_questions` (Domande per la CTA delle alternative). | Testo frammento HTML da una stringa UI Capgo più lunga (chiave genitore `appflow_cta_questions`). Pagina/area: copia di marketing di confronto/migrazione per Appflow. Ruolo: lungo paragrafo di marketing o legale. Visto in: pagina ionic-appflow.astro. Preservare i termini di prodotto e marchio Capgo e i termini di sviluppatore esattamente. Chiave del messaggio `appflow_cta_questions` (Domande per la CTA di Appflow). | Testo frammento HTML da una stringa UI Capgo più lunga (chiave genitore `capwesome_cta_questions`). Pagina/area: pagina di confronto di Capawesome. Ruolo: lungo paragrafo di marketing o legale. Visto in: pagina capwesome.astro. Preservare i termini di prodotto e marchio Capgo e i termini di sviluppatore esattamente. Chiave del messaggio `capwesome_cta_questions` (Domande per la CTA di Capwesome). | Pagina/area: pagina di servizi di consulenza. Ruolo: sottotitolo o didascalia di sezione. Visto in: pagina consulting.astro. Preservare i termini di prodotto e marchio Capgo e i termini di sviluppatore esattamente. Chiave del messaggio `consulting_faq_subtitle` (Sottotitolo FAQ dei servizi di consulenza). | Pagina/area: copia di marketing di confronto/migrazione per Appflow. Ruolo: breve etichetta UI o elemento di navigazione. Visto in: pagina ionic-appflow.astro, pagina ionic-enterprise-plugins.astro, pagina solutions/ionic-enterprise-plugins.astro. Chiave del messaggio `appflow_plugins_or` (Appflow Plugins o).

prima di navigare. Non duplicare i titoli o i piedi di pagina web quando la navigazione nativa possiede quelle superfici. Using @capgo/capacitor-native-navigation Usare @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-navigazione-nativa Using @capgo/capacitor-transitions.

Aree sicure con Tailwind

Per aree sicure del dispositivo in Tailwind CSS, utilizza @capgo/tailwind-capacitor pubblicato come tailwind-capacitor su npm safe-areas Fornisce utilità 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";

Utilizza utilità come pt-safe, pb-safe, e px-safe invece di aggiungerle env(safe-area-inset-*) manualmente. 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 Sovrapposizione Orizzontale)

Se il contenuto sembra essere tagliato, spostato o scorrevole orizzontalmente su iOS, aggiungere o modificare il tag viewport da solo non risolve di solito il problema. Esegui questi controlli in ordine. overflow-x: hidden Assicurati di aver applicato correttamente il tag meta viewport

In

, impostare il tag meta viewport in src/app.htmlGestisci l'area di sicurezza di iOS da un solo wrapper radice <head>:

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

Creare un unico contenitore dell'applicazione e applicare il padding di sicurezza dell'area lì — non in componenti nidificati multipli:

Avvolgi tutto il contenuto della pagina all'interno di

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

La duplicazione del padding di sicurezza dell'area nei titoli, nei modali e nei contenitori di layout spesso fa sembrare il UI tagliato o troppo grande. .app-shellCon

@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitoresprimere lo stesso padding con utilità come pt-safe pb-safe px-safe su quella singola shell.

Imposta Capacitor iOS contentInset a never contexto: 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-*) Mescolare __CAPGO_KEEP_0__'s automatico contenuto insetto con CSS

il padding è una causa comune di doppia spaziatura.

Trova l'elemento che sta veramente sovrascrivendo 100vwTailwind w-screenuna larghezza di pixel fissi, o una 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-screenduplicati padding di area sicura, 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 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 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, collega 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.