Building Mobile Apps with SvelteKit and Capacitor

Dans ce tutoriel, nous allons commencer par un nouveau SvelteKit app et transition vers le développement mobile natif en utilisant Capacitor. Vous pouvez également ajouter Capgo Navigation et Transitions natifs pour un sentiment de mobile natif, et utiliser tailwind-capacitor pour les zones de sécurité.

Capacitor vous permet de convertir facilement votre application web SvelteKit en application mobile native sans nécessiter de modifications importantes ou d'apprendre une nouvelle compétence comme React Native.

Suivez ce guide étape par étape pour transformer votre application SvelteKit en application mobile en utilisant Capacitor, avec la navigation native facultative Capgo, les transitions et la guidance de mise en page iOS.

À propos de Capacitor

CapacitorJS est un jeu de hasard ! Il peut être intégré facilement dans tout projet web, en enveloppant votre application dans une vue web native et en générant des projets Xcode et Android Studio natifs pour vous. Ses plugins fournissent accès aux fonctionnalités de dispositif natif comme la caméra via un pont JavaScript.

Capacitor vous permet de créer une fantastique application mobile native sans aucune configuration compliquée ou courbe d'apprentissage raide. Sa maigre API et sa fonctionnalité épurée rendent facile son intégration dans votre projet. Vous serez émerveillé par la simplicité avec laquelle vous pouvez atteindre une application native fonctionnelle complète avec Capacitor !

Préparation de votre application SvelteKit

Pour créer une nouvelle application SvelteKit, exécutez la commande suivante :

npm create svelte@latest my-app
cd my-app
npm install
npm run build

Après avoir exécuté la build commande, vous devriez voir un nouveau dist dossier à la racine de votre projet.

Ce dossier sera utilisé par Capacitor plus tard, mais pour l'instant, nous devons le configurer correctement.

Intégration de Capacitor à votre application SvelteKit

Pour emballer n'importe quelle application web dans un conteneur mobile natif, nous devons suivre quelques étapes initiales. Ensuite, il suffit de lancer une commande unique sync commande.

Premièrement, installez le Capacitor CLI comme dépendance de développement et configurez-le dans votre projet. Lors de la configuration, vous pouvez appuyer sur « entrer » pour accepter les valeurs par défaut pour le nom et l'ID de l'application.

Ensuite, installez le package de base et les packages pertinents pour les plateformes iOS et Android.

Finalement, ajoutez les plateformes, et Capacitor créera des dossiers pour chaque plateforme à la racine de votre projet :

# 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

À ce stade, vous devriez voir de nouveaux dossiers « ios » et context : Page/zone : Site web de marketing Capgo. Rôle : Étiquette de navigation ou élément UI court. Vu dans : page trust.astro. Clé de message `et` (Et). dossiers « android »

dans votre projet SvelteKit.

To accéder au projet Android plus tard, vous devez installer Android Studio. Pour iOS, vous avez besoin d'un Mac et devriez installer Xcode.

De plus, vous devriez trouver un fichier capacitor.config.ts qui contient certaines paramètres de base Capacitor utilisés lors de la synchronisation. La seule chose dont vous devez vous soucier est le webDircontexte : fragment de texte HTML d'une chaîne de Capgo plus longue (clé parent `solutions_cordova_to_capacitor_ai_step2_body`). Page/zone : page de marketing de solutions de Capgo. Rôle : phrase de copie du site web. Vu dans : page solutions/cordova-to-capacitor-ai.astro. Clé de message `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body).

, qui doit pointer vers le résultat de votre commande de build. Actuellement, il est incorrect. capacitor.config.ts __CAPGO_KEEP_0__.config.ts répertoireWeb:

import { CapacitorConfig } from '@capacitor/cli'

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

export default config

Une fois que nous avons mis à jour nos paramètres Capacitor, il est temps de modifier notre projet Sveltekit en application statique en téléchargeant le bon package d'adaptateur statique :

npm i -D @sveltejs/adapter-static

Après l'installation du package, nous devrons modifier fichier de configuration de svelte.config.js du adaptateur automatique à statique :

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

Avec le fichier de configuration de svelte.config.js mis à jour, nous devrons ajouter une option de pré-réussite en créant une page +layout.js page de mise en page +layout.js page de mise en page +layout.js page de mise en page +layout.js page de mise en page +layout.js page de mise en page +layout.js page de mise en page +layout.js src/routage et ajoutez simplement les éléments suivants à l'export de +layout.js:

export const prerender = true

Après avoir ajouté et mis à jour le +layout.js page, nous devrons ajouter nos plateformes mobiles, reconstruire notre projet pour créer le build context

répertoire

npm run build
npx cap sync

Vous pouvez le faire en exécutant les commandes suivantes : npm run build La première commande npx cap sync will sync all the web code into the right places of the native platforms so they can be displayed in an app.

De plus, la commande de synchronisation peut mettre à jour les plateformes natives et installer des plugins, donc lors de l'installation de nouveaux Capacitor plugins, il est temps de relancer npx cap sync à nouveau.

Sans vous en rendre compte, vous avez maintenant terminé le processus, alors voyons l'application sur un appareil !

