Transformez votre PWA en application native avec Capacitor

Introduction

Vous avez déjà une Progressive Web App. Elle fonctionne dans les navigateurs, possède un manifeste et utilise peut-être un service worker pour le mode hors ligne. Si vous avez désormais besoin d'une distribution sur les stores, d'API natives ou d'un meilleur tunnel d'onboarding, migrer vers une application Capacitor est généralement plus rapide que de réécrire votre front end.

Le plus grand avantage est que vous conservez presque tout votre code web existant. Dans la plupart des cas, vous n'avez qu'à :

compiler vos assets web de production,
initialisez Capacitor avec les bons webDir,
ajoutez les projets iOS et Android,
et branchez les plugins natifs uniquement si nécessaire.

Si votre PWA a des routes et une logique de composants propres, cela peut ne prendre que quelques heures.

Prerequisites

Temps estimé: 2 à 5 heures, selon les fonctionnalités spécifiques à la plateforme.

Node.js 18+ avec Bun
Votre code source PWA actuel code (React, Vue, Angular, Svelte, etc.)
Xcode (pour iOS, macOS uniquement)
Android Studio (pour Android)
Compte Apple Developer si vous prévoyez de publier sur iOS
Compte Google Play Developer pour la distribution Android

Étape 1 : Vérifiez votre PWA avant de la wrapper en natif

Avant de lancer bunx cap init, verify your web app is production-ready:

Assurez-vous que votre PWA possède un script de build de production (ex : bun run build).
Confirmez que le dossier de sortie web est déterministe (souvent dist, build, ou out).
Supprimez les redirections absolues codées en dur qui supposent un contexte navigateur uniquement.
Vérifiez que le comportement du service worker est compatible avec les WebViews mobiles :
- Conservez le support hors ligne si cela aide vos utilisateurs.
- Évitez les API réservées au navigateur qui sont indisponibles dans la webview intégrée.
Confirm PWA install prompts and browser-specific UX still make sense. In a Capacitor app, app install prompts are usually not needed.

Étape 2 : Adapter les comportements web uniquement

Keep your app UI but gate browser-only logic.

Use a simple platform check around install and push prompts:

import { Capacitor } from '@capacitor/core'

const isNative = Capacitor.isNativePlatform()

function registerInstallPrompt() {
  if (isNative) return
  // existing browser-only install or Web Push code
}

Cela évite l'exécution d'une logique réservée au navigateur à l'intérieur du conteneur natif.

Étape 3 : Initialiser Capacitor dans votre dossier PWA

Depuis la racine de votre PWA actuelle :

bun add @capacitor/core
bun add -D @capacitor/cli

Exécutez Capacitor init avec le nom de votre app, l'ID du bundle et le répertoire de sortie web :

bunx cap init MyPWAApp com.example.my-pwa-app --web-dir dist

Si votre dossier de build est build (Create React App) ou out (export statique Next.js), remplacez dist.

Ajoutez une config Capacitor de base :

import type { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.example.my-pwa-app',
  appName: 'MyPWAApp',
  webDir: 'dist',
  server: {
    iosScheme: 'https',
  },
}

export default config

Étape 4 : Ajouter les plateformes natives

Installez les packages natifs de base et générez les dossiers du projet :

bun add @capacitor/ios @capacitor/android
bunx cap add ios
bunx cap add android

À ce stade, Capacitor a créé ios/ et android/ les dossiers. La synchronisation copiera vos assets web compilés vers les deux plateformes.

Étape 5 : Build de l'app web et sync

Compilez la PWA et synchronisez les assets web :

bun run build
bunx cap sync

Ouvrez maintenant les projets natifs :

bunx cap open ios
bunx cap open android

Depuis Xcode ou Android Studio, connectez un appareil ou un émulateur et lancez.

Étape 6 : Améliorations natives après la migration

C'est ici que vous remplacez les fonctionnalités purement web par des API natives si nécessaire :

Notifications push -> @capacitor/push-notifications
Stockage sécurisé clé/valeur -> @capacitor/preferences
Appareil photo / média -> @capacitor/camera
Authentification biométrique -> @capacitor-community/native-biometric (ou le plugin de votre choix)

Pour chaque nouveau plugin natif :

Installer le package du plugin
Configurer les paramètres spécifiques au plugin
Exécuter :

bunx cap sync

Puis recompiler et relancer.

Étape 7 : vérifications de parité avec les stores

Avant la publication :

Testez les deep links et le routage (/ et les routes profondes) sur les deux plateformes.
Vérifiez que la barre d'état, les safe areas et l'orientation sont correctes.
Supprimez les métadonnées web inutiles en conflit avec le comportement de l'app (ex. : prompts d'installation).
Gardez l'App Transport Security et les paramètres de confidentialité conformes à votre politique.
Ajoutez les icônes et les splash screens pour chaque plateforme.

Si votre app utilise les mises à jour OTA, associez votre pipeline de release à une stratégie native-safe et envisagez Capgo un déploiement progressif et un rollback.

Checklist finale

L'app web compile proprement (bun run build)
Capacitor est initialisé avec les bons webDir
bunx cap add ios et bunx cap add android terminé
Les apps natives s'exécutent sur de vrais appareils
Les chemins code réservés au navigateur sont bridés pour le comportement natif
Les canaux de Live Update et les assets du store sont configurés

Vous avez déjà fait le plus dur en créant votre PWA. L'envelopper avec Capacitor vous offre :

La distribution sur les stores,
L'accès aux API natives,
Une itération plus rapide sans réécrire tout le code,
Un canal de déploiement unique pour les équipes web et mobile.

Partez de ce flux, puis itérez nativement en vous basant sur les analytics et les retours utilisateurs.

Continuer la lecture : Transformer votre PWA en application native avec Capacitor

Si vous utilisez Transformer votre PWA en application native avec Capacitor pour planifier la migration et les opérations d'entreprise, connectez-l’à Capgo Enterprise pour le workflow produit dans Capgo Enterprise, Alternatives aux plugins Ionic Enterprise pour le workflow produit dans les alternatives aux plugins Ionic Enterprise, Alternatives à Capgo pour le workflow produit dans les alternatives à Capgo Consulting Capgo pour le workflow produit dans le Consulting Capgo, et Capgo Support Premium pour le workflow produit dans Capgo Premium Support.