Skip to main content
cordova-to-capacitor Complete guide for migrating from Apache Cordova to Capacitor. Use this skill when users need to modernize a Cordova/PhoneGap app to Capacitor, migrate plugins, or understand platform differences.
Ir para a instalação Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/Cap-go/capgo-skills --skill cordova-to-capacitorO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... Mais deste repositório capawesome-live-update-migration Guides migration from Capawesome Cloud live updates or @capawesome/capacitor-live-update to Capgo Updater. Use when a Capacitor app contains Capawesome live update packages, CLI commands, config, API calls, or when the user asks why Capgo Updater is the better live-update path: native updater runtime, fully open source, cheaper at comparable scale, and longer proven track record.
Official Capacitor package guide plus Capgo ecosystem plugin recommendations. Use this skill when users need native functionality, want the right official Capacitor package, or need a stronger Capgo/community plugin when the official package is missing or too limited.
Use for Capgo Cloud Build native iOS and Android workflows, including CLI login, API-key handling, iOS build onboarding, signing credential storage, build requests, store upload settings, output download links, and troubleshooting. Do not use for OTA bundle uploads or generic Capacitor setup unless a native Capgo build is requested.
Ocupações relacionadas SOC
Baseado na classificação ocupacional SOC
Explorador de arquivos
2 arquivos name cordova-to-capacitor description Complete guide for migrating from Apache Cordova to Capacitor. Use this skill when users need to modernize a Cordova/PhoneGap app to Capacitor, migrate plugins, or understand platform differences. allowed-tools ["Bash(node -e *)","Bash(find *)","Bash(cordova *)","Bash(npm *)","Bash(npx *)"]
Cordova to Capacitor Migration
Step-by-step guide for migrating from Apache Cordova/PhoneGap to Capacitor.
When to Use This Skill
Migrating an existing Cordova app to Capacitor
Converting PhoneGap projects to Capacitor
Understanding Cordova vs Capacitor differences
Finding Capacitor equivalents for Cordova plugins
Modernizing hybrid mobile apps
Live Project Snapshot
Current migration-related packages:
!node -e "const fs=require('fs');if(!fs.existsSync('package.json'))process.exit(0);const pkg=JSON.parse(fs.readFileSync('package.json','utf8'));const out=[];for(const section of ['dependencies','devDependencies']){for(const [name,version] of Object.entries(pkg[section]||{})){if(name.includes('cordova')||name.startsWith('@capacitor/')||name.startsWith('@ionic-enterprise/'))out.push(section+'.'+name+'='+version)}}console.log(out.sort().join('\n'))"
Relevant config and platform paths:
!find . -maxdepth 3 \( -name 'config.xml' -o -name 'capacitor.config.json' -o -name 'capacitor.config.ts' -o -name 'capacitor.config.js' -o -path './ios' -o -path './android' \)
Why Migrate from Cordova?
Aspect Cordova Capacitor Native IDE
First-class Xcode/Android Studio
Plugin Management Separate ecosystem npm packages
Updates Full app store review Live updates with Capgo
Web App Platform Any Any (React, Vue, Angular, etc.)
Maintenance Slowing down Active development
TypeScript Limited Full support
Modern APIs Older patterns Modern Promise-based APIs
Migration Process Overview
Step 1: Assess Your Current App Start from the injected snapshot above before falling back to manual inspection.
cordova --version
cordova platform version
Step 2: Install Capacitor In your existing Cordova project:
npm install @capacitor/core @capacitor/cli
npx cap init
App name : Your app's display nameApp ID : Use the same ID from config.xml (e.g., com.company.app)Web directory : Usually www for Cordova projects
Step 3: Add Platforms Capacitor doesn't modify web assets. Add platforms separately:
npm install @capacitor/ios
npx cap add ios
npm install @capacitor/android
npx cap add android
ios/ directory with Xcode projectandroid/ directory with Android Studio project
Step 4: Migrate Plugins CRITICAL: Check plugin compatibility first.
Core Cordova Plugins → Capacitor Equivalents Cordova Plugin Capacitor Equivalent Install Command cordova-plugin-camera @capacitor/camera npm install @capacitor/cameracordova-plugin-geolocation @capacitor/geolocation npm install @capacitor/geolocationcordova-plugin-device @capacitor/device npm install @capacitor/devicecordova-plugin-network-information @capacitor/network npm install @capacitor/networkcordova-plugin-statusbar @capacitor/status-bar npm install @capacitor/status-barcordova-plugin-splashscreen @capacitor/splash-screen npm install @capacitor/splash-screencordova-plugin-keyboard @capacitor/keyboard npm install @capacitor/keyboardcordova-plugin-dialogs @capacitor/dialog npm install @capacitor/dialogcordova-plugin-file @capacitor/filesystem npm install @capacitor/filesystemcordova-plugin-inappbrowser @capacitor/browser npm install @capacitor/browsercordova-plugin-media @capacitor/media Custom or use @capgo plugins cordova-plugin-vibration @capacitor/haptics npm install @capacitor/hapticscordova-plugin-local-notifications @capacitor/local-notifications npm install @capacitor/local-notificationscordova-plugin-push @capacitor/push-notifications npm install @capacitor/push-notifications
Third-Party Cordova Plugins → Capgo Equivalents
cordova plugin add cordova-plugin-fingerprint-aio
npm install @capgo/capacitor-native-biometric
cordova plugin add cordova-plugin-purchase
npm install @capgo/capacitor-purchases
npm install @capgo/capacitor-social-login
npm install @codetrix-studio/capacitor-google-auth
Step 5: Update Code
Import Changes document .addEventListener ('deviceready' , () => {
navigator.camera .getPicture (success, error, options);
});
import { Camera } from '@capacitor/camera' ;
const image = await Camera .getPhoto ({
quality : 90 ,
allowEditing : true ,
resultType : CameraResultType .Uri
});
Common Pattern Changes
const uuid = device.uuid ;
const platform = device.platform ;
import { Device } from '@capacitor/device' ;
const info = await Device .getId ();
const platform = await Device .getInfo ();
const networkState = navigator.connection .type ;
import { Network } from '@capacitor/network' ;
const status = await Network .getStatus ();
console .log ('Connected:' , status.connected );
navigator.geolocation .getCurrentPosition (success, error);
import { Geolocation } from '@capacitor/geolocation' ;
const position = await Geolocation .getCurrentPosition ();
Remove deviceready Event Capacitor doesn't need deviceready. Plugins work immediately.
document .addEventListener ('deviceready' , onDeviceReady, false );
function onDeviceReady (import { Camera } from '@capacitor/camera' ;
async function takePicture (const photo = await Camera .getPhoto ();
}
Step 6: Update Configuration Cordova uses config.xml. Capacitor uses capacitor.config.ts
Create capacitor.config.ts import type { CapacitorConfig } from '@capacitor/cli' ;
const config : CapacitorConfig = {
appId : 'com.company.app' ,
appName : 'My App' ,
webDir : 'www' ,
server : {
androidScheme : 'https'
},
plugins : {
SplashScreen : {
launchShowDuration : 3000 ,
backgroundColor : '#ffffff' ,
androidScaleType : 'CENTER_CROP' ,
showSpinner : false
}
}
};
export default config;
Migrate config.xml Settings
<preference name ="Orientation" value ="portrait" />
<preference name ="StatusBarOverlaysWebView" value ="false" />
<preference name ="StatusBarBackgroundColor" value ="#000000" />
Orientation: Set in Xcode/Android Studio per platform
StatusBar: Use @capacitor/status-bar plugin
Platform-specific config:
<platform name ="ios" >
<allow-intent href ="itms:*" />
</platform >
const config : CapacitorConfig = {
ios : {
contentInset : 'always' ,
},
android : {
allowMixedContent : true ,
}
};
Step 7: Handle Permissions Capacitor requires explicit permission configuration.
iOS: Info.plist Add to ios/App/App/Info.plist:
<key > NSCameraUsageDescription</key >
<string > We need camera access to take photos</string >
<key > NSPhotoLibraryUsageDescription</key >
<string > We need photo library access to select images</string >
<key > NSLocationWhenInUseUsageDescription</key >
<string > We need location to show nearby places</string >
<key > NSMicrophoneUsageDescription</key >
<string > We need microphone access for audio recording</string >
Android: AndroidManifest.xml Add to android/app/src/main/AndroidManifest.xml:
<uses-permission android:name ="android.permission.CAMERA" />
<uses-permission android:name ="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name ="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name ="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name ="android.permission.RECORD_AUDIO" />
Step 8: Sync and Build Sync web code with native projects:
Web assets from www/ to native projects
Installs native dependencies
Updates plugin configurations
Step 9: Test the App Test all plugin functionality:
Camera/photo picker
Geolocation
File operations
Network detection
Device information
Push notifications
Missing permissions
API differences
Callback → Promise conversions
Removed plugins
Step 10: Remove Cordova Once migration is complete and tested:
cordova platform remove ios
cordova platform remove android
npm uninstall cordova
npm uninstall cordova-ios
npm uninstall cordova-android
cordova plugin list | xargs -I {} cordova plugin remove {}
mv config.xml config.xml.backup
Common Issues and Solutions
Issue: Plugin Not Found
Check if plugin is installed: npm list
Sync native projects: npx cap sync
Clean and rebuild in Xcode/Android Studio
Issue: deviceready Never Fires Problem:
Cordova's deviceready event doesn't exist in Capacitor.
Solution:
Remove all deviceready event listeners. Capacitor plugins work immediately.
document .addEventListener ('deviceready' , onDeviceReady);
import { App } from '@capacitor/app' ;
App .addListener ('appStateChange' , (state ) => {
console .log ('App state changed:' , state.isActive );
});
Issue: White Screen on Startup Problem:
App shows white screen or crashes.
Check webDir in capacitor.config.ts points to correct build output
Rebuild web app: npm run build
Sync: npx cap sync
Check browser console in device for errors
Issue: Permissions Not Working Problem:
Camera/location/etc. fail silently.
Add permission strings to Info.plist (iOS)
Add permission declarations to AndroidManifest.xml (Android)
Request permissions explicitly in code:
import { Camera } from '@capacitor/camera' ;
const photo = await Camera .getPhoto ();
Issue: Plugins Using Old Cordova API Problem:
Some third-party Cordova plugins still reference Cordova global.
Solution:
Use the Capacitor Cordova compatibility layer:
npm install cordova-plugin-example
npx cap sync
Capacitor includes Cordova compatibility, but:
It's best to migrate to native Capacitor plugins when possible
Not all Cordova plugins will work
Hybrid Approach: Run Both You can run Cordova and Capacitor side-by-side during migration.
Install Capacitor alongside Cordova
Keep both config.xml and capacitor.config.ts
Migrate plugins incrementally
Test each platform independently
When ready, remove Cordova entirely.
Plugin Migration Checklist
Live Updates with Capgo Capacitor enables instant updates without app store review.
After migration, add Capgo for OTA updates:
npm install @capgo/capacitor-updater
npm install -g @capgo/cli
capgo login
capgo init
npm run build
capgo upload
Users get updates instantly. See the capgo-live-updates skill for details.
Resources
Migration Timeline Estimate App Size Estimated Time Small (1-3 plugins) 2-4 hours Medium (4-8 plugins) 1-2 days Large (9+ plugins) 3-5 days Enterprise (custom plugins) 1-2 weeks
Post-Migration Benefits After migrating from Cordova to Capacitor:
✅ Faster development - Direct access to Xcode/Android Studio
✅ Live updates - Deploy updates without app store review (with Capgo)
✅ Better TypeScript - Full type safety
✅ Modern APIs - Promise-based, async/await
✅ Active maintenance - Regular updates and improvements
✅ Better debugging - Native IDE debugging tools
✅ Improved performance - Optimized native bridge
Next Steps
Complete the migration using steps above
Test thoroughly on physical devices
Set up CI/CD (see capacitor-ci-cd skill)
Add live updates (see capgo-live-updates skill)
Submit to app stores (see capacitor-app-store skill)