Construire et Déployer des Applications Natives

Pour développer des applications iOS, vous devez avoir Xcode installé, et pour les applications Android, vous devez avoir Android Studio installé. De plus, si vous prévoyez de distribuer votre application sur l'app store, vous devez vous inscrire au programme Apple Developer pour iOS et au Google Play Console pour Android.

Si vous êtes nouveau dans le développement mobile natif, vous pouvez utiliser le Capacitor CLI pour ouvrir facilement les projets natives :

npx cap open ios
npx cap open android

Une fois que vous avez configuré vos projets natifs, déployer votre application sur un appareil connecté est facile.

En Xcode, vous devez configurer votre compte de signature pour déployer votre application sur un appareil réel au lieu du simulateur.

Félicitations ! Vous avez réussi à déployer votre application web SvelteKit sur un appareil mobile.

Attendez, il y a aussi une façon plus rapide de procéder pendant le développement…

Capacitor Live Reload

Vous êtes probablement habitué à avoir la mise à jour en temps réel avec tous les frameworks modernes, et la bonne nouvelle est que vous pouvez avoir la même fonctionnalité sur un appareil mobile avec un minimum d'effort !

Activer l'accès à votre application hébergée localement avec la mise à jour en temps réel On votre réseau en faisant en sorte que l'application Capacitor charge le contenu à partir de l'URL spécifique.

Le premier pas consiste à déterminer votre adresse IP locale. Si vous utilisez un Mac, vous pouvez trouver cela en exécutant la commande suivante dans le terminal :

ipconfig getifaddr en0

Sur Windows, exécutez :

ipconfig

Regardez ensuite l'adresse IPv4.

On peut faire en sorte que Capacitor charge l'application directement depuis le serveur en ajoutant une autre entrée à notre capacitor.config.ts fichier :

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;

Assurez-vous d'utiliser l'adresse IP et le port corrects, comme montré dans l'exemple ci-dessus.

Maintenant, nous pouvons appliquer ces modifications en les copiant vers notre projet natif :

npx cap copy

Le copy La commande est similaire à sync, mais elle ne mettra à jour que la copie des modifications apportées au dossier web et la configuration, sans mettre à jour le projet natif.

Vous pouvez maintenant déployer votre application une fois de plus à l'aide d'Android Studio ou Xcode. Après cela, si vous modifiez quelque chose dans votre application Svelte, l'application se rechargera automatiquement et affichera les modifications !

Prenez en compte que si vous installez de nouveaux plugins comme la caméra, il est encore nécessaire de reconstruire votre projet natif. C'est parce que les fichiers natifs sont modifiés, et cela ne peut pas être fait en temps réel.

Notez que vous devez utiliser l'IP et le port corrects dans votre configuration. Le bloc code ci-dessus montre le port par défaut de SvelteKit pour des fins de démonstration.

Utilisation des Capacitor Plugins

Examinons maintenant comment utiliser un plugin Capacitor en action, que nous avons mentionné quelques fois avant. Pour cela, nous pouvons installer un plugin simple en exécutant :

npm i @capacitor/share

Rien de particulier n'est à dire sur le plugin de partage, mais il affiche le dialogue de partage natif ! Pour cela, nous n'avons besoin désormais que d'importer le package et d'appeler la share() fonction de notre application, alors changeons donc le src/routes/index.svelte à ceci :

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

Comme mentionné précédemment, lors de l'installation de nouveaux plugins, nous devons effectuer une opération de synchronisation et redéployer ensuite l'application sur notre appareil. Pour cela, exécutez la commande suivante :

npx cap sync

Après avoir cliqué sur le bouton, vous pouvez assister à la belle apparition du dialogue de partage natif en action !

Ensuite, vous pouvez rendre l'application plus native sur iOS et Android avec la navigation et les transitions Capgo et corriger les problèmes de mise en page iOS courants qui entraînent un débordement horizontal ou des zones de sécurité coupées.

UI native avec les transitions et la navigation Capgo

J'ai travaillé pendant des années avec Ionic To créer des applications multiplateformes, mais l'intégrer avec SvelteKit est hacky et rarement valable lorsque vous avez déjà Tailwind CSS.

Pour un sentiment natif mobile dans une application SvelteKit + Capacitor , utilisez les Capgo plugins au lieu des kits UI web uniquement comme Konsta UI :

• @capgo/capacitor-native-navigation — barre de navigation native, Liquid Glass barre de tabs sur iOS, et un style de barre de tabs flou sur Android. Votre routeur SvelteKit conserve l'état de la route ; le plugin possède la barre de chrome native.
• @capgo/capacitor-transitions — transitions de page à la manière d'Ionic et un retour arrière par swipe sur l'édge sur iOS dans la couche WebView, sans adopter l'UI d'Ionic.

Installez les deux :

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

Configurez la navigation native avec le mode CSS inset pour que le contenu web respecte les barres natives :

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

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

