Building Mobile Apps with SvelteKit and Capacitor

In ce tutoriel, nous allons commencer par une nouvelle SvelteKit application et passer à la mise en œuvre de développement mobile natif en utilisant Capacitor. Vous pouvez également ajouter Capgo de la navigation et des transitions natives 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 une application mobile native sans avoir besoin 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 une application mobile en utilisant Capacitor, avec une navigation, des transitions et des conseils de mise en page iOS optionnels Capgo.

À 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 application mobile native fantastique 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 mobile native fonctionnelle 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 une nouvelle dist répertoire à la racine de votre projet.

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

Adding Capacitor to Your SvelteKit App

Pour emballer toute application web dans un conteneur mobile natif, nous devons suivre quelques étapes initiales. Ensuite, il suffit de lancer une commande unique. sync Premièrement, installez le

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

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

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

ios dossiers. And android les dossiers de votre projet SvelteKit.

Ces projets sont réellement natifs !

Pour accéder au projet Android ultérieurement, 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 webDir, qui doit pointer vers le résultat de votre commande de build. Actuellement, cela est incorrect.

Pour corriger cela, ouvrez le capacitor.config.ts et mettez à jour le 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

HTML text fragment from a longer Capgo UI string (parent key `solutions_cordova_to_capacitor_ai_step2_body`). Page/area: Capgo solutions marketing page. Role: Website copy sentence. Seen in: page solutions/cordova-to-capacitor-ai.astro. Message key `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body). Maintenant que nous avons mis à jour nos paramètres __CAPGO_KEEP_0__, changeons notre projet Sveltekit en application statique en téléchargeant le bon paquet d'adaptateur statique : Après l'installation du paquet, nous devrons modifier

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

svelte.config.js pour passer de l'adaptateur automatique à statique : Une fois le fichier mise à jour, nous devrons ajouter un prérender option en créant un +layout.js page à src/routes et ajoutez simplement le code suivant à +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 contexte : texte fragment HTML d'un texte plus long de Capgo UI (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).

Vous pouvez le faire en exécutant les commandes suivantes :

npm run build
npx cap sync

La première commande npm run build construira votre projet SvelteKit et copiera la mise en page statique, tandis que la deuxième commande npx cap sync syncra toutes les web code dans les bons endroits des plateformes natives afin qu'elles puissent être affichées dans une application.

De plus, la commande de synchronisation pourrait mettre à jour les plateformes natives et installer des plugins, donc lorsque vous installez de nouveaux Capacitor plugins, il est temps de relancer npx cap sync sans même s'en rendre compte, vous avez maintenant complété le processus, alors voyons l'application sur un appareil !

Développer et déployer des applications natives

Pour développer des applications iOS, vous devez avoir

Xcode Xcode installé et, pour les applications Android, vous devez avoir Android Studio installé. De plus, si vous prévoyez 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 les Capacitor CLI pour ouvrir facilement les projets natifs :

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. Dans Android Studio, il vous suffit d'attendre que tout soit prêt, et vous pouvez déployer votre application sur un appareil connecté sans modifier les paramètres. Voici un exemple :

Dans Xcode, vous devez configurer votre compte de signature pour déployer votre application sur un appareil réel au lieu du simulateur. Si vous n'avez pas fait cela avant, Xcode vous guide à travers le processus (mais encore une fois, vous devez être inscrit au programme développeur). Une fois cela fait, vous pouvez simplement appuyer sur la touche play pour exécuter l'application sur votre appareil connecté, que vous pouvez sélectionner en haut. Voici un exemple :

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

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

Capacitor Live Reload

À ce stade, vous êtes probablement habitué à avoir la mise à niveau 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 à niveau en temps réel sur votre réseau en ayant l'application Capacitor charger le contenu à partir de l'URL spécifique.

La première étape 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

Recherchez ensuite l'adresse IPv4.

On peut instruire Capacitor à charger 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;

Soyez sûr de utiliser l'adresse IP et le port correctscomme montré dans l'exemple ci-dessus.

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

npx cap copy

Le copy ce commandement est similaire à syncmais elle ne copiera que les 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 ! N'oubliez pas Keep in mind

You can now deploy your app one more time through Android Studio or Xcode. After that, if you change something in your Svelte app, Si vous installez de nouveaux plugins comme la caméra, il est toujours nécessaire de reconstruire votre projet natif. Cela est dû au fait 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 à des fins de démonstration.

Utilisation des plugins Capacitor

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

Ce plugin n'a rien de spécial, mais il affiche le dialogue de partage natif ! Le plugin de partageNous n'avons besoin que d'importer le package et d'appeler la share() fonction de notre application, alors changeons donc le src/routes/index.svelte Comme mentionné précédemment, lors de l'installation de nouveaux plugins, nous devons effectuer une opération de synchronisation et puis redéployer l'application sur notre appareil. Pour cela, exécutez la commande suivante :

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

Après avoir cliqué sur le bouton, vous pouvez voir le dialogue de partage natif en action !

npx cap sync

Nous n'avons besoin que d'importer le package et d'appeler la

Ensuite, vous pouvez rendre l'application plus native sur iOS et Android avec Capgo de navigation et de transitions, 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 Capgo de navigation et de transitions natives

J'ai travaillé pendant des années avec Ionic pour construire des applications cross-plateformes, mais l'intégration avec SvelteKit est hacky et rarement justifiée lorsque vous avez déjà Tailwind CSS.

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

• @capgo/capacitor-native-navigation — barre de navigation native, Liquid Glass barre de tab sur iOS, et un style de barre de tab flou sur Android. Votre routeur SvelteKit conserve l'état de la route ; le plugin gère le chrome natif.
• @capgo/capacitor-transitions — transitions de page à la manière d'Ionic et un retour arrière par swipe sur l'écran sur iOS, 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 d'insertion CSS 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',
  },
});

Affichez une barre de tab de verre liquide (iOS utilise la mise en page système ; Android utilise un fond de fenêtre WebView floué) :

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 appelez setDirection('forward') ou setDirection('back') Avant de naviguer. N'ajoutez pas de titres ou de pieds de page web lorsque la navigation native en possède la maîtrise.

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

Zones de sécurité avec Tailwind

Pour les zones de sécurité des appareils dans Tailwind CSS, utilisez @capgo/tailwind-capacitor (publié sous tailwind-capacitor sur npm). Il fournit safe-areas des utilitaires et d'autres plugins Tailwind compatibles avec 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 utilitaires comme pt-safe, pb-safe, et px-safe au lieu de les répandre 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 scrollable horizontalement sur iOS, ajouter plus ou ajuster le tag de vueport seul n'y suffit généralement pas. Travaillez à travers ces vérifications dans l'ordre. overflow-x: hidden Assurez-vous que le tag de métadonnées de vueport est appliqué correctement

In

, définissez le tag de métadonnées de vueport dans src/app.htmlGérez la zone de sécurité iOS à partir d'un seul wrapper racine <head>:

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

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

Enveloppez tout le contenu de la page à l'intérieur de

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

Le doublonnement de la mise en forme de la zone de sécurité dans les en-têtes, les modaux et les enveloppes de mise en page fait souvent que l'interface utilisateur semble coupée ou trop grande. .app-shellAvec

@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitor, vous pouvez exprimer le même padding avec des utilitaires comme pt-safe pb-safe px-safe sur cette seule coquille.

Fixez Capacitor iOS contentInset à never context : Page/zone : Page de produit de mise à jour en direct. Rôle : Étiquette de navigation ou élément UI court. Clé de message `live_update_dynamic_label_to` (Étiquette dynamique de mise à jour en direct).

premier capacitor.config.tsDans contentInsetMode: 'css', préférez l'inset natif désactivé et laissez CSS (ou la navigation native)

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-*) Mélanger les inset automatiques de contenu de __CAPGO_KEEP_0__ avec CSS

la mise en page est une cause courante de double espacement.

Trouvez l'élément qui déborde vraiment  :   100vwTailwind w-screen, une largeur fixe en pixels, ou une min-width.

Safari Web Inspector, exécutez :

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

Avec Tailwind, remplacez w-screen avec w-full lorsque possible. De nombreux problèmes de débordement horizontal proviennent de 100vw / w-screen, une duplication de la marge de sécurité de l'aire sûre, ou d'un conteneur à largeur fixe — et non de la balise meta de la vue portée elle-même.

Conclusion

Capacitor est une excellente option pour créer des applications natives en fonction 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 Capgo, il est même plus facile d'ajouter des mises à jour en direct à votre application, vous assurant que vos utilisateurs aient toujours accès aux dernières fonctionnalités et correctifs de bogues.

Si vous souhaitez apprendre à ajouter Capgo à votre application SvelteKit, consultez l'article suivant :

Découvrez comment Capgo peut vous aider à créer des applications meilleures et plus rapides Inscrivez-vous à un compte gratuit aujourd'hui.

Continuez de la section Building Mobile Apps with SvelteKit et Capacitor

Si vous utilisez Building Mobile Apps with SvelteKit et Capacitor pour planifier l'automatisation CI/CD, connectez-l’avec Capgo CI/CD pour le flux de travail du produit dans Capgo CI/CD, Capgo Native Builds pour le flux de travail du produit dans Capgo Native Builds, Intégrations Capgo pour le flux de travail du produit dans Capgo Intégrations Intégration CI/CD pour les détails d'implémentation dans Intégration CI/CD, et GitHub Intégration d'actions pour les détails d'implémentation dans GitHub Intégration d'actions.