Comment mettre une application web sur l'App Store en 11 étapes

Pour mettre une application web sur l'App Store et Google Play, enveloppez votre application web construite dans un projet natif avec Capacitor, ajoutez quelques fonctionnalités natives, créez des comptes développeurs Apple et Google, signez et construisez les binaires iOS et Android, testez-les avec des utilisateurs réels, préparez les listes de magasin et soumettez-les à examen. Votre HTML, CSS et JavaScript existants continuent de fonctionner à l'intérieur d'une vue WebView native, vous n'avez donc pas à réécrire l'application.

Voici les 11 étapes dans l'ordre qui évite les attentes, avec des commandes pour Capacitor 8 et les règles de magasin qui s'appliquent en octobre 2026.

Ce dont vous avez besoin

• Une application web qui se construit en fichiers statiques (React, Vue, Angular, Svelte, Next.js export statique, Nuxt generate, HTML simple, ou une application créée avec un constructeur AI tel que Lovable ou Bolt).
• Node.js 22 ou ultérieur (exigence de Capacitor 8) et Bun ou un autre gestionnaire de packages.
• Android Studio pour les builds Android.
• Xcode 26 sur macOS pour les builds iOS, ou un service de build cloud si vous n'avez pas de Mac.
• 99 $ par an pour Apple et 25 $ une fois pour Google.

Calendrier réaliste

Créer un compte développeur : inscrivez-vous aujourd'hui

Le vérification du compte est l'étape que vous ne pouvez pas accélérer, faites-la donc avant de coder.

• Apple Developer Program: 99 $ par an. Les individus ont besoin d'un compte Apple avec l'authentification à deux facteurs et de leur nom légal. Les organisations ont également besoin d'un numéro D-U-N-S, d'un site web de l'entreprise et d'un courrier électronique de travail sur ce domaine.
• Google Play ConsoleCoût : 25 USD une fois. Les organisations nécessitent un numéro D-U-N-S. Vérification d'identité attendue.

Si vous vous inscrivez sur Google Play en tant qu'individu, votre compte est soumis à la règle de test fermé (Étape 9). Démarche complète : comment créer des comptes développeurs Apple et Google Play.

Étape 2 : Préparez l'application web pour un téléphone

Capacitor runs your app in a WebView. Things that are fine in a browser tab feel wrong in an app:

• Sortie de construction statique. Capacitor charge des fichiers du bundle de l'application. La mise en page côté serveur ne s'exécute pas sur le téléphone. Utilisez la sortie statique de votre framework (next build avec output: 'export', nuxt generate, Vite build). API appelle les API vers votre backend sur HTTPS comme avant.
• Navigation côté client fonctionnant à partir d'un origine de fichier. Utilisez l'historique de navigation (Capacitor sert l'application depuis) https://localhost sur Android et capacitor://localhost sur iOS, donc cela fonctionne) et assurez-vous que les URLs profondes redirigent vers index.html.
• CORS. Ajoutez les origines Capacitor à ceux autorisés de votre API : capacitor://localhost (iOS) et https://localhost (Android).
• (Touchez, pas survolez). Remove hover-only menus. Make tap targets at least 44 x 44 points.
• Zones de sécurité. Ajoutez viewport-fit=cover à la balise meta viewport et ajoutez des marges aux en-têtes et aux barres de bas. env(safe-area-inset-top) et env(safe-area-inset-bottom).
• Réseau hors ligne et réseau lent. Affichez un état approprié au lieu d'une écran vide. Les évaluateurs testent sur un Wi-Fi instable.
• Aucun bandeau « téléchargez notre application » Aucun lien qui envoie les utilisateurs sur votre site Web pour effectuer des tâches de base.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Étape 3 : Ajoutez Capacitor

À partir de la racine de votre projet web :

bun add @capacitor/core
bun add -d @capacitor/cli
bunx cap init "My App" com.example.myapp --web-dir dist
bun add @capacitor/ios @capacitor/android
bun run build
bunx cap add ios
bunx cap add android

Utilisez le réel dossier de sortie pour --web-dir: dist pour Vite, out pour Next.js static export, .output/public pour Nuxt generate, build pour Create React App, dist/<project>/browser pour Angular.

L'ID de l'application (com.example.myapp) est permanent une fois l'application est sur les magasins. Utilisez un domaine inversé que vous contrôlez.

Votre capacitor.config.ts semble maintenant comme ceci :

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

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'My App',
  webDir: 'dist',
};

