Créer des applications mobiles avec SvelteKit et Capacitor

Dans ce tutoriel, nous allons commencer avec une nouvelle application SvelteKit et passer à un développement mobile natif en utilisant __CAPGO_KEEP_0__. Vous pouvez également ajouter __CAPGO_KEEP_1__ Native Navigation et Transitions pour un sentiment de mobile natif, et utiliser tailwind-__CAPGO_KEEP_2__ pour les zones de sécurité. 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.

Building Mobile Apps with SvelteKit and Capacitor

Suivez ce guide étape par étape pour transformer votre application SvelteKit en application mobile en utilisant Capacitor, avec une navigation native facultative Capgo, des transitions et des conseils 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 un 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 mise en place 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 impressionné 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 commande, vous devriez voir un nouveau dossier à la racine de votre projet. build Ce dossier sera utilisé par __CAPGO_KEEP_0__ plus tard, mais pour l'instant, nous devons le configurer correctement. dist Intégration de __CAPGO_KEEP_0__ à votre application SvelteKit

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

Capacitor est un outil puissant qui vous permet de créer des applications mobiles natives sans avoir besoin de connaissances approfondies en développement mobile.

Pour commencer, vous devez créer une nouvelle application SvelteKit en utilisant la commande suivante : __CAPGO_KEEP_3__ sync command.

Installez d'abord 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.

Installez ensuite 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 ios et android dossiers dans votre projet SvelteKit.

Ces sont des projets natifs réels !

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 quelques 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, il est incorrect.

To corriger cela, ouvrez le fichier capacitor.config.ts et mettez à jour répertoireWeb:

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 Capacitor, il est temps de changer 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 depuis l'adaptateur automatique vers 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 svelte.config.js mis à jour, nous devrons ajouter une option de pré-réndu en créant une page +layout.js pour src/routes et ajoutez simplement l'export 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 dossier

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

npm run build
npx cap sync

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

De plus, la commande de synchronisation peut mettre à jour les plateformes natives et installer des plugins, donc lorsque vous installez de nouveaux Capacitorplugins npx cap sync , il est temps de relancer

encore.

Sans le réaliser, 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

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

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 :

En 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 des développeurs). Une fois cela fait, vous pouvez simplement appuyer sur 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 à 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'efforts !

Activez l'accès à votre application hébergée localement avec la mise à jour en temps réel On votre réseau En ayant l'application Capacitor charger 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

Recherchez ensuite l'adresse IPv4.

On peut instruire Capacitor à charger l'application directement du 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 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 à syncmais elle ne mettra à jour que copiez uniquement 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. Une fois cela fait, si vous modifiez quelque chose dans votre application Svelte, l'application se rechargera automatiquement et affichera les modifications !

Tenez 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 SvelteKit pour des fins de démonstration.

Utilisation des Capacitor Plugins

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

npm i @capacitor/share

There’s nothing fancy about the Partage pluginmais elle ouvre le dialogue de partage natif ! Pour cela, nous 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 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>

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 voir le 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 courants d'iOS qui entraînent un débordement horizontal ou des zones de sécurité coupées.

Interface utilisateur ressemblant à celle d'un native avec Capgo Navigation et Transitions Native

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

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

• @capgo/capacitor-navigation-native — 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 gère 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'écran d'entrée 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',
  },
});

Rendre une barre de tabs Liquid Glass (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-contentou appeler setDirection('forward') avant de naviguer. N'ajoutez pas les en-têtes ou les pieds de page natives lorsque la navigation native gère ces surfaces. setDirection('back') Consultez les guides complets :

En utilisant @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-navigation-native Using @capgo/capacitor-native-navigation En utilisant @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions Using @capgo/capacitor-transitions.

Pour les zones sûres des appareils dans Tailwind CSS, utilisez

@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitor et avant de naviguer. N'ajoutez pas les en-têtes ou les pieds de page natives lorsque la navigation native gère ces surfaces. tailwind-capacitor sur npm). Il fournit safe-areas des outils et d'autres plugins de 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 outils 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 disposition 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 résout généralement pas le problème. Travaillez à travers ces vérifications dans l'ordre.

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

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

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

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

Créez un seul coquille d'application et appliquez-y la mise en forme de l'espace sûr — 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-shellLe recouvrement de l'espace sûr dupliqué dans les en-têtes, les modales et les enveloppes de disposition peut rendre l'interface utilisateur coupée ou trop grande.

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

Fixez Capacitor iOS contentInset à never first

In capacitor.config.tspréférez un inset natif désactivé et laissez CSS (ou la navigation Native’s) contentInsetMode: 'css'posséder l'espace sûr :

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'build',
  ios: {
    contentInset: 'never',
  },
};

Mélanger les inset automatiques de Capacitor avec CSS env(safe-area-inset-*) le padding est une cause courante de double espacement.

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

Le coupable habituel est un élément utilisant 100vwTailwind w-screenune largeur fixe en pixels, ou min-width.

Dans l'inspecteur 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 lorsque possible. De nombreux problèmes de débordement horizontal proviennent de w-full une duplication de la marge de sécurité, ou d'un conteneur à largeur fixe — et non de la balise meta de la vue portée elle-même. 100vw / w-screenConclusion

__CAPGO_KEEP_0__ est une excellente option pour créer des applications natives basées sur un projet web existant, offrant une façon simple de partager __CAPGO_KEEP_1__ et de maintenir une interface utilisateur cohérente.

Capacitor is an excellent option for building native applications based on an existing web project, offering a simple way to share code and maintain a consistent UI.

__CAPGO_KEEP_0__ CapgoSi vous souhaitez apprendre à ajouter __CAPGO_KEEP_0__ à votre application SvelteKit, consultez l'article suivant :

Découvrez comment Capgo peut vous aider à créer des applications meilleures et plus rapides,

Learn how Capgo can help you build better apps faster, aujourd'hui. inserer un lien vers l'article suivant si il existe

Continuez à partir de la création d'applications mobiles avec SvelteKit et Capacitor

Si vous utilisez La création d'applications mobiles avec SvelteKit et Capacitor pour planifier l'automatisation CI/CD, connectez-le avec Capgo CI/CD pour le flux de travail du produit dans Capgo CI/CD, Capgo Builds natifs pour le flux de travail du produit dans Capgo Builds natifs, Capgo Intégrations pour le flux de travail du produit dans Capgo Intégrations, Intégration CI/CD pour le détail d'implémentation dans Intégration CI/CD, et Actions d'intégration de GitHub pour les détails d'implémentation dans les actions d'intégration de GitHub