ChatGPT & Codex + navigation
Un menu hamburger et un en-tête de site web sont le moyen le plus rapide de donner à une app ChatGPT & Codex l'air d'un simple favori, et c'est précisément ce que les examinateurs jugent au titre de la guideline 4.2. WebViewGold ajoute une barre d'onglets ou une barre latérale native sur iOS, et une navigation inférieure ou un tiroir Material sur Android, chacun configuré dans un seul fichier, tandis que votre app web continue de gérer le routage.
Dès $109 en paiement unique par plateforme, ou notre équipe s'occupe de tout dès $698.
Au toucher, les quatre chargent une URL de votre app web dans la WebView principale : votre routage ne change donc pas. Choisissez un modèle principal par plateforme.
Passez showNavFooter à true dans Config.swift et décrivez trois à cinq onglets dans FooterBar.json : un libellé (name), un SF Symbol (sf_symbol) et l'URL que l'onglet ouvre (redirection_link), plus colour en dark ou light pour toute la barre.
Passez enableSidebar à true et remplissez Sidebar.json avec les mêmes champs. Un bouton flottant ouvre un menu coulissant natif, pratique quand vous avez plus de rubriques qu'une barre d'onglets ne peut en contenir. Elle fonctionne seule ou à côté du footer (documentation de la barre latérale).
ENABLE_NAVIGATION_FOOTER dans Config.java ajoute une barre de navigation inférieure Material 3. Ses entrées, icônes et libellés viennent de res/menu/menu_drawer.xml ; Google recommande trois à cinq destinations de premier niveau. Les modes clair et sombre suivent automatiquement le système.
ENABLE_NAVIGATION_DRAWER ajoute un bouton de menu flottant qui ouvre un tiroir Material, alimenté par le même fichier de menu. Navigation inférieure et tiroir peuvent cohabiter, par exemple avec les rubriques principales en bas, et les réglages, l'aide et les pages légales dans le tiroir.
Collez ceci dans ChatGPT & Codex pour implémenter la partie app web. Vérifiez le résultat, publiez, puis testez dans l'app WebViewGold.
Cette app web tourne dans le wrapper natif WebViewGold, qui affiche une barre d'onglets native. Son user agent contient "WebViewGold". Ouvrez une pull request qui : 1. ajoute lib/native.ts avec isNativeApp() et n'affiche ni l'en-tête du site, ni le menu hamburger, ni les colonnes de liens du pied de page quand elle renvoie true ; 2. ajoute un bouton retour dans l'en-tête de chaque page de détail, qui revient dans l'historique avec un repli vers la route parente ; 3. vérifie que les quatre ou cinq routes de premier niveau s'affichent correctement lors d'un chargement direct et les documente, avec des noms de SF Symbols suggérés, dans docs/native-tabs.md ; 4. déplace les liens vers la politique de confidentialité, les CGU et la suppression du compte dans la page du compte, pour qu'ils restent accessibles dans l'app ; 5. ajoute un test qui charge chaque route de premier niveau avec un user agent WebViewGold et vérifie que l'en-tête du site est absent ; 6. ajoute à AGENTS.md : dans l'app, la barre d'onglets native est la seule navigation. Résumez les changements dans la description de la PR.
Excellent travail! Je n'ai jamais codé quoi que ce soit, mais j'ai réussi à travailler avec cela. Facile et rapide! Avec une grande aide des créateurs!
| Barre native (WebViewGold) | Barre d'onglets créée dans l'app web | En-tête du site avec menu hamburger | |
|---|---|---|---|
| Apparence | Celle du système : SF Symbols sur iOS, Material 3 sur Android | Ce que vous dessinez, aux couleurs de votre marque | Un site web mobile |
| Où la modifier | FooterBar.json, Sidebar.json, menu_drawer.xml ; livrée avec une mise à jour sur le store | Dans votre app web, en ligne à chaque déploiement | Dans votre app web |
| Indicateur d'accueil et safe area | Gérés nativement | Nécessite un padding env(safe-area-inset-bottom) | Souvent masqué par l'indicateur d'accueil |
| Effet d'un toucher | Charge l'URL de l'onglet dans la WebView (un chargement de page) | Changement de route côté client ; instantané, l'état est conservé | Ouvre d'abord un menu, puis navigue |
| Idéal pour | Trois à cinq rubriques principales stables | Des rubriques qui changent souvent, des badges et des compteurs | Le site web uniquement ; à masquer dans l'app |
Environ 30 minutes pour les deux plateformes, plus une recompilation.
Typiquement : Accueil, une liste principale ou la recherche, une boîte de réception ou une action de création, et Compte. Tout le reste vit à l'intérieur de ces rubriques. Chaque destination a besoin de sa propre URL dans votre app ChatGPT & Codex, qui ouvre le bon écran lorsqu'elle est chargée directement, et pas seulement via des clics dans l'app.
Passez showNavFooter à true et ajoutez une entrée par onglet avec name, sf_symbol (par exemple house, magnifyingglass, tray, person.crop.circle) et le redirection_link complet sur votre domaine de production. Réglez colour selon votre thème. Référence : Documentation iOS.
Passez ENABLE_NAVIGATION_FOOTER (barre inférieure) ou ENABLE_NAVIGATION_DRAWER (tiroir latéral) à true dans Config.java, définissez les entrées, icônes et libellés dans res/menu/menu_drawer.xml et attribuez à chaque entrée son URL comme décrit ici : Documentation Android.
Définissez un user agent personnalisé contenant un token comme « WebViewGold » dans Config.swift (useragent_iphone, useragent_ipad) et Config.java (USER_AGENT), puis cessez d'afficher le menu de l'en-tête du site, le bouton hamburger et les colonnes de liens du pied de page lorsque votre app ChatGPT & Codex le détecte. Deux systèmes de navigation sur un même écran, c'est la remarque de design la plus fréquente.
Les iPhone n'ont pas de bouton retour système. Les onglets ouvrent les rubriques ; les pages atteintes depuis celles-ci ont besoin d'une flèche retour visible dans votre en-tête. Laissez enableswipenavigation activé pour que le balayage depuis le bord gauche ramène aussi en arrière sur iOS ; les utilisateurs Android disposent en plus du geste retour du système.
Touchez chaque onglet juste après le lancement, après la connexion et après l'expiration de la session. Un onglet qui redirige vers la page de connexion doit ensuite ramener l'utilisateur sur cet onglet, pas sur le tableau de bord.
Remplacez les URL par les routes de votre app ChatGPT & Codex sur votre domaine de production. Sidebar.json utilise la même structure. Vérifiez les noms d'icônes dans l'app SF Symbols d'Apple.
{
"colour": "light",
"layout": [
{ "redirection_link": "https://app.yourdomain.com/", "sf_symbol": "house", "name": "Accueil" },
{ "redirection_link": "https://app.yourdomain.com/search", "sf_symbol": "magnifyingglass", "name": "Recherche" },
{ "redirection_link": "https://app.yourdomain.com/inbox", "sf_symbol": "tray", "name": "Messages" },
{ "redirection_link": "https://app.yourdomain.com/account", "sf_symbol": "person.crop.circle", "name": "Compte" }
]
}Aucune fonctionnalité n'est obligatoire à elle seule. La guideline 4.2 demande si l'app offre plus qu'un site web reconditionné, et la 4.0 si elle respecte les conventions de design d'iOS. Une barre d'onglets native est l'un des signaux les plus clairs pour les deux, surtout avec des notifications push et un vrai écran hors ligne, mais elle ne remplace pas une app web adaptée au mobile.
Pas ceux de la barre native : FooterBar.json, Sidebar.json et menu_drawer.xml sont livrés dans le build. Les pages derrière les URL des onglets se mettent à jour à chaque déploiement. Si vos rubriques changent souvent, créez plutôt la barre d'onglets dans votre app web et affichez-la uniquement dans l'app.
Oui. Chaque onglet charge son URL dans la WebView : votre hébergement doit donc répondre à chaque route avec l'app (un fallback SPA vers index.html) et votre routeur doit ouvrir le bon écran lors d'un chargement direct. Testez-le en collant une URL d'onglet dans un nouvel onglet de navigateur.
Utilisez le footer pour trois à cinq rubriques principales. Ajoutez la barre latérale iOS ou le tiroir Android pour les destinations secondaires comme les réglages, l'aide et les pages légales. Ne répétez pas les mêmes liens dans les deux.
Gardez-le pour le site web et ignorez-le dans l'app grâce à une vérification du user agent. Dans l'app, la barre native prend le relais ; une seconde icône de menu dans l'en-tête déroute utilisateurs et examinateurs.
Même résultat, charge de travail différente de votre côté. Les trois formules incluent la garantie d'approbation et le support humain 24/7.
$109 par plateforme, paiement unique
La licence WebViewGold : un projet Xcode ou Android Studio prêt à l'emploi. Collez votre URL, définissez le nom et l'icône, activez les fonctionnalités, compilez et soumettez. Mises à jour gratuites à vie.
Voir les offres sur la page principale$349 par licence, extension en paiement unique
Ni Mac, ni Xcode, ni Android Studio : configurez dans le navigateur, nous compilons les deux apps dans le cloud et les transmettons à App Store Connect et à la Play Console.
Comment fonctionne le Cloud Builder Essayer la démo gratuite$698 par plateforme $798
Envoyez-nous votre URL et votre icône. Notre équipe configure, compile et livre votre app sous 72 heures, en marque blanche, projets sources inclus. Les deux plateformes pour $1,158.
Détails du Full Service Propulsé par
Prix Soldes d'hiver valables jusqu'au 31 décembre 2026.
Garantie d'approbation App Store & Google Play – ou remboursement sous 14 jours
Vous préférez déléguer ? Full Service : nous configurons, compilons et livrons sous 72 heures, dès $698 par plateforme. Des questions ? Chattez avec nous 24/7.
Les remboursements sont accordés aux conditions indiquées dans notre FAQ : un refus non lié au contenu par Apple et/ou Google, demandé dans les 14 jours suivant l'achat.