Migrer une application web de Cordova vers Capacitor: Guide étape par étape

This step-by-step guide will help you migrate your web app from Cordova to Capacitor, covering all sections and making it easy to read and follow.

Crédits de l'article

Martin Donadieu

Auteur

Valeria

Relecteur

Jordan

Éditeur

Migrer une application web à l'aide de Cordova vers Capacitor: Guide étape par étape

This guide will help you migrate your web app from Cordova to Capacitor, making it easy to read and follow. We’ll cover all sections and provide a step-by-step approach.

Introduction à Cordova et Capacitor

Cordova and Capacitor are both tools that enable web developers to create native applications for various platforms using HTML, CSS, and JavaScript. While they share similarities, there are key differences in their approach to native project management, plugin management, and CLI/version management.

Stratégie de migration

Migrer de Cordova vers Capacitor peut être effectué progressivement ou comme un remplacement complet, en fonction de la complexité de votre application. Capacitor est compatible avec Cordova, vous permettant de passer vos applications web existantes à Capacitor lorsque vous êtes prêt.

To assist with migration, consider using the Ionic VS Code Extension et de vérifier 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 :

Travaillez dans une branche code séparée: Il est recommandé de travailler dans une branche code séparée lors de l'application de ces modifications.
Initialisez votre application avec Capacitor: Ouvrez votre projet dans le terminal et suivez les guides pour ajouter Capacitor à une application web or ajouter Capacitor à une application IonicUtilisez les informations de votre Cordova config.xml Construirez votre application web
Construirez votre application webConstruisez d'abord votre projet web une fois avant d'ajouter n'importe quelles plateformes natives. Cela garantit que www Le dossier est correctement configuré dans le fichier de configuration Capacitor.
Adder des plateformes: Exécutez npx cap add ios et npx cap add android ajouter les plateformes iOS et Android. Ces dernières créeront des dossiers de projet natifs séparés à la racine de votre projet.
Générer des icônes et des écrans de splashSi vous disposez d'images d'icônes et d'écrans de splash existantes, utilisez les. cordova-res outil pour générer et copier les éléments dans les projets natifs.
Vérifier et migrer les plugins Cordova existants: Examinez vos plugins Cordova existants et remplacez-les par des équivalents Capacitor si possible. Supprimez les plugins inutiles.
Supprimer le plugin Cordova: Après avoir remplacé ou supprimé un plugin Cordova, désinstallez le plugin et exécutez npx cap sync pour supprimer le plugin code du projet natif.
Appliquez des autorisations supplémentaires: Cartographiez entre plugin.xml et les paramètres requis sur iOS et Android pour appliquer les autorisations nécessaires.
Configurez les préférences: Ajoutez manuellement les préférences de config.xml au fichier de configuration Capacitor.
Gérez les configurations spécifiques aux plateformes: Configurez les éléments de config.xml pour chaque plateforme (iOS et Android) si nécessaire.
Modifiez le schéma pour servir du contenu: Si nécessaire, modifiez le schéma utilisé pour servir le contenu dans votre application pour éviter toute perte de données.
Testez et supprimez 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 continuer à utiliser les plugins Cordova.

Félicitations ! Vous avez réussi à migrer votre application web de Cordova vers Capacitor. Pour en savoir plus sur l'utilisation des plugins Cordova dans un projet Capacitor ou le flux de développement Capacitor, visitez la documentation officielle de Capacitor.

Les mises à jour en direct avec notre service Capgo

Nous sommes fiers de proposer Capgo, notre solution qui permet les mises à jour en direct pour vos applications Capacitor, vous permettant de déployer des mises à jour Over-The-Air (OTA) à un prix équitable. Cette fonctionnalité est particulièrement utile pour effectuer des corrections rapides, déployer de nouvelles fonctionnalités et vous assurer que vos utilisateurs disposent toujours de la dernière version de votre application sans attendre l'approbation des magasins d'applications.

Comment notre service Capgo fonctionne

Capgo est un service basé sur le cloud qui permet de déployer des mises à jour en direct vers vos applications Capacitor. Il se compose d'un tableau de bord web et d'un SDK natif que vous pouvez intégrer dans votre application. Le SDK vérifie les mises à jour au démarrage ou à des intervalles spécifiques et les télécharge en arrière-plan. Lorsqu'une mise à jour est disponible, le SDK sollicitera l'utilisateur pour l'installer. Si l'utilisateur accepte, la mise à jour sera installée et appliquée immédiatement.

Avantages des mises à jour en direct Capgo

Les mises à jour rapides : Deploy updates instantly without waiting for app store approval.
Réduction de la dépendance à l'App Store : Contourner les restrictions et les limitations de l'app store.
Amélioration de l'expérience utilisateur : Tenir les utilisateurs engagés avec les dernières fonctionnalités et les correctifs de bogues sans leur faire manuellement mettre à jour l'application.

How to Implement Capgo Live Updates

Pour mettre en œuvre les mises à jour en temps réel Capgo dans votre projet Capacitor, suivez ces étapes :

Inscrivez-vous à un Capgo compte.
Installez le Capgo SDK dans votre projet.
Configurez votre application pour vérifier les mises à jour au démarrage ou à des intervalles spécifiques.
Deploy updates to your app using the Capgo dashboard.

Conclusion

We espérons que ce guide vous a aidé à migrer votre application web à partir de Cordova vers Capacitor. Si vous avez des questions ou avez besoin d'assistance pour le processus de migration, n'hésitez pas à nous contacter sur notre discord serveur.

Continuez de Migrer une application web de Cordova vers Capacitor: Un guide étape par étape

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