Bolt + navigation
Un menu hamburger et un en-tête de site web sont le moyen le plus rapide de donner à une app Bolt 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 Bolt pour implémenter la partie app web. Vérifiez le résultat, publiez, puis testez dans l'app WebViewGold.
Préparez la navigation de cette app pour un wrapper natif (WebViewGold) qui fournit sa propre barre d'onglets en bas de l'écran. Dans le wrapper, navigator.userAgent contient "WebViewGold". 1. Ajoutez public/_redirects avec la ligne /* /index.html 200 pour que chaque route se charge directement sur Netlify, et confirmez que chaque route de premier niveau affiche le bon écran lors d'un rechargement complet. 2. Créez src/lib/native.ts avec isNativeApp() et utilisez-la pour ne pas afficher, dans l'app, la barre de navigation du haut, le menu hamburger mobile et le pied de page. 3. Listez les quatre ou cinq routes de premier niveau avec un nom de SF Symbol suggéré pour chacune (par exemple house, magnifyingglass, bell, person.crop.circle), pour que je puisse les copier dans FooterBar.json. 4. Ajoutez un bouton retour dans l'en-tête de chaque écran de détail, qui revient dans l'historique s'il existe et sinon vers la route parente. 5. Après la connexion, ramenez l'utilisateur vers la route qu'il avait demandée au lieu d'ouvrir systématiquement le tableau de bord. Gardez l'expérience dans le navigateur exactement telle qu'elle est.
Je suis très content d'avoir acheté cette application ! Extrêmement facile et excellente documentation. J'ai été en contact avec le service client, ils ont répondu très rapidement et très amicalement. Ils ont résolu ma question en un jour. 10/10 recommanderaient.
| 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 Bolt, 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 Bolt 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 Bolt 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.