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 manifest et utilise peut-être un service worker pour le mode hors ligne. Si vous avez désormais besoin d’une publication 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, c’est que vous conservez presque tout votre code web existant. Dans la plupart des cas, il vous suffit de :

compiler les 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 l'encapsuler en natif

Avant de lancer bunx cap init, vérifiez que votre app web est prête pour la production :

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.
Vérifiez que les prompts d’installation PWA et l’UX propre à chaque navigateur restent pertinents. Dans une app Capacitor, les prompts d’installation d’app ne sont généralement pas nécessaires.

Étape 2 : Adapter les comportements spécifiques au web

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 existante :

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

Exécutez Capacitor init avec le nom de votre application, 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 : Compiler l'app web et synchroniser

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 web-only par des API natives si nécessaire :

Notifications push -> @capacitor/push-notifications
Stockage clé/valeur sécurisé -> @capacitor/preferences
Caméra / médias -> @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écutez :

bunx cap sync

Puis recompiler et relancer.

Étape 7 : Contrôles de parité avec les stores

Avant la soumission :

Tester les deep links et le routage (/ et les deep routes) sur les deux plateformes.
Vérifier que la barre de statut, les zones de sécurité et l’orientation sont correctes.
Supprimer les métadonnées web inutilisées qui entrent en conflit avec le comportement de l’app (par exemple, les prompts d’installation).
Garder App Transport Security et les paramètres de confidentialité cohérents avec votre politique.
Ajoutez les icônes et les assets de splash pour chaque plateforme.

Si votre app utilise les mises à jour OTA, associez votre pipeline de release à une stratégie de mise à jour sûre pour le natif et envisagez Capgo for controlled rollout and rollback.

Checklist finale

L'app web compile proprement (bun run build)
Capacitor initialisé avec les bons webDir
bunx cap add ios et bunx cap add android terminé
Les apps natives tournent sur de vrais appareils
Les chemins code navigateur sont limités au 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'encapsuler 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 chemin de déploiement unique pour les équipes web et mobile.

Partez de ce flow, puis itérez natif par natif en fonction de vos analytics et des retours utilisateurs.

Continuer avec « Transformer votre PWA en application native avec Capacitor »

Si vous utilisez Transformez votre PWA en application native avec Capacitor pour planifier la migration et les opérations d'entreprise, connectez-l’à Capgo Entreprise 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, Conseil Capgo pour le workflow produit dans Capgo Consulting, et Support Premium Capgo pour le workflow produit dans Capgo Premium Support.