export default config;

Capacitor 8 crée le projet iOS avec Swift Package Manager par défaut, vous n'avez donc pas besoin de CocoaPods. Chaque fois que vous modifiez le web code :

bun run build
bunx cap sync

Exécutez-le :

bunx cap run ios
bunx cap run android

Commitez les ios/ et android/ dossiers. Ils sont les sources code que vous allez modifier (permissions, icônes, signature). Pour plus de contexte, consultez comment il est facile de transformer une application web en application mobile avec Capacitor, and if you built with an AI tool, our Guide de l'amour à la mobilité.

Step 4: Add native features that justify an app

context : Page/zone : Page d'informations sur Capgo. Rôle : Étiquette de l'interface utilisateur. Voir : page about.astro. Message clé `about_how_step_label` (Étape de l'information sur Capgo).

Exemple : affichez le partage natif au lieu d'un bouton « copier le lien ».

import { Share } from '@capacitor/share';
import { Capacitor } from '@capacitor/core';

export async function shareLink(url: string, title: string) {
  if (Capacitor.isNativePlatform()) {
    await Share.share({ title, url });
  } else {
    await navigator.clipboard.writeText(url);
  }
}

Si vous vendez du contenu numérique ou des abonnements, planifiez les paiements maintenant. Apple et Google exigent leurs systèmes d'achat en application pour les biens numériques dans la plupart des cas. Sur l'App Store américain, les applications peuvent également se référer à un achat en ligne externe après la décision de justice de 2025 ; les autres régions ont leurs propres règles. Les biens physiques et les services (livraisons, courses) peuvent utiliser Stripe ou tout fournisseur de paiement. Consultez achats en application avec Capacitor.

Le catalogue complet des Capgo plugins est disponible sur la page des plugins.

Étape 5 : icônes, écran de splash et chaînes de permission

Générer toutes les tailles d'icône et de splash à partir de deux images de source :

bun add -d @capacitor/assets
# assets/icon.png 1024x1024, assets/splash.png 2732x2732
bunx capacitor-assets generate

Tout les permissions que vous utilisez sur iOS nécessitent une description d'utilisation en ios/App/App/Info.plistou l'application se bloque lorsqu'elle demande et qu'Apple la rejette :

<key>NSCameraUsageDescription</key>
<string>Take a photo of your receipt to attach it to an expense.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Choose receipt photos from your library.</string>

Sur iOS, chaque permission que vous utilisez nécessite une description d'utilisation dans

Sur Android, les plugins ajoutent la plupart des autorisations au manifeste eux-mêmes. Supprimez les autorisations que vous n'utilisez pas ; Google vous demande de justifier les sensibles.

Also add a manifeste de confidentialité (PrivacyInfo.xcprivacySi votre code utilise des API de raison requise. Voir les guide de confidentialité du manifest pour Capacitor.

Étape 6 : Configurer la signature

iOS. Vous devez avoir un certificat de distribution Apple (avec sa clé privée, généralement exporté sous la forme) .p12) et d'un profil de provisionnement App Store Connect pour votre ID de bundle. Xcode peut les créer automatiquement, ou vous pouvez les créer vous-même, même sans Mac. Lisez certificats et profils de provisionnement iOS expliqués; le certificat iOS généré gestionne l'étape de CSR dans le navigateur.

Android. Créez un clé de publication et gardez-la sauvegardée. Google Play utilise Play App Signing, donc Google détient la clé de signature finale et vous signez les téléchargements avec la vôtre.

keytool -genkeypair -v -keystore upload-keystore.jks -alias upload \
  -keyalg RSA -keysize 2048 -validity 10000

Ou utilisez le générateur de clés de publication Android.

Étape 7 : Construire les binaires de version finale

Localement

iOS (sur un Mac avec Xcode 26, requis pour les téléchargements sur l'App Store depuis avril 2026) :

1. bunx cap open ios
2. Sélectionnez la Application cible, définissez la version et le numéro de build, choisissez votre équipe sous Signature & Capacités.
3. Sélectionnez Tout appareil iOS (arm64), puis Produit > Archive.
4. Dans l'Organisateur, Distribute App > App Store Connect > Télécharger.

Android :

bun run build
bunx cap sync android
cd android
./gradlew bundleRelease

L’AAB est dans android/app/build/outputs/bundle/release/. Configurez signingConfigs in android/app/build.gradle Avec votre clé de stockage, charger les mots de passe à partir de variables d'environnement.

Assurez-vous targetSdkVersion is 36. Since August 31, 2026 Google Play requires new apps and updates to target Android 16 (API 36), which is the Capacitor 8 default.

Dans le cloud

Si vous n'avez pas de Mac, ou si vous souhaitez des builds réproducibles à partir de CI, Capgo Développement Construit les deux plateformes sur des machines hébergées et peut télécharger directement sur TestFlight et Google Play.

bunx @capgo/cli@latest build credentials save --appId com.example.myapp --platform ios
bunx @capgo/cli@latest build credentials save --appId com.example.myapp --platform android
bunx @capgo/cli@latest build request com.example.myapp --platform ios --path .
bunx @capgo/cli@latest build request com.example.myapp --platform android --path .

Credentials are used only for the build and are not stored on Capgo servers. See the Capgo Build docs.

Page 8 : Distribuer aux testeurs

Mettre la construction sur des téléphones réels avant que personne à Apple ou Google ne la voie.

• iOS: télécharger sur TestFlight. Les testeurs internes (jusqu'à 100 membres de l'équipe) le reçoivent après traitement ; les testeurs externes (jusqu'à 10 000) après une courte évaluation de l'application bêta.
• AndroidCréez une mise à jour de test interne dans Play Console et partagez le lien d'opt-in.

Testez l'inscription et la connexion, les paiements en environnement de test, les notifications push, le comportement hors ligne, le clavier recouvrant les champs d'entrée et le comportement du bouton Retour sur Android. comment distribuer les applications iOS et Android aux testeurs.

Page 9 : Lancer le test fermé de Google Play (nouveau compte personnel)

Si votre compte Play est un compte personnel créé après le 13 novembre 2023, vous ne pouvez pas publier en production avant d'avoir exécuté un test avec au moins 12 testeurs inscrits pendant 14 jours consécutifsEnsuite, vous demandez l'accès à la production dans le tableau de bord du console de Play, que Google examine généralement en une semaine.

Démarrez cela dès que vous avez une version Android fonctionnelle. Utilisez un groupe Google comme liste de testeurs afin que les personnes puissent s'inscrire elles-mêmes. Envoyez des mises à jour pendant les 14 jours et collectez des retours, car Google demande ce que vous avez appris. Les comptes d'organisation sont exemptés.

Étape 10 : Préparez les listes de magasins et soumettez-les

Vous avez besoin pour les deux magasins : nom de l'application, descriptions, captures d'écran aux tailles acceptées, icône, URL de la politique de confidentialité, déclarations de confidentialité (Apple App Privacy et Google Data safety), questionnaire d'âge, contact de support et un compte de démonstration si l'application nécessite un login. Google a également besoin d'une image de fonctionnalité de 1024 x 500. Spécifications et limites : Comment préparer votre liste de magasin App Store et Google Play.

Soumettre sur iOS : Créez la version dans App Store Connect, sélectionnez la build TestFlight, renseignez les informations de revue d'application (compte de démo, notes) et cliquez. Ajouter pour la RevueEnsuite, Soumettre.

Soumettre sur Android : créer une version de production avec l’AAB (ou promouvoir la version testée d'une piste de test), compléter tous les App content déclaration, définir les pays, et envoyer pour examen.

la déclaration des pays et envoyer en revue.

1. 4.2 Fonctionnalité Minimum: the app is just your website. Add native value and remove browser-like UI.
2. Login required but no demo accountAuthentification requise mais pas de compte de démonstration
3. , ou le compte ne fonctionne pas. when you offer Google or Facebook login on iOS. Guideline 4.8 requires an equivalent option that limits data collection; Sign in with Apple is the usual choice.
4. Pas de suppression de compte inside the app when users can create accounts.
5. Achats numériques via Stripe où une achat en application est requis.
6. Disposition d'écran d'iPad cassée car le projet prend en charge par défaut l'iPad.
7. Chaînes de permission manquantes ou vagues.

Notre guide de revue d'application pour les débutants et guide de soumission d'application iOS passer par chacun en détail.

Étape 11 : Envoyer les mises à jour sans attendre la revue

Après le lancement, la plupart de vos modifications seront toujours dans le web code. Au lieu d'une nouvelle mise en vente pour chaque correction, ajoutez des mises à jour en direct. L'Capgo met à jour télécharge les nouveaux ensembles de web de Capgo et les applique à la prochaine mise en route, avec un roulage automatique si le nouveau paquet ne démarre pas.

bun add @capgo/capacitor-updater
bunx cap sync
bunx @capgo/cli@latest init

Appeler notifyAppReady() lorsque votre application a démarré afin que l'actualiseur sache que le bundle est en bonne santé :

import { CapacitorUpdater } from '@capgo/capacitor-updater';

CapacitorUpdater.notifyAppReady();

Ensuite, chaque mise à jour de web code est une commande :

bun run build
bunx @capgo/cli@latest bundle upload --channel production

Les deux magasins autorisent cela pour les interprétés code à condition que la mise à jour ne change pas la finalité principale de l'application ou ne contourne pas leurs règles de paiement. Les modifications natives (nouveaux plugins, nouveaux droits, Capacitor mises à jour) passent toujours par les magasins. En savoir plus sur mises à jour live de l'application Capgo et les documents de l'actualiseur.

Add the plugin before your first store submission. It has to be in the binary users install, otherwise your first live update can only reach users after a second store release.

Enfin, automatiser : construire et télécharger à chaque étiquette de GitHub Actions ou GitLab CI, mettre à jour en direct à chaque fusion vers main, et conserver les versions natives pour les changements natifs.

Liste de vérification avant la mise en ligne

• Comptes Apple et Google approuvés, accords acceptés
• La mise en ligne d'une application web sur l'App Store
• Zones de sécurité, clavier et bouton de retour d'Android gérés
• At least a few native features that a website cannot offer
• Icons, splash, permission strings, privacy manifest
• Le certificat de distribution, le profil de l'App Store, le keystore téléchargé
• Target SDK 36 sur Android, construit avec Xcode 26 sur iOS
• Les tests de TestFlight et de Play effectués sur des appareils réels
• Le test fermé de Google Play terminé (comptes personnels)
• Listes complètes sur les deux magasins, compte de démonstration ajouté
• In-app account deletion if users can sign up
• Le plugin d'actualisation en direct inclus dans la première version

Troubleshooting

Ecran blanc au lancement. webDir pointe vers le mauvais dossier ou vous avez oublié bunx cap sync après avoir construit. Vérifiez ios/App/App/public et android/app/src/main/assets/public contient index.html.

API les appels échouent uniquement dans l'application. CORS : autorisez capacitor://localhost et https://localhost. Vérifiez également que vous n'appelez pas http:// URLs, qui sont bloquées par défaut par iOS.

Routes 404 après rafraîchissement ou lien profond. Utilisez un routeur qui redirige vers index.htmlou pour les anciens setups avec routage par hachage.

Les erreurs de signature Xcode. Voir la liste des erreurs dans Les certificats et les profils de provisionnement iOS expliqués.

La construction Gradle échoue après mise à jour. Capacitor nécessite Android Studio Otter (2025.2.1) ou une version plus récente et JDK 21, comme indiqué dans le Capacitor 8 guide de mise à niveauPour les autres erreurs de build Gradle, voir comment résoudre les erreurs de build Android dans Capacitor.

Google Play a rejeté l'upload pour la cible SDK. Réglage targetSdkVersion = 36 in android/variables.gradle.