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 fait progressivement ou en tant que 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 audit 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 changements.
-
Initialisez votre application avec Capacitor: Ouvrez votre projet dans le terminal et suivez les guides pour l'ajout de Capacitor à une application web ou ajouter Capacitor à une application IonicUtilisez les informations de votre fichier Cordova
config.xmlpour le nom de l'application et l'ID de l'ensemble. -
Construirez votre application webConstruisez votre projet web au moins une fois avant d'ajouter n'importe quelles plateformes natives. Cela garantit que le
wwwle dossier est correctement configuré dans le fichier de configuration Capacitor. -
: Exécutezet
npx cap add iosandnpx cap add androidpour ajouter les plateformes iOS et Android. Ces dernières créeront des dossiers de projet natives séparés à la racine de votre projet. -
Générez des icônes et des écrans de splash: Si vous disposez d'images d'icônes et d'écrans de splash existantes, utilisez les
cordova-resoutil pour générer et copier les éléments dans les projets natives. -
Effectuer un audit et migrer les plugins Cordova existants.: Vérifiez vos plugins Cordova existants et remplacez-les par des équivalents Capacitor si possible. Supprimez tout plugin inutile.
-
Supprimer le plugin Cordova.: Après avoir remplacé ou supprimé un plugin Cordova, désinstallez le plugin et exécutez
npx cap syncpour supprimer le plugin code du projet native. -
Appliquer des permissions supplémentaires.: Cartographiez entre les
plugin.xmlet les paramètres requis sur iOS et Android pour appliquer les permissions nécessaires. -
Configurer les préférences.: Ajoutez manuellement les préférences de
config.xmlau fichier de configuration Capacitor. -
Gérer les configurations spécifiques à chaque plateforme: Configurez les éléments
config.xmlGérer le schéma de service de contenu -
Changer le schéma de service du contenuSi nécessaire, modifiez le schéma utilisé pour servir le contenu de votre application afin d'éviter toute perte de données.
-
Testez et supprimez CordovaFélicitations ! Vous avez réussi à migrer votre application web de Cordova vers __CAPGO_KEEP_0__. Pour en savoir plus sur l'utilisation des plugins Cordova dans un projet __CAPGO_KEEP_1__ ou le flux de développement __CAPGO_KEEP_2__, visitez la
Congratulations! You’ve successfully migrated your web app from Cordova to Capacitor. To learn more about using Cordova plugins in a Capacitor project or the Capacitor development workflow, visit the Mises à jour en temps réel avec notre service Capacitor.
Mises à jour en temps réel avec notre service Capgo.
We’re proud to offer Capgo, our solution that enables live updates for your Capacitor apps, allowing you to deliver Over-The-Air (OTA) updates at a fair price. This feature is particularly useful for making quick fixes, deploying new features, and ensuring your users always have the latest version of your app without waiting for app store approval.
Comment Notre Service Capgo Fonctionne
Capgo est un service basé sur le cloud qui vous permet de déployer des mises à jour en direct sur vos Capacitor applications. Il s'agit 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 demandera à l'utilisateur de l'installer. Si l'utilisateur accepte, la mise à jour sera installée et appliquée immédiatement.
Les avantages des mises à jour en direct de Capgo
- Mises à jour plus rapides : Deploy updates instantly without waiting for app store approval.
- Dépendance réduite envers l'App Store : Bypass app store restrictions and limitations.
- Une expérience utilisateur améliorée : Maintenez les utilisateurs engagés avec les dernières fonctionnalités et corrections de bogues sans leur faire mettre à jour l'application manuellement.
How to Implement Capgo Live Updates
Pour mettre en œuvre les mises à jour en direct de Capgo dans votre projet Capacitor, suivez ces étapes :
- Créez un compte de __CAPGO_KEEP_0__ compte Capgo.
- 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
Nous espérons que ce guide vous a aidé à migrer votre application web 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 server.
Continuez de Migrer une application web de Cordova vers Capacitor: Un guide étape par étape
Si vous utilisez Migrer une application web de Cordova vers Capacitor: Guide étape par étape planifier la migration et les opérations d'entreprise, connectez-l’avec Capgo Enterprise 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 Alternatives de Capgo pour le flux de travail du produit dans Capgo Alternatives, Consulting de Capgo pour le flux de travail du produit dans Capgo Consulting, et Support Premium de Capgo pour le flux de travail du produit dans Capgo Support Premium.