Rendre une barre de tabs en verre liquide (iOS utilise la mise en page système ; Android utilise un arrière-plan flou de 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}`);
});

Ajoutez des transitions de page natives dans votre coquille d'application :

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

Enveloppez les pages routées dans cap-router-outlet, cap-pageet cap-contentet appeler setDirection('forward') ou setDirection('back') avant de naviguer. N'ajoutez pas les en-têtes ou les pieds de page web lorsqu'une navigation native contrôle ces surfaces.

Voir les guides complets : En utilisant @capgo/capacitor-navigation-native et En utilisant @capgo/capacitor-transitions.

Aires sûres avec Tailwind

Pour les zones sûres de l'appareil dans Tailwind CSS, utilisez @capgo/tailwind-capacitor (publié sous tailwind-capacitor On npm). Il fournit safe-areas des outils et d'autres plugins de Tailwind compatibles Capacitor:

bun add -D tailwind-capacitor

Dans src/app.css:

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

Utilisez des outils comme pt-safe, pb-safe, et px-safe au lieu de les ajouter env(safe-area-inset-*) manuellement. Le projet est actuellement développé — si quelque chose manque pour votre configuration SvelteKit, ouvre une PR sur GitHub.

Résoudre les problèmes de mise en page iOS (Vueport, Zone de sécurité, et Débordement horizontal)

Si le contenu semble coupé, décalé ou déroulable horizontalement sur iOS, ajouter plus de overflow-x: hidden ou ajuster la balise de vueport seule ne suffit généralement pas pour résoudre le problème. Travaillez à travers ces vérifications dans l'ordre.

Assurez-vous que la balise meta de vueport est appliquée correctement

In src/app.htmlconfigurez la balise meta de viewport dans <head>:

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

Gérez l'espace sûr d'iOS à partir d'un seul enveloppe racine

Créez une coquille d'application unique et appliquez-y une mise en forme de zone sûre — pas dans plusieurs composants imbriqués :

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

Enveloppez tout le contenu de la page à l'intérieur de .app-shell. La mise en forme de zone sûre dupliquée dans les en-têtes, les modaux et les enveloppes de disposition rend souvent l'interface utilisateur coupée ou trop grande.

Avec @capgo/tailwind-capacitorvous pouvez exprimer la même mise en forme avec des utilitaires comme pt-safe pb-safe px-safe sur cette coquille unique.

Configurez Capacitor iOS contentInset à :context="Page/zone : Page de mise à jour en direct. Rôle : Étiquette de l'interface utilisateur courte ou élément de navigation. Clé de message `live_update_dynamic_label_to` (Étiquette de mise à jour en direct dynamique vers)." never premier

En capacitor.config.ts, préférez les éléments natifs désactivés et laissez CSS (ou la navigation native) gérer l'espace sûr : contentInsetMode: 'css'Mélanger les marges automatiques de __CAPGO_KEEP_0__ avec les marges CSS est une cause courante de double espace.

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-*) Le coupable habituel est un élément utilisant

, Tailwind

, une largeur fixe en pixels, ou une large 100vwDans l'inspecteur Web Safari, exécutez : w-screenAvec Tailwind, remplacez min-width.

les marges CSS

[...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,
  }));

les marges CSS w-screen avec w-full lorsque cela est possible. De nombreux problèmes de débordement horizontal proviennent de 100vw / w-screenune mise en page de zone de sécurité dupliquée, ou d'un conteneur de largeur fixe — et non de la balise meta viewport elle-même.

Conclusion

Capacitor est une excellente option pour créer des applications natives sur la base d'un projet web existant, offrant une façon simple de partager code et de maintenir une interface utilisateur cohérente.

Et avec l'ajout de Capgoen tant que fragment de texte HTML d'une chaîne de Capgo (clé de message `submitting_a_pr_to_capgo`). Page/zone : Site web de marketing de Capgo. Rôle : Texte du site web. Vu dans : page contributing.astro. Conservez les termes de produit/branche et les termes de développeur exactement. Clé de message `submitting_a_pr_to_capgo` (Soumettre Un Pr À Capgo).

If you would like to learn how to add Capgo to your SvelteKit app, take a look at the next article:

Si vous souhaitez apprendre à ajouter Capgo à votre application SvelteKit, consultez l'article suivant : Apprenez comment __CAPGO_KEEP_0__ peut vous aider à créer des applications meilleures et plus rapides. inscrivez-vous à un compte gratuit aujourd'hui.

Continuez de Building Mobile Apps avec SvelteKit et Capacitor

Si vous utilisez Building Mobile Apps avec SvelteKit et Capacitor pour planifier l'automatisation de CI/CD, connectez-l’avec Capgo CI/CD pour le flux de workflow du produit dans Capgo CI/CD, Capgo Builds natifs pour le flux de workflow du produit dans Capgo Builds natifs, Capgo Intégrations pour le flux de workflow du produit dans Capgo Intégrations, Intégration CI/CD contexte : Page/zone : Section de marketing des intégrations. Rôle : En-tête de section ou de page. Vu dans : page integrations.astro. Conservez les termes de produit/marque et les termes de développeur exactement. Clé de message `integrations_title` (Titre des intégrations). GitHub Actions d'intégration pour le détail d'implémentation dans GitHub Actions d'intégration.