Capacitor est le choix logique quand vous avez déjà une app web solide (Angular, React, Vue) et que vous voulez la déployer sur iOS et Android sans réécrire du code natif. Contrairement à Ionic qui s'appuie sur lui, Capacitor fonctionne comme une couche de bridge : votre code reste web, mais vous accédez aux APIs natives via des plugins. Le déploiement n'est pas trivial—il faut gérer les certificats, les profils de provisioning, les build configurations—mais une fois le workflow compris, c'est répétable et maintenable.
L'architecture de Capacitor en deux mots
Capacitor utilise WebView (UIWebView sur iOS, WebView sur Android) pour embarquer votre app web. Les plugins Capacitor (Camera, Geolocation, Storage, etc.) créent un pont JavaScript-to-Native : vous appelez Capacitor.Plugins.Camera.getPhoto() , ça déclenche du code natif, et le résultat revient en JavaScript. Pour le déploiement, Capacitor génère les projets Xcode (iOS) et Android Studio (Android) que vous configurez et compilez ensuite. C'est crucial : Capacitor ne *remplace* pas Xcode ou Android Studio, il les automatise partiellement. Vous devez toujours toucher à ces outils pour la signature, les provisioning profiles, et les configurations spécifiques.
Préparer votre app web pour la prod mobile
Avant de toucher à Capacitor, votre app web doit être solide. Cela signifie : responsive design fonctionnant sur les écrans 375px (iPhone SE) jusqu'à 1024px (iPad), métadonnées viewport correctes ( <meta name="viewport" content="width=device-width, initial-scale=1.0"> ), et zéro console errors. Testez sur Safari DevTools (iOS) et Chrome DevTools (Android) avec des throttling réseau et CPU réalistes. Capacitor hérite des performances de votre web app, donc si vous avez du jank en scrolling ou du TTI > 3s, le déploiement ne règlera rien. Activez la minification et la compression gzip dans votre bundler (Webpack, Vite). Vérifiez aussi les permissions : sur iOS, l'accès caméra/localisation nécessite des entrées Info.plist ; sur Android, c'est les AndroidManifest.xml et les runtime permissions. Capacitor génère des templates, mais vous devez les compléter manuellement.
Installation et initialisation
Installez Capacitor dans votre projet existant : npm install @capacitor/core @capacitor/cli . Ensuite, npx cap init crée les fichiers de configuration ( capacitor.config.ts ). Ce fichier est critique : il définit l'appId (ex: com.mycompany.myapp ), le nom de l'app, le répertoire de build web ( webDir: 'dist' ), et les plugins utilisés. Exemple minimal : { appId: 'com.example.myapp', appName: 'MyApp', webDir: 'dist', plugins: { SplashScreen: { autoHide: false } } } . Ensuite, npx cap add ios et npx cap add android créent les projets natifs. Attention : cela crée des répertoires /ios et /android qu'il faut committer dans git (contrairement à node_modules ). Ces répertoires contiennent du code Xcode et Gradle que vous versionnerez et maintiendrez.
Build et synchronisation
Avant chaque déploiement, buildez votre app web : npm run build . Capacitor regarde le répertoire webDir (ex: dist/ ) pour les fichiers HTML/JS/CSS. Ensuite, npx cap sync copie les fichiers web dans les projets natifs et met à jour les plugins. Cette étape est facile à oublier : si vous changez du code Angular, vous devez npm run build && npx cap sync , sinon vous testerez l'ancienne version. Pour le développement local, npx cap open ios ouvre Xcode et npx cap open android ouvre Android Studio. Vous pouvez ensuite lancer un émulateur/device et compiler depuis l'IDE natif. Certains développeurs configurent aussi un live reload local avec npx cap run ios --live-reload , qui recharge l'app web à chaque changement de fichier—utile pour itérer rapidement, mais à désactiver en prod.
Signing et provisioning sur iOS
C'est le cauchemar de beaucoup. Sur iOS, vous avez besoin : d'un compte Apple Developer ($99/an), d'un certificat de code-signing, et d'un provisioning profile. Dans Xcode, ouvrez le projet Capacitor, onglet Signing & Capabilities, sélectionnez votre équipe, et Xcode génère automatiquement les certificats et profiles si vous êtes loggé. Pour TestFlight (bêta), buildez en Release ( Product > Build ou Cmd+B ), puis utilisez Product > Archive pour créer une archive. Validez et uploadez vers App Store Connect. Pour la prod, c'est pareil mais avec un review supplémentaire. Un piège courant : les Bundle IDs doivent matcher entre Capacitor et Xcode. Si capacitor.config.ts dit com.example.myapp mais Xcode dit com.example.myapp2 , ça explose. Vérifiez aussi que les entitlements (ex: Push Notifications) sont activés dans Xcode et listés dans capacitor.config.ts .
Signing et déploiement Android
Android est plus simple en théorie. Vous générez une clé de signature avec keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-key-alias . Stockez ce fichier en sécurité (idéalement pas en git). Ensuite, configurez Gradle dans /android/app/build.gradle pour signer avec cette clé. Dans Android Studio, Build > Generate Signed Bundle / APK , sélectionnez la clé, et générez un AAB (Android App Bundle) pour Google Play ou un APK pour les tests. L'AAB est le format moderne : Google Play le compile en APK optimisé par device. Attention au versionCode et versionName dans build.gradle : ils doivent incrémenter à chaque release, sinon Play Store refuse l'upload.
Un piège courant : la gestion des plugins et des dépendances natives
Capacitor facilite l'accès aux APIs natives, mais chaque plugin a ses dépendances. Par exemple, @capacitor/camera dépend de androidx sur Android et de certaines frameworks sur iOS. Si vous installez un plugin tiers mal maintenu, il peut apporter une dépendance incompatible qui casse votre build. Toujours vérifier la compatibilité Capacitor version / plugin version avant d'installer. De plus, certaines features (ex: biométrie) nécessitent des configurations spécifiques par plateforme. Ignorer cela mène à des crashes runtime sur device réel, alors qu'en émulateur ça passe. Test toujours sur device réel ou simulateur avec une config produite.
Conclusion et workflow pratique
Le workflow complet : (1) développez et testez votre app web en local, (2) npm run build , (3) npx cap sync , (4) testez dans l'émulateur avec npx cap run ios/android , (5) buildez et signez via Xcode/Android Studio, (6) uploadez sur TestFlight/Play Console, (7) itérez sur le feedback. Automatisez au maximum : utilisez des GitHub Actions ou GitLab CI pour builder et signer (avec des secrets pour les clés). Documentez votre capacitor.config.ts , vos entitlements iOS, et vos Gradle configurations. Capacitor n'est pas magique—il demande de la rigueur en gestion de certificats et de versions—mais c'est infiniment plus rapide que d'écrire du code natif. Une fois ce workflow maîtrisé, vous déployez sur iOS et Android presque aussi facilement que sur le web.