Migrer une application web utilisant Cordova vers Capacitor : un guide étape par étape

Ce guide vous aidera à migrer votre application web de Cordova vers Capacitor, tout en restant simple à lire et à suivre. Nous couvrirons toutes les sections et proposerons une approche étape par étape.

Introduction à Cordova et Capacitor

Cordova et Capacitor sont deux outils qui permettent aux développeurs web de créer des applications natives pour diverses plateformes avec HTML, CSS et JavaScript. Bien qu’ils présentent des similitudes, leur approche de la gestion des projets natifs, des plugins et des CLI/versions présente des différences clés.

Stratégie de migration

La migration de Cordova vers Capacitor peut se faire progressivement ou par un remplacement complet, selon la complexité de votre application. Capacitor est rétrocompatible avec Cordova, ce qui vous permet de basculer vos applications web existantes vers celui-ci quand vous le souhaitez.

Pour faciliter la migration, pensez à utiliser le Ionic VS l'extension Code et d’auditer vos plugins Cordova existants. Vous pouvez continuer à utiliser les plugins Cordova si nécessaire, ou les remplacer par des équivalents Capacitor.

Guide de migration étape par étape

Suivez ces étapes pour migrer votre application web de Cordova vers Capacitor :

Travailler sur une branche code séparée: Il est recommandé de travailler sur une branche code séparée lors de l’application de ces modifications.
Initialiser votre application avec Capacitor: Ouvrez votre projet dans le terminal et suivez les guides pour ajouter Capacitor à une application web ou ajouter Capacitor à une application Ionic. Utilisez les informations de votre fichier Cordova config.xml pour le nom de l'app et le Bundle ID.
Compilez votre web app: Compilez votre projet web au moins une fois avant d'ajouter des plateformes natives. Cela garantit que le www dossier est correctement configuré dans le fichier de configuration Capacitor.
Ajouter des plateformes: Exécuter npx cap add ios et npx cap add android pour ajouter les plateformes iOS et Android. Celles-ci créeront des dossiers de projet natifs distincts à la racine de votre projet.
Générer les icônes et les splash screens: Si vous disposez déjà d’images d’icônes et d’écrans de démarrage, utilisez l’ cordova-res outil pour les générer et les copier dans les projets natifs.
Auditer et migrer les plugins Cordova existants: Examinez vos plugins Cordova existants et remplacez-les par leurs équivalents Capacitor si possible. Supprimez les plugins inutiles.
Supprimer un plugin Cordova: Après avoir remplacé ou supprimé un plugin Cordova, désinstallez le plugin et exécutez npx cap sync pour retirer le plugin code du projet natif.
Appliquer des permissions supplémentaires: Faire correspondre plugin.xml et les paramètres requis sur iOS et Android pour appliquer les permissions nécessaires.
Configurer les préférences: Ajouter manuellement les préférences de config.xml au fichier de configuration Capacitor.
Gérer les configurations spécifiques à la plateforme: Configurer les éléments de config.xml pour chaque plateforme (iOS et Android) selon les besoins.
Modifier le schéma utilisé pour servir le contenu: Si nécessaire, modifier le schéma utilisé pour servir le contenu de votre application afin d'éviter la perte de données.
Tester et supprimer Cordova: Testez votre application migrée pour vous assurer que toutes les modifications ont été appliquées correctement. Une fois satisfait, vous pouvez supprimer Cordova de votre projet ou le conserver si vous prévoyez de continuer à utiliser des plugins Cordova.

Félicitations ! Vous avez migré avec succès votre application web de Cordova vers Capacitor. Pour en savoir plus sur l’utilisation des plugins Cordova dans un projet Capacitor ou sur le flux de développement Capacitor, consultez la documentation officielle Capacitor.

Live Updates avec notre service Capgo

Nous sommes fiers de proposer Capgo, notre solution qui permet les live updates pour vos applications Capacitor, vous permettant de livrer des mises à jour OTA à un prix raisonnable. Cette fonctionnalité est particulièrement utile pour effectuer des correctifs rapides, déployer de nouvelles fonctionnalités et garantir que vos utilisateurs disposent toujours de la dernière version de votre application sans attendre l’approbation des stores.

Fonctionnement de notre service Capgo

Capgo est un service cloud qui vous permet de déployer des live updates sur vos applications Capacitor. Il se compose d’un dashboard web et d’un SDK natif SDK que vous pouvez intégrer dans votre application. Le SDK vérifie les mises à jour au démarrage ou à intervalles réguliers et les télécharge en arrière-plan. Lorsqu’une mise à jour est disponible, le SDK invite l’utilisateur à l’installer. Si l’utilisateur accepte, la mise à jour est installée et appliquée immédiatement.

Avantages des live updates Capgo

Mises à jour plus rapides : Déployez des mises à jour instantanément sans attendre l’approbation des stores.
Moins de dépendance à l’App Store : Contournez les restrictions et les limites des stores.
Expérience utilisateur améliorée : Gardez vos utilisateurs engagés avec les dernières fonctionnalités et corrections de bugs, sans qu’ils aient à mettre à jour manuellement l’application.

Comment implémenter les live updates Capgo

Pour implémenter les live updates Capgo dans votre projet Capacitor, suivez ces étapes :

Inscrivez-vous à un Compte Capgo.
Installez le Capgo SDK dans votre projet.
Configurez votre application pour vérifier les mises à jour au démarrage ou à intervalles réguliers.
Déployez les mises à jour de votre application via le dashboard Capgo.

Conclusion

Nous espérons que ce guide vous a aidé à migrer votre application web de Cordova vers Capacitor. Si vous avez des questions ou besoin d’aide pour la migration, n’hésitez pas à nous contacter sur notre Discord serveur.

Continuez avec Migrer une application web de Cordova à Capacitor : guide étape par étape

Si vous utilisez Migrer une application web de Cordova vers Capacitor : guide étape par étape pour planifier la migration et les opérations d'entreprise, connectez-l’à Capgo Entreprise pour le workflow produit dans Capgo Enterprise, Alternatives aux plugins Ionic Enterprise pour le workflow produit dans les alternatives aux plugins Ionic Enterprise, Alternatives Capgo pour le workflow produit dans les alternatives Capgo, Conseil Capgo pour le workflow produit dans Capgo Consulting, et Support Premium Capgo pour le workflow produit dans Capgo Premium Support.