Capacitor a révolutionné la façon dont les développeurs web construisent des applications mobiles hybrides. Contrairement à Cordova, qui s'appuie sur des plugins WebView souvent obsolètes, Capacitor propose une architecture moderne et maintenanceable, avec une excellente documentation et une communauté active. L'attrait principal réside dans la capacité à accéder aux APIs natives sans sacrifier la flexibilité du code web standard. Les trois cas d'usage que nous couvrons ici—caméra, biométrie et notifications push—représentent 80% des demandes d'intégration native dans les applications mobiles en production.
Caméra : de la capture au stockage sécurisé
Le plugin Capacitor Camera propose une interface unifiée pour iOS et Android, tout en laissant la possibilité de descendre au niveau natif si besoin. La capture d'image via Camera.getPhoto() accepte un objet de configuration riche : format (JPEG, PNG), qualité, dimensions, et source (caméra, galerie). La subtilité commence lors du stockage. Capacitor retourne soit une URI web ( file:// ), soit des données base64, selon la plateforme et votre configuration. Sur Android 10+, l'accès direct au système de fichiers est restreint. Il faut donc utiliser FilesystemDirectory.Documents ou FilesystemDirectory.Cache du plugin Filesystem, puis gérer les permissions avec Permissions.query() . Un pattern courant et sûr consiste à capturer l'image en base64, la valider côté client (dimension, taille), puis l'envoyer au serveur ou la stocker localement avec le plugin Filesystem. Voici un exemple concret :
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
import { Filesystem, Directory } from '@capacitor/filesystem';
async captureAndStore() {
const photo = await Camera.getPhoto({
quality: 85,
allowEditing: false,
resultType: CameraResultType.Base64,
source: CameraSource.Camera
});
const fileName = photo_${Date.now()}.jpg ;
await Filesystem.writeFile({
directory: Directory.Cache,
path: fileName,
data: photo.base64String || ''
});
return fileName;
}
Attention : le format base64 augmente la taille de 33% environ. Pour les applications consommant beaucoup de photos (galeries, social), préférez CameraResultType.Uri et manipulez le fichier directement. Sur iOS, le cache est nettoyable par le système ; sur Android, utilisez Directory.ExternalStorage avec les permissions appropriées si vous souhaitez un stockage persistant visible à l'utilisateur.
Authentification biométrique : empreinte et reconnaissance faciale
Capacitor BiometricAuth unifie les APIs iOS Biometric (LocalAuthentication) et Android BiometricPrompt. L'API est simple mais le contexte sécuritaire est critique. Avant d'appeler BiometricAuth.isAvailable() , vérifiez toujours les permissions ( BIOMETRIC_READ sur Android 28+). Ensuite, BiometricAuth.authenticate() affiche une boîte de dialogue native—l'utilisateur scanne son empreinte ou son visage. Le succès retourne un token opaque ; l'échec ou l'annulation lève une exception. La piège classique : beaucoup de développeurs stockent des données sensibles (tokens JWT, mots de passe) en mémoire après une authentification biométrique, sans jamais les revalider. Biometric n'est qu'un facteur d'authentification local ; elle ne remplace jamais une vérification serveur. Le flux correct est : (1) utilisateur se connecte avec email/mot de passe, (2) serveur délivre un refresh token long terme, (3) app locale enregistre le refresh token dans Keychain/Keystore natif (via Capacitor Storage avec useEncryption: true ou le plugin SecureStorageNative), (4) à la prochaine ouverture, biometric vérifie localement et utilise le refresh token pour obtenir un access token court terme.
import { BiometricAuth } from '@capacitor-community/biometric-auth';
async authenticateWithBiometric() {
try {
const available = await BiometricAuth.isAvailable();
if (!available.isAvailable) {
throw new Error('Biométrie non disponible');
}
const result = await BiometricAuth.authenticate({
reason: 'Authentification sécurisée',
title: 'Vérifiez votre identité'
});
if (result.success) {
// Récupérez le refresh token du keystore local
const token = await this.secureStorage.get('refreshToken');
// Appelez votre API pour obtenir un access token
await this.refreshAccessToken(token);
}
} catch (e) {
console.error('Authentification échouée', e);
}
}
Ne jamais stocker d'identifiants en localStorage ou même en sessionStorage après une authentification biométrique. iOS et Android fournissent des stockages chiffrés au niveau du système ; Capacitor Storage with encryption et les plugins de keystore natif sont la norme.
Notifications push : orchestration et livraison fiable
Les notifications push constituent l'intégration native la plus complexe. Capacitor PushNotifications gère l'enregistrement auprès des services de notification (Firebase Cloud Messaging sur Android, APNs sur iOS), mais ne gère pas l'envoi côté serveur. Votre backend doit communiquer avec FCM et APNs directement ou via un service tiers (SendGrid, Braze, OneSignal). Côté app, le flow est : (1) au démarrage, appeler PushNotifications.requestPermissions() , (2) s'enregistrer avec PushNotifications.register() , (3) récupérer le token via l'événement registration , (4) envoyer ce token au serveur pour l'associer à l'utilisateur. Pour les événements, écoutez pushNotificationReceived (app au premier plan) et pushNotificationActionPerformed (clic utilisateur). Un piège fréquent : ne pas gérer l'arrivée de notifications quand l'app est fermée. Sur Android, le système les affiche automatiquement ; sur iOS, si vous n'avez pas bien configuré les capabilities, elles disparaissent. Un autre piège : mélanger notifications push et notifications locales. Capacitor LocalNotifications est distinct et utile pour les rappels générés localement (alarmes, minuteurs). Voici un setup minimaliste fiable :
import { PushNotifications } from '@capacitor/push-notifications';
async setupPushNotifications() {
let permStatus = await PushNotifications.requestPermissions();
if (permStatus.receive === 'granted') {
await PushNotifications.register();
}
PushNotifications.addListener('registration', (token) => {
console.log('Token reçu:', token.value);
// Envoyez token.value au serveur
this.sendTokenToBackend(token.value);
});
PushNotifications.addListener('pushNotificationReceived', (notification) => {
console.log('Notification reçue:', notification);
// Traitez ou affichez la notification
});
PushNotifications.addListener('pushNotificationActionPerformed', (action) => {
console.log('Action:', action);
// Naviguez ou déclenchez une action
});
}
Testez toujours sur des vrais appareils. Les simulateurs iOS et les émulateurs Android ne reçoivent pas les notifications push. Enfin, gérez l'expiration des tokens : les tokens FCM peuvent être régénérés, et vous devez mettre à jour votre backend sans attendre l'API pour éviter les notifications perdues.
Pièges courants et meilleures pratiques
Plusieurs antipatterns reviennent régulièrement. D'abord, tester uniquement sur le navigateur. Capacitor fournit une couche de mock en développement, mais le comportement réel des permissions, du stockage et de la caméra diffère rarement. Deuxièmement, ignorer la variabilité inter-plateforme. iOS et Android n'ont pas les mêmes APIs, permissions, et cycles de vie. Lisez la documentation de chaque plugin pour chaque plateforme. Troisièmement, surcharger le thread principal avec du traitement d'image. Les photos en haute résolution peuvent bloquer l'UI ; utilisez Web Workers ou déléguez au backend. Quatrièmement, oublier les permissions à l'installation. Sur Android 6+ et iOS 10+, les permissions doivent être demandées à l'exécution, pas au moment de l'installation. Capacitor gère cela, mais vérifiez toujours que la boîte de dialogue native s'affiche et que l'utilisateur comprend pourquoi vous demandez l'accès.
Conclusion : une approche pragmatique
Capacitor rend accessible l'intégration native sans les cauchemars de Cordova. Les trois plugins présentés—Camera, BiometricAuth, PushNotifications—couvrent la majorité des besoins. La clé est de comprendre que Capacitor n'est pas une abstraction magique ; c'est une passerelle, et chaque plateforme a ses particularités. Testez sur les vrais appareils, lisez la documentation officielle (elle est excellente), et ne sacrifiez jamais la sécurité pour la facilité. Si un plugin Capacitor ne suffit pas, vous pouvez toujours écrire un plugin natif personnalisé ou descendre au niveau des WebView natives—Capacitor vous donne le choix.