Les technologies web modernes permettent aujourd'hui de faire fonctionner une application non seulement dans un navigateur, mais aussi sous la forme d'une véritable application mobile. Avec CapacitorJS, une application développée avec React, Vue, Angular ou JavaScript peut être transformée en application Android et iOS et distribuée sur Google Play Store et l'App Store d'Apple.

Le point le plus important est le suivant :

Capacitor ne vous oblige pas à réécrire votre application web en application native. Il permet plutôt d'exécuter votre application web existante dans un environnement mobile natif et de lui donner accès aux fonctionnalités natives de l'appareil.

1. À quoi sert CapacitorJS ?

Imaginons que vous possédiez déjà une application React :

React
HTML
CSS
JavaScript
API
IndexedDB

Normalement, cette application fonctionne dans un navigateur.

Avec Capacitor, l'architecture devient :

                    Application Web React
                              │
                              ▼
                          Capacitor
                         /        \
                        /          \
                       ▼            ▼
                  Android          iOS

Votre application continue de fonctionner sur le Web, tandis que la même base de code peut également être utilisée pour créer des applications Android et iOS.

2. Capacitor n'est pas un framework d'interface

Capacitor ne doit pas être considéré comme un autre framework d'interface utilisateur comparable à React Native.

Son rôle est différent.

React
    ↓
Construit l'interface utilisateur

Capacitor
    ↓
Exécute l'application web dans un environnement natif
    ↓
Donne accès aux API natives

React reste React. Vue reste Vue.

Capacitor vient s'ajouter à votre application web existante.

Vous n'êtes pas non plus obligé d'utiliser Ionic. Capacitor peut être utilisé indépendamment avec les frameworks web modernes.

3. Comment fonctionne Capacitor ?

La manière la plus simple de comprendre Capacitor est de comprendre le concept de WebView.

Une application mobile contient une WebView dans laquelle votre application web s'exécute.

┌─────────────────────────────┐
│        Android / iOS        │
│                             │
│   ┌─────────────────────┐   │
│   │       WebView       │   │
│   │      React App      │   │
│   │   HTML / CSS / JS   │   │
│   └──────────┬──────────┘   │
│              │              │
│          Capacitor           │
│              │              │
│   ┌──────────▼──────────┐   │
│   │     API natives     │   │
│   │                     │   │
│   │ Caméra              │   │
│   │ GPS                 │   │
│   │ Notifications       │   │
│   │ Fichiers            │   │
│   │ Haptique             │   │
│   │ Réseau              │   │
│   └─────────────────────┘   │
└─────────────────────────────┘

Votre application React fonctionne dans la WebView.

Capacitor sert de pont entre la WebView et le système d'exploitation.

4. Pourquoi parle-t-on d'application native ?

Parce qu'il ne s'agit pas simplement d'ouvrir votre site web dans un navigateur.

Par exemple, votre application React peut appeler :

Camera.getPhoto()

Capacitor peut alors communiquer avec les API natives de l'appareil photo d'Android ou d'iOS.

Votre code JavaScript utilise ainsi une interface commune, tandis que Capacitor gère les différences propres à chaque plateforme.

5. Qu'est-ce qu'un plugin Capacitor ?

Les plugins constituent l'une des fonctionnalités les plus importantes de Capacitor.

On peut les considérer comme :

un pont entre JavaScript et les fonctionnalités natives de l'appareil.

Par exemple :

• Caméra

• Système de fichiers

• Géolocalisation

• Notifications

• Réseau

• Retour haptique

• Préférences

• Notifications push

• Partage

• Informations sur l'appareil

• Orientation de l'écran

Exemple :

import { Haptics, ImpactStyle } from '@capacitor/haptics';

await Haptics.impact({
    style: ImpactStyle.Medium
});

Votre code JavaScript peut ainsi déclencher une fonctionnalité native sans devoir implémenter directement les API Android et iOS.

6. Peut-on utiliser la caméra ?

Oui.

Vous pouvez permettre aux utilisateurs de :

• prendre une photo ;

• sélectionner une photo dans la galerie ;

• télécharger une photo de profil ;

• capturer des images ou des documents.

Architecture typique :

Photo de profil
      │
      ▼
    Caméra
      │
      ▼
     Photo
      │
      ▼
     React
      │
      ▼
      API

7. Peut-on utiliser le GPS ?

Oui.

Par exemple :

