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 Lovable
Collez ceci dans Lovable pour implémenter la partie app web. Vérifiez le résultat, publiez, puis testez dans l'app WebViewGold.
Prompt à coller dans Lovable
Préparez une interface propre à l'app et une interface propre au web pour la version mobile native. 1) Ajoutez un hook useIsNativeApp() qui renvoie true quand navigator.userAgent contient "WebViewGold". 2) Ajoutez l'attribut data-web-only au header marketing, au footer, au bandeau cookie et à tout élément promotionnel du type « Télécharger l'app » ou « Edit with », et ne les affichez pas quand useIsNativeApp() est true. 3) Dans l'app native, affichez une tab bar fixe en bas avec quatre onglets (Accueil, Recherche, Activité, Profil) qui utilisent les routes existantes, avec padding-bottom défini sur env(safe-area-inset-bottom) et une hauteur de 56px ; masquez la navigation du haut sur les largeurs mobiles. 4) Évitez les décalages de mise en page : évaluez le hook de manière synchrone pour que le choix soit fait avant le premier rendu.
WebViewGold nous a permis d'avoir le temps de mise sur le marché le plus court et le plus efficace jamais possible parmi toutes les autres plates-formes d'application que nous avons essayées au cours des 5 dernières années. Je ne sais pas pourquoi je ne vous ai pas découvert plus tôt, mais je suis vraiment, vraiment content de l'avoir fait. Nous approchons actuellement les 6000 téléchargements d'application sur l'App Store iOS et Google Play Store sans aucun problème!
Deux façons de procéder avec Lovable
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 Lovable
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 Lovable :
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.