Chapter 12 of 12 ~20 min read
Migration Checklist
Side-by-side Cordova vs Capacitor — practical migration with working code.
This is your migration battle plan
Follow these steps in order. Estimated time for a medium Cordova app: 1–3 days. Most of the time is spent testing plugins in the new native environment.
Phase 1 — Setup (Day 1 Morning)
Terminal
# 1. Update Ionic CLI
npm install -g @ionic/cli
# 2. Install Capacitor in existing project
npm install @capacitor/core @capacitor/cli
# 3. Initialize Capacitor (creates capacitor.config.ts)
npx cap init "My App" "com.example.myapp" --web-dir www
# 4. Add platforms
npx cap add android
npx cap add ios # macOS only
# 5. First sync
ionic build
npx cap sync| ✅ Phase 1 Checklist | Done? |
|---|---|
| Upgrade to Ionic 7+ / Angular 17+ | ☐ |
Install @capacitor/core and @capacitor/cli | ☐ |
Run npx cap init | ☐ |
Run npx cap add android (and ios) | ☐ |
| Verify app opens in Android Studio / Xcode | ☐ |
| Verify web app loads in native webview | ☐ |
Phase 2 — Plugin Migration (Day 1–2)
| Remove (Cordova) | Install (Capacitor) | Done? |
|---|---|---|
cordova plugin remove cordova-plugin-camera | npm install @capacitor/camera | ☐ |
phonegap-plugin-push | @capacitor/push-notifications | ☐ |
cordova-plugin-geolocation | @capacitor/geolocation | ☐ |
cordova-plugin-file | @capacitor/filesystem | ☐ |
cordova-plugin-network-information | @capacitor/network | ☐ |
cordova-plugin-statusbar | @capacitor/status-bar | ☐ |
cordova-plugin-device | @capacitor/device | ☐ |
cordova-plugin-splashscreen | @capacitor/splash-screen | ☐ |
Phase 3 — Code Migration
Replace Cordova patterns in your code
- Remove all
document.addEventListener('deviceready', ...)wrapping — Capacitor plugins are available immediately - Replace
cordova.exec()calls withawait Plugin.method() - Replace
navigator.camera.getPicture(success, fail, opts)withawait Camera.getPhoto(opts) - Remove
window.plugins.*references — import from@capacitor/*instead - Replace Cordova's
navigator.connection.typewithNetwork.getStatus() - Remove all Cordova-specific event listeners (
pause,resume,backbutton) and replace withApp.addListener()
Phase 4 — Native Config & Permissions
| Task | Where to do it | Done? |
|---|---|---|
| Camera permissions | android/app/src/main/AndroidManifest.xml | ☐ |
| Location permissions | AndroidManifest.xml + Info.plist | ☐ |
| google-services.json (FCM) | android/app/google-services.json | ☐ |
| GoogleService-Info.plist (APNs) | Drag into Xcode project | ☐ |
| App icon | Android Studio / Xcode Asset Catalog | ☐ |
| Splash screen image | capacitor.config.ts SplashScreen plugin config | ☐ |
| Signing config | android/app/build.gradle signingConfigs | ☐ |
| Remove Cordova from package.json | Run npm uninstall @ionic-native/core cordova-* | ☐ |
Phase 5 — Testing & Deploy
Final verification commands
# Build web
ionic build --prod
# Sync to native
npx cap sync
# Run on real device (live reload)
ionic cap run android -l --external
# Release build in Android Studio:
# Build → Generate Signed Bundle/APK
# Verify no Cordova references remain:
grep -r "cordova" src/ --include="*.ts" --include="*.html"
# Should return nothing (or only comments)🎉
Migration Complete!
You've completed the Cordova → Ionic with Capacitor course. Your app is now on the modern Capacitor runtime with first-class native tooling.