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 Claude Code
Collez ceci dans Claude Code pour implémenter la partie app web. Vérifiez le résultat, publiez, puis testez dans l'app WebViewGold.
Prompt pour Claude Code
Cette app web tourne dans le wrapper natif WebViewGold ; son user agent contient "WebViewGold". 1) Créez lib/native.ts avec isNativeApp(). 2) Passez la base de code au peigne fin à la recherche de l'interface réservée au site web (navigation marketing, footer, bandeau cookie, badges des stores, bannières « Ouvrir dans l'app »), ajoutez data-web-only à chacun de ces éléments et ne les affichez pas dans l'app native. 3) Ajoutez un composant BottomNav (quatre routes principales, fixé en bas, padding-bottom: env(safe-area-inset-bottom)) affiché uniquement dans l'app native ; masquez-y la navigation du haut et ajoutez du padding au contenu. 4) Ajoutez un test Playwright avec un userAgent contenant "WebViewGold", qui vérifie que les éléments web-only ont disparu et que la navigation du bas existe. 5) Lancez les tests, résumez les modifications et documentez le token dans CLAUDE.md.
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 Claude Code
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 Claude Code
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 Claude Code :
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.