import { Geolocation } from '@capacitor/geolocation';

const position =
    await Geolocation.getCurrentPosition();

Votre application web peut ainsi accéder aux services de localisation d'Android et d'iOS grâce à Capacitor.

8. Peut-on envoyer des notifications ?

Oui.

Capacitor permet de gérer les notifications locales ainsi que les notifications push.

Par exemple, une application de planification peut envoyer :

« N'oubliez pas de faire vos devoirs de mathématiques. »

directement sur le téléphone de l'utilisateur.

C'est un avantage important par rapport à un simple site web.

9. Peut-on stocker des données hors ligne ?

Oui.

Capacitor fournit des API permettant de travailler avec le système de fichiers natif.

Pour une application fonctionnant hors ligne, vous pouvez combiner Capacitor avec des technologies comme :

Web
 ↓
IndexedDB

Mobile
 ↓
SQLite

Cependant, Capacitor ne crée pas automatiquement votre système de synchronisation.

Vous devez concevoir vous-même l'architecture offline et la synchronisation.

Par exemple :

Base de données locale
        ↓
Moteur de synchronisation
        ↓
API
        ↓
Base de données serveur

10. Le Web et le mobile peuvent-ils utiliser le même code ?

Dans une large mesure, oui.

Une application React peut avoir une structure comme :

src/
├── components/
├── pages/
├── services/
├── hooks/
├── api/
└── utils/

Une grande partie de ce code peut être partagée entre :

Web
Android
iOS

Cependant, certaines fonctionnalités peuvent nécessiter du code spécifique à chaque plateforme.

11. Peut-on ajouter Capacitor à une application React existante ?

Oui.

C'est l'un des principaux avantages de Capacitor.

Vous pouvez intégrer Capacitor dans une application React existante sans devoir tout recommencer.

Installation de base :

npm install @capacitor/core @capacitor/cli

Puis :

npx cap init

Pour Android :

npm install @capacitor/android
npx cap add android

Pour iOS :

npm install @capacitor/ios
npx cap add ios

Votre application React existante reste le cœur du projet.

12. Comment fonctionne le build ?

Vous construisez d'abord votre application React :

npm run build

Capacitor synchronise ensuite les fichiers générés avec le projet natif.

Code React
     │
     ▼
npm run build
     │
     ▼
Build Web
     │
     ▼
Capacitor
     │
     ├───────────────┐
     ▼               ▼
 Android            iOS

Le projet Android peut ensuite être ouvert dans Android Studio et le projet iOS dans Xcode.

13. Peut-on générer un APK ou un AAB ?

Oui.

Capacitor crée un véritable projet Android.

Avec Android Studio, vous pouvez générer :

APK

ou le format destiné à Google Play :

AAB

L'application peut ensuite être publiée sur Google Play.

14. Et pour iOS ?

Capacitor crée un véritable projet iOS pouvant être ouvert dans Xcode.

Le processus général est :

React
  ↓
Capacitor
  ↓
Xcode
  ↓
Application iOS
  ↓
App Store

Vous utilisez ensuite le processus normal de développement et de publication d'Apple.

15. Capacitor et Ionic sont-ils la même chose ?

Non.

Ionic est principalement un framework d'interface et une bibliothèque de composants.

Capacitor est un runtime natif.

Vous pouvez utiliser :

React
   +
Ionic
   +
Capacitor

mais également simplement :

React
   +
Capacitor

sans Ionic.

16. Capacitor ou React Native ?

La principale différence concerne le rendu de l'interface.

Capacitor

React
  ↓
HTML
CSS
JavaScript
  ↓
WebView
  ↓
API natives

React Native

React
  ↓
React Native
  ↓
Composants UI natifs
  ↓
iOS / Android

Avec Capacitor, vous pouvez conserver une grande partie de l'interface de votre application web existante.

Avec React Native, l'interface est reconstruite avec des composants React Native.

Ainsi, si vous disposez déjà d'une grande application React web, Capacitor peut réduire considérablement le travail de développement nécessaire.

17. Qu'en est-il de Google Login et OAuth ?

Une grande partie de l'architecture d'authentification peut être partagée, mais les plateformes mobiles nécessitent une configuration supplémentaire.

Par exemple :

Web
 ↓
Google OAuth
 ↓
Backend

Sur mobile, vous pouvez utiliser des flux OAuth natifs, des deep links, Universal Links ou App Links selon votre architecture.

Capacitor ne résout pas automatiquement tous les problèmes de configuration OAuth.

Cependant, votre logique d'authentification et votre backend peuvent rester largement communs.

18. Peut-on écrire du code natif avec Capacitor ?

Oui.

Si aucun plugin existant ne fournit la fonctionnalité nécessaire, vous pouvez créer votre propre plugin Capacitor.

Android :

React
  ↓
Plugin Capacitor personnalisé
  ↓
Kotlin / Java
  ↓
API native Android

iOS :

React
  ↓
Plugin Capacitor personnalisé
  ↓
Swift
  ↓
API native iOS

Vous n'êtes donc pas limité aux fonctionnalités des plugins existants.

19. Quels sont les inconvénients ?

Capacitor possède également certaines limites.

Dépendance à la WebView

L'interface fonctionne dans une WebView. Certaines interfaces très spécialisées peuvent donc être moins naturelles qu'avec une application entièrement native.

Besoin éventuel de plugins

Pour certaines fonctionnalités avancées de l'appareil, vous devrez utiliser un plugin existant ou créer le vôtre.

Différences entre les plateformes

Android et iOS ont des comportements différents concernant notamment :

• les permissions ;

• les notifications ;

• les tâches en arrière-plan ;

• OAuth ;

• le système de fichiers ;

• Bluetooth.

Ces différences doivent toujours être prises en compte.

Applications graphiques lourdes

Les jeux 3D, applications très graphiques ou expériences nécessitant des fréquences d'images très élevées peuvent être mieux adaptées au développement natif ou à des moteurs spécialisés.

20. À qui Capacitor convient-il le mieux ?

Capacitor est particulièrement adapté aux :

• développeurs React ;

• développeurs Vue ;

• développeurs Angular ;

• développeurs JavaScript ;

• équipes possédant déjà une application web ;

• applications SaaS ;

• applications de planification ;

• applications de productivité ;

• applications e-commerce ;

• applications basées sur des API ;

• applications offline-first.

Son principal avantage apparaît lorsque vous disposez déjà d'une application web fonctionnelle.

21. Exemple d'architecture réelle

Prenons l'exemple d'une application de planification :

                    PLANNER
                       │
              ┌────────┴────────┐
              │                 │
             Web              Mobile
              │                 │
           React             React
              │                 │
              │             Capacitor
              │              /      \
              │             /        \
              ▼            ▼          ▼
           Navigateur    Android      iOS
              │
              └──────────┬──────────┘
                         │
                        API
                         │
                    Laravel
                         │
                    PostgreSQL

Pour les données hors ligne :

Web
 ↓
IndexedDB

Mobile
 ↓
SQLite

La synchronisation peut être conçue ainsi :

Base locale
     ↓
Moteur de synchronisation
     ↓
API
     ↓
Base serveur

Cette architecture est particulièrement intéressante lorsque le Web et le mobile sont deux parties du même produit.

22. La définition la plus simple de Capacitor

En une phrase :

Capacitor est un runtime natif qui permet aux applications web développées avec React, Vue ou Angular de fonctionner sur Android et iOS tout en donnant accès aux fonctionnalités natives de l'appareil depuis JavaScript.

Plus simplement :

Vous avez une application React
        ↓
Vous ajoutez Capacitor
        ↓
Vous créez les projets Android + iOS
        ↓
Votre application web fonctionne sur mobile
        ↓
Les plugins donnent accès aux fonctionnalités natives
        ↓
Vous générez les applications Android et iOS

Conclusion

La principale force de Capacitor est simple :

Permettre aux développeurs web d'accéder au monde des applications mobiles natives avec le moins de réécriture possible.

Si vous développez une application extrêmement native et très exigeante graphiquement, exclusivement destinée à iOS et Android, React Native ou le développement natif peut être plus approprié.

En revanche, si vous possédez déjà une application React/web performante et souhaitez disposer de :

• Web/PWA ;

• Android ;

• iOS ;

• fonctionnement hors ligne ;

• caméra et GPS ;

• notifications ;

• fonctionnalités natives ;

• publication sur l'App Store ;

• publication sur Google Play ;

à partir d'une base de code largement commune, Capacitor constitue une solution très intéressante.

Son principal avantage pour une application React existante est simple : vous n'avez pas besoin de reconstruire toute votre application mobile depuis zéro.