Migration einer Cordova-Web-App zu Capacitor: Ein Schritt-für-Schritt-Guide

Dieser Leitfaden hilft dir, deine Web-App von Cordova zu Capacitor zu migrieren. Er ist leicht zu lesen und zu befolgen. Wir behandeln alle Abschnitte und bieten einen Schritt-für-Schritt-Ansatz.

Einführung in Cordova und Capacitor

Cordova und Capacitor sind beide Tools, mit denen Web-Entwickler native Anwendungen für verschiedene Plattformen mit HTML, CSS und JavaScript erstellen können. Obwohl sie Ähnlichkeiten aufweisen, gibt es wesentliche Unterschiede in ihrem Ansatz für das native Projektmanagement, das Plugin-Management und das CLI/Versionsmanagement.

Migrationsstrategie

Die Migration von Cordova zu Capacitor kann schrittweise oder als vollständiger Ersatz erfolgen, je nach Komplexität deiner App. Capacitor ist abwärtskompatibel mit Cordova, sodass du deine bestehenden Web-Apps jederzeit darauf umstellen kannst.

Um die Migration zu unterstützen, erwäge die Verwendung von Ionic vs. Code Extension und das Prüfen Ihrer vorhandenen Cordova-Plugins. Sie können Cordova-Plugins bei Bedarf weiterhin verwenden oder sie durch Capacitor-Äquivalente ersetzen.

Schritt-für-Schritt-Migrationsanleitung

Führe diese Schritte aus, um deine Web-App von Cordova zu Capacitor zu migrieren:

In einem separaten code-Branch arbeiten: Es wird empfohlen, bei der Anwendung dieser Änderungen in einem separaten code-Branch zu arbeiten.
Initialisiere deine App mit Capacitor: Öffne dein Projekt im Terminal und folge den Anleitungen für das Hinzufügen von Capacitor zu einer Web-App oder das Hinzufügen von Capacitor zu einer Ionic-App. Verwende die Informationen aus deiner Cordova- config.xml Datei für den App-Namen und die Bundle-ID.
Baue deine Web-App: Baue dein Web-Projekt mindestens einmal, bevor du native Plattformen hinzufügst. Dies stellt sicher, dass der www Ordner in der Capacitor-Konfigurationsdatei korrekt konfiguriert ist.
Plattformen hinzufügen: Führe npx cap add ios und npx cap add android um die iOS- und Android-Plattformen hinzuzufügen. Dabei werden separate native Projektordner im Wurzelverzeichnis Ihres Projekts erstellt.
Icons und Splashscreens generieren: Wenn du bereits vorhandene Icon- und Splashscreen-Bilder hast, nutze das cordova-res -Tool, um sie zu generieren und in die nativen Projekte zu kopieren.
Bestehende Cordova-Plugins prüfen und migrieren: Prüfe deine bestehenden Cordova-Plugins und ersetze sie, wo möglich, durch Capacitor-Äquivalente. Entferne unnötige Plugins.
Cordova-Plugin entfernen: Nach dem Ersetzen oder Entfernen eines Cordova-Plugins das Plugin deinstallieren und npx cap sync ausführen, um das Plugin code aus dem nativen Projekt zu entfernen.
Zusätzliche Berechtigungen anwenden: Abbildung zwischen plugin.xml und den erforderlichen Einstellungen auf iOS und Android, um die nötigen Berechtigungen zu setzen.
Einstellungen konfigurieren: Einstellungen manuell von config.xml in die Capacitor-Konfigurationsdatei übernehmen.
Plattform-spezifische Konfigurationen behandeln: Configure elements from config.xml je nach Bedarf für jede Plattform (iOS und Android) konfigurieren.
Schema für die Bereitstellung von Inhalten ändern: Falls erforderlich, das Schema ändern, das in Ihrer App zur Bereitstellung von Inhalten verwendet wird, um Datenverlust zu vermeiden.
Testen und Cordova entfernen: Teste deine migrierte App, um sicherzustellen, dass alle Änderungen korrekt übernommen wurden. Wenn alles passt, kannst du Cordova aus deinem Projekt entfernen oder es beibehalten, falls du weiterhin Cordova-Plugins nutzen willst.

Glückwunsch! Du hast deine Web-App erfolgreich von Cordova auf Capacitor migriert. Mehr über Cordova-Plugins in einem Capacitor-Projekt oder den Capacitor-Entwicklungsworkflow erfährst du in der offiziellen Capacitor-Dokumentation.

Live Updates mit unserem Capgo Service

Wir sind stolz auf Capgo, unsere Lösung für Live Updates deiner Capacitor-Apps, mit der du Over-The-Air-(OTA-)Updates zu einem fairen Preis ausliefern kannst. Das ist besonders praktisch für schnelle Fixes, neue Features und dafür, dass deine Nutzer immer die neueste Version deiner App haben, ohne auf die Freigabe im App Store zu warten.

So funktioniert unser Capgo Service

Capgo ist ein cloudbasierter Service, mit dem du Live Updates für deine Capacitor-Apps deployen kannst. Er besteht aus einem Web-Dashboard und einem nativen SDK, das du in deine App integrierst. Die SDK prüft beim Start oder in festen Intervallen auf Updates und lädt sie im Hintergrund herunter. Wenn ein Update verfügbar ist, fragt die SDK den Nutzer, ob er es installieren möchte. Stimmt er zu, wird das Update installiert und sofort angewendet.

Vorteile von Capgo Live Updates

Schnellere Updates: Updates sofort deployen, ohne auf die Freigabe im App Store zu warten.
Geringere Abhängigkeit vom Apple Store: Umgehe die Restriktionen und Limits des App Stores.
Verbesserte Nutzererfahrung: Halte Nutzer mit den neuesten Features und Bugfixes bei der Stange, ohne dass sie die App manuell aktualisieren müssen.

So implementierst du Capgo Live Updates

Um Capgo Live Updates in deinem Capacitor-Projekt zu implementieren, folge diesen Schritten:

Registriere dich für ein Capgo Account.
Installiere das Capgo SDK in deinem Projekt.
Konfiguriere deine App, um beim Start oder in bestimmten Intervallen nach Updates zu suchen.
Deploye Updates für deine App über das Capgo-Dashboard.

Fazit

Wir hoffen, dass dieser Guide dir geholfen hat, deine Web-App von Cordova auf Capacitor zu migrieren. Wenn du Fragen hast oder Hilfe beim Migrationsprozess benötigst, melde dich gerne über unser discord Server.

Weiter geht’s: Web-App von Cordova zu Capacitor migrieren: Ein Schritt-für-Schritt-Leitfaden

Wenn du es nutzt Migration einer Web-App von Cordova zu Capacitor: Eine Schritt-für-Schritt-Anleitung um Migration und Enterprise-Betrieb zu planen, verbinde es mit Capgo Enterprise für den Produkt-Workflow in Capgo Enterprise, Ionic Enterprise Plugin-Alternativen für den Produkt-Workflow in Ionic Enterprise Plugin-Alternativen, Capgo Alternativen für den Produkt-Workflow in Capgo Alternativen, Capgo Beratung für den Produkt-Workflow in Capgo Consulting und Capgo Premium-Support für den Produkt-Workflow in Capgo Premium Support.