Building Mobile Apps with SvelteKit and Capacitor

Dans ce tutoriel, nous allons commencer par une nouvelle 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 est un jeu de changement ! 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 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!

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

After avoir exécuté la commande, vous devriez voir un nouveau dossier à la racine de votre projet. build Ce dossier sera utilisé par Capgo plus tard, mais pour l'instant, nous devons le configurer correctement. dist Intégrer Capgo à votre application 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

__CAPGO_KEEP_0__ sync __CAPGO_KEEP_1__

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. Capacitor CLI Finalement, ajoutez les plateformes, et Capgo créera des dossiers pour chaque plateforme à la racine de votre projet :

Après avoir exécuté la commande, vous devriez voir un nouveau dossier à la racine de votre projet. Ce dossier sera utilisé par Capgo plus tard, mais pour l'instant, nous devons le configurer correctement.

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

At ce stade, vous devriez voir de nouvelles ios et android dossiers

dans votre projet SvelteKit.

Ce sont des projets natifs réels ! Pour accéder au projet Android ultérieurement, vous devez installerAndroid Studio . Pour iOS, vous avez besoin d'un Mac et devriez installer.

Xcode capacitor.config.ts le fichier de votre projet, qui contient quelques paramètres de base Capacitor utilisés lors de la synchronisation. La seule chose dont vous devez vous préoccuper est le webDirqui doit pointer vers le résultat de votre commande de build. Actuellement, il est incorrect.

Pour corriger cela, ouvrez le capacitor.config.ts fichier 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

Maintenant que nous avons mis à jour nos paramètres de Capacitor, essayons 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 svelte.config.js ce fichier de l'adaptateur automatique en 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

Enfin, avec svelte.config.js mis à jour, nous devrons ajouter une pré-render option en créant un +layout.js page à src/routes et il suffit d'ajouter l'export suivant à +layout.js:

export const prerender = true

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

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 syncronisera tous les web code dans les bons endroits des plateformes natives afin qu'ils puissent être affichés 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 à nouveau.

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

Construire et Déployer des Applications Natives

To 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 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, vous n'avez qu'à 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 'Lancer' 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 :

Attends une minute, il existe une méthode encore plus rapide pour procéder à cela lors du développement…

Capacitor Live Reload

À ce stade, 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 bénéficier de la même fonctionnalité sur un appareil mobile avec un minimum d'efforts !

Activez l'accès à votre application hébergée localement avec mise à jour en temps réel sur votre réseau en ayant l'application Capacitor charger le contenu à partir de l'adresse 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 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;

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

La copy commande est similaire à sync, mais 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. __CAPGO_KEEP_0__ et montrez les changements !

Prenez en compte que : Si vous installez de nouveaux plugins comme la caméra, il est encore 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 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 très compliqué dans le plugin de partagemais il ouvre la boîte de dialogue de partage native ! Pour cela, nous n'avons désormais besoin que d'importer le package et d'appeler la share() fonction de notre application, donc changeons le src/routes/index.svelte en cela :

<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 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 ce faire, exécutez la commande suivante :

npx cap sync

Après avoir cliqué sur le bouton, vous pouvez assister à la belle boîte de dialogue de partage native 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 Capgo Navigation et Transitions Native

J'ai travaillé pendant des années avec Ionic pour construire des applications cross-platform, mais l'intégration avec SvelteKit est hacky et rarement intéressante 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, barre de Liquid Glass de tab sur iOS, et un style de barre de tab flou sur Android. Le routeur SvelteKit conserve l'état de la route ; le plugin possède la barre de chrome native.
• @capgo/capacitor-transitions — Les transitions de page Ionic et la remontée arrière iOS dans la couche WebView, sans adopter l'interface utilisateur 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 en verre liquide (iOS utilise la mise en page système ; Android utilise un arrière-plan 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 les 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 possède ces surfaces.

Consultez les guides complets : Utilisation de @capgo/capacitor-native-navigation And En utilisant @capgo/capacitor-transitions.

Aires de sécurité avec Tailwind

Pour les aires de sécurité du dispositif dans Tailwind CSS, utilisez @capgo/tailwind-capacitor paru sur __CAPGO_KEEP_0__. tailwind-capacitor Cela fournit des utilitaires et d'autres plugins de Tailwind compatibles avec npm : safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

Utilisez des utilitaires tels que src/app.css:

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

, et pt-safe, pb-safeau lieu de les répandre px-safe et env(safe-area-inset-*) par votre propre main. Le projet est actuellement développé — si quelque chose manque pour votre configuration SvelteKit, ouvrir 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 overflow-x: hidden ou ajuster seul le tag de vueport ne suffit généralement pas. Travaillez à travers ces vérifications dans l'ordre.

Assurez-vous que le tag de métadonnée de vueport est appliqué correctement

In src/app.html, définissez le tag de métadonnée de vueport dans <head>:

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

Gérer la zone de sécurité iOS à partir d'un seul wrapper racine

Créez une coquille d'application unique et appliquez-y la mise en page de la zone de sécurité — et non 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 .app-shellLe doublonnement de la mise en page de la zone de sécurité dans les en-têtes, les modaux et les enveloppes de mise en page peut rendre l'interface utilisateur coupée ou trop grande.

With @capgo/tailwind-capacitor, vous pouvez exprimer la même marge avec des utilitaires comme pt-safe pb-safe px-safe sur cette seule coquille.

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

premier capacitor.config.tsEn contentInsetMode: 'css', préférez l'insérer 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 marges automatiques de contenu de __CAPGO_KEEP_0__ avec CSS

Trouvez l'élément qui déborde vraiment

Le coupable habituel est un élément utilisant 100vw, Tailwind w-screen, une largeur de pixels fixe, ou une large min-width.

Inpecteur Web Safari, 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é, ou un conteneur à largeur fixe — et non de la balise meta de la vue d'ensemble elle-même.

Conclusion

Capacitor est une excellente option pour créer des applications natives basées sur 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 CapgoVous pouvez même ajouter des mises à jour en temps réel à votre application, vous assurant que vos utilisateurs aient toujours accès aux dernières fonctionnalités et corrections de bogues.

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

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

Continuez à partir de Building Mobile Apps with SvelteKit et Capacitor

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