Masquer les éléments propres au site
Bandeaux cookies, badges des stores, pop-ups de newsletter, navigation desktop, le badge « Edit with … » de l'outil. Une règle CSS pour chacun dans custom.css.
Les changements typiques réservés à l'app
Une mise en page d'app
Des zones tactiles plus grandes, des marges de safe area pour les barres fixes, une navigation en bas d'écran (ou le pied de navigation natif de WebViewGold), des titres de page masqués quand la barre de l'app les affiche déjà.
Changer le comportement
Réécrivez les liens externes pour qu'ils s'ouvrent dans le navigateur intégré, appelez successhaptic:// après l'envoi d'un formulaire, masquez le paiement web pour les biens numériques et affichez à la place le bouton d'achat intégré.
Prompt pour Base44
Collez ceci dans Base44 pour implémenter la partie app web. Vérifiez le résultat, publiez, puis testez dans l'app WebViewGold.
Prompt à coller dans Base44
Faites en sorte que cette app ressemble à une app native et se comporte comme telle quand elle tourne dans notre wrapper mobile (détecté par la présence de "WebViewGold" dans navigator.userAgent). 1) Ajoutez un helper isNativeApp() et utilisez-le pour masquer la barre marketing du haut, les liens du footer, l'avis sur les cookies et tout élément « Made with » ; donnez aussi à ces éléments la classe web-only. 2) Sur les écrans de moins de 768px de large, remplacez la navigation latérale du layout par une tab bar fixe en bas qui affiche les quatre pages principales avec icônes et libellés, avec padding-bottom défini sur env(safe-area-inset-bottom), et ajoutez du padding en bas du contenu des pages pour que rien ne soit masqué. 3) Ne changez pas le layout desktop pour les utilisateurs du navigateur. 4) Rendez les transitions entre pages instantanées, sans rechargement complet.
Avec une bonne version optimisée de votre application Web, vous pouvez avoir une superbe application mobile en quelques minutes. De plus, le service client est très agréable et très utile! Je ne peux que recommander WebViewGold :-)
Deux façons de procéder avec Base44
Choisissez celle qui correspond à votre façon de travailler.
Option A : custom.css / custom.js dans WebViewGold
Modifiez les deux fichiers dans les projets Xcode et Android Studio (ou les champs du Cloud Builder). Ils sont injectés dans chaque page. Aucun déploiement de votre app web n'est nécessaire ; c'est un nouveau build de l'app qui livre le changement.
Option B : détecter l'app dans Base44
Définissez un user agent personnalisé dans Config.swift / Config.java (par exemple en ajoutant « WebViewGold »), ajoutez une classe sur le body de votre app web quand il est détecté, puis stylez les variantes
.in-appdans votre feuille de style habituelle. Les changements partent avec chaque publication, sans mise à jour de l'app.Combinez les deux
Utilisez la classe basée sur le user agent pour ce qui change souvent (navigation, promotions) et custom.css pour les nettoyages ponctuels d'éléments difficiles à modifier dans l'outil.
Vérifiez dans les conditions de la validation
Ouvrez l'app sur un iPhone et sur un téléphone Android, en portrait et en paysage, ainsi que sur un iPad : pas d'en-tête desktop, pas de défilement horizontal, rien sous l'encoche.
Un custom.css de départ
Adaptez les sélecteurs au balisage de Base44 :
css
/* éléments propres au site web */
#cookie-banner, .newsletter-popup, .app-store-badges, #lovable-badge, a[href*="lovable.dev"] { display: none !important; }
/* navigation desktop et liens du pied de page */
header .desktop-nav, footer .link-columns { display: none !important; }
/* safe area pour les barres fixes */
.bottom-bar { padding-bottom: env(safe-area-inset-bottom); }
/* zones tactiles confortables */
button, .btn, a.nav-item { min-height: 44px; }Questions fréquentes
Le CSS personnalisé modifie-t-il mon site web ?
Non. Il n'est injecté que dans l'app. Les visiteurs dans Safari ou Chrome voient le site comme avant.
Puis-je injecter des bibliothèques JavaScript ?
Oui, custom.js s'exécute à chaque chargement de page dans l'app. Gardez-le léger et défensif : selon le framework, les pages de votre app peuvent se charger avant ou après votre script.
Faut-il publier une nouvelle version sur les stores pour modifier le CSS ?
Pour les changements dans custom.css, oui (le fichier est livré avec l'app). Si vous voulez des changements instantanés, utilisez plutôt la détection du user agent dans votre app web.
Trois façons de mettre votre app dans les stores
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.
Faites-le vous-même
$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 principaleCloud Builder
$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 gratuiteFull Service
$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.