Transformez votre PWA en application mobile native avec Capacitor

Introduction

Vous disposez déjà d'une Application Web Progressive. Elle fonctionne dans les navigateurs, possède un manifeste et utilise peut-être un travailleur de service pour un support hors ligne. Si vous avez maintenant besoin de la distribution dans les magasins d'applications, d'API natives de dispositif ou d'un meilleur canal d'abord, la migration vers une application Capacitor est généralement plus rapide que la refonte de votre front-end.

The biggest advantage is that you keep almost all of your existing web code. In most cases, you only need to:

construire des actifs web de production,
initialiser Capacitor avec les bons webDir,
ajouter des projets iOS et Android,
et brancher les plugins natives uniquement là où cela est nécessaire.

Si votre PWA a des routes propres et une logique de composant, cela peut prendre juste quelques heures.

Prérequis

Temps estimé: 2-5 heures, en fonction des fonctionnalités spécifiques des plateformes.

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

Étape 1 : Vérifiez votre PWA avant de l'entourer de native

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

Assurez-vous que votre PWA dispose d'un script de build de production (par exemple, bun run build).
Confirmez que le dossier de sortie web est déterministe (souvent dist, build, ou out).
Supprimez les redirigements absolus codés qui supposent un contexte de navigateur uniquement.
Vérifiez que le comportement du service worker est compatible avec les vues Web de mobile :
- Conservez le support hors ligne si cela aide vos utilisateurs.
- Évitez les API de navigateur uniquement qui sont inaccessibles dans la vue web intégrée.
Confirmez que les invites d'installation de PWA et l'UX spécifique au navigateur sont toujours pertinents. Dans une application Capacitor , les invites d'installation d'applications ne sont généralement pas nécessaires.

Étape 2 : Adapter les comportements de navigateur uniquement

Conservez votre interface d'application mais bloquez la logique de navigateur uniquement.

Utilisez une vérification de plateforme simple autour des invites et des prompts de push :

import { Capacitor } from '@capacitor/core'

const isNative = Capacitor.isNativePlatform()

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

Cela évite la logique de navigateur uniquement qui se déclenche à l'intérieur du conteneur natif.

Étape 3 : Initialiser Capacitor dans votre dossier PWA

À partir de votre dossier racine PWA existant :

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

Exécutez Capacitor init avec votre nom d'application, votre ID de bundle et votre répertoire de sortie web :

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

Si votre dossier de build est build (Créer un projet React) ou out (Export statique Next.js), remplacez dist.

Ajoutez une configuration de base Capacitor :

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 des plateformes natives

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

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

À ce stade, Capacitor a créé ios/ et android/ dossiers. La synchronisation copiera vos actifs web construits dans les deux plateformes.

Étape 5 : Construisez votre application web et synchronisez

Construirez l'application PWA et synchronisez les actifs web :

bun run build
bunx cap sync

Ouvrez maintenant les projets natifs :

bunx cap open ios
bunx cap open android

À partir de Xcode ou d'Android Studio, connectez un appareil ou un émulateur et exécutez.

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

C'est là que vous remplacez les fonctionnalités web uniquement par des API natives là où cela est nécessaire :

Notifications push -> @capacitor/push-notifications
Stockage clé/valeur sécurisé -> @capacitor/preferences
Médias / caméra -> @capacitor/camera
Authentification biométrique -> @capacitor-community/native-biometric (ou plugin de votre choix)

Pour chaque nouveau plugin natif :

Installez le package du plugin
Configurez les paramètres spécifiques au plugin
Exécutez :

bunx cap sync

Rebâtissez ensuite et exécutez à nouveau.

Étape 7 : Contrôles de parité de l'app store

Avant la soumission :

Testez les liens profonds et la navigation (/ et les routes profondes) sur les deux plateformes.
Vérifiez que la barre d'état, les zones de sécurité et l'orientation sont corrects.
Supprimez les métadonnées web non utilisées qui entrent en conflit avec le comportement de l'application (par exemple, les invites d'installation).
Conservez les paramètres de sécurité et de confidentialité de transport de l'application cohérents avec votre politique.
Ajoutez les icônes et les atouts de splash pour chaque plateforme.

If votre application utilise des mises à jour OTA, associez votre pipeline de publication à une stratégie d'actualisation native et considérez Capgo pour un lancement contrôlé et un retour en arrière.

Vérification finale

L'application Web se construit proprement (bun run build)
Capacitor initialisé avec le bon webDir
bunx cap add ios et bunx cap add android terminé
Les applications natives fonctionnent sur des appareils réels
Les chemins code exclusivement en navigateur sont bloqués pour le comportement natif
Les canaux d'actualisation et les actifs de magasin d'applications sont configurés

Vous avez déjà fait la majeure partie du travail lors de la création de votre PWA. L'ajout d'un enveloppe Capacitor vous donne :

Distribution de magasins,
Accès aux API natives,
Une itération plus rapide sans une refonte complète code
Un seul chemin de déploiement pour les équipes web et mobile.

Commencez par ce flux, puis itérez native-par-native en fonction des données d'analyse et des retours d'usagers.

Continuez de Transformez 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-le avec Capgo Enterprise pour le flux de travail du produit dans Capgo Enterprise, Alternatives de plugins d'entreprise Ionic pour le flux de travail du produit dans les alternatives d'Ionic Enterprise Plugin Capgo Alternatives pour le flux de travail du produit dans les alternatives de Capgo Capgo Consulting pour le flux de travail du produit dans Capgo Consulting, et Capgo Premium Support pour le flux de travail du produit dans Capgo Premium Support.

Transformez votre application web progressive en application native avec Capacitor