Cursor + splash screen
Deux secondes d'écran blanc après le lancement : c'est ainsi qu'une app Cursor récolte une remarque au titre de la guideline 2.1 ou un avis à une étoile. L'app native s'ouvre instantanément ; votre app web a besoin d'un instant. WebViewGold couvre cet instant avec un splash à vos couleurs, un indicateur de chargement natif et le pull-to-refresh, et quelques lignes dans votre app web rendent la transition invisible.
Dès $109 en paiement unique par plateforme, ou notre équipe s'occupe de tout dès $698.
L'app démarre en quelques millisecondes, mais le premier HTML, le CSS et le JavaScript doivent encore passer par le réseau. Sur un serveur froid (un hébergement qui redescend à zéro) ou avec une connexion faible, cela prend des secondes. Sans splash, utilisateurs et examinateurs regardent une WebView vide.
La plupart des apps vibe-codées sont des single-page apps React. Quand la page a « fini de charger », l'élément racine peut encore être vide jusqu'à ce que JavaScript effectue le rendu et que les premières données arrivent. Si le splash disparaît pile à ce moment-là, vous voyez une image blanche.
Une app sombre derrière un fond de splash blanc, ou un fond de page blanc sous un en-tête sombre, produit un flash à chaque lancement. Une seule couleur de fond, partagée par le splash, le HTML et la barre d'état, le fait disparaître.
Collez ceci dans Cursor 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 (son user agent contient "WebViewGold"), qui affiche un splash jusqu'au chargement de la première page. 1. Mesurez le First Contentful Paint et la taille du JavaScript initial de l'URL de production avec un profil mobile bridé, et indiquez les résultats. 2. Intégrez en inline la couleur de fond de la page dans le head HTML, préchargez la police principale et découpez le code par route, pour que le premier écran ne charge que ce dont il a besoin. 3. Remplacez les rendus initiaux vides (null pendant le chargement) par des composants skeleton. 4. Créez lib/native-ui.ts avec showNativeSpinner() et hideNativeSpinner() (spinneron:// et spinneroff://) et setPullToRefresh(enabled) (enablepulltorefresh:// ou disablepulltorefresh://), tous sans effet hors de l'app et jamais deux appels dans le même tick. 5. Désactivez le pull-to-refresh sur les écrans avec glisser-déposer, cartes ou carrousels horizontaux, et réactivez-le quand ils sont démontés. 6. Mesurez à nouveau et indiquez la différence.
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.
Dix minutes dans Config.swift et Config.java, puis une recompilation.
iOS : splashScreenEnabled dans Config.swift et votre splash.gif carré (128, 512 ou 1024 px) à la racine du projet. Android : SPLASH_SCREEN_ACTIVATED dans Config.java et splash.gif dans les assets. Les GIF animés fonctionnent ; gardez l'animation courte.
Réglez splashscreencolor sur iOS, et le fond du splash dans colors.xml sur Android, sur la couleur de fond exacte de votre premier écran. Dimensionnez le logo avec scaleSplashImage et SCALE_SPLASH_IMAGE (pourcentage du plus petit côté de l'écran ; 0 le masque).
Passez remainSplashOption (iOS) et REMAIN_SPLASH_OPTION (Android) à true : le splash reste jusqu'au chargement de l'URL de départ, au lieu de céder la place à l'indicateur de chargement après un délai fixe splashTimeout / SPLASH_TIMEOUT. En option : splashMinTime / SPLASH_MIN_TIME pour une durée minimale et splashFadeTime / SPLASH_FADE_OUT pour le fondu de sortie, en millisecondes.
Après le lancement, WebViewGold affiche son indicateur natif à chaque chargement de page. Sur iOS, choisissez un spinner ou une barre de progression (useLoadingSign, useLoadingProgressBar) et une couleur (loadingIndicatorColor) ; sur Android, basculez avec ACTIVATE_PROGRESS_BAR.
Dans index.html, donnez à l'élément html une couleur de fond inline identique à celle du splash, et affichez un skeleton léger au lieu d'une racine vide pendant la vérification de session et le chargement des premières données. Le passage du splash à l'app web devient alors imperceptible.
Le travail côté client n'est pas un chargement de page : l'indicateur natif n'apparaît donc pas tout seul. Autour des générations IA, des envois de fichiers ou des longs appels au backend de votre app Cursor, activez-le et désactivez-le vous-même, et coupez le pull-to-refresh sur les écrans qui ont leurs propres gestes :
const inApp = navigator.userAgent.includes("WebViewGold"); // votre token de user agent personnalisé
async function withNativeSpinner(task) {
if (inApp) window.location.href = "spinneron://";
try {
return await task();
} finally {
if (inApp) window.location.href = "spinneroff://";
}
}
// utilisation
// const reply = await withNativeSpinner(() => fetch("/api/generate", { method: "POST", body }));
// cartes, tableaux en glisser-déposer, carrousels : désactiver tant que cet écran est ouvert
function setPullToRefresh(enabled) {
if (inApp) window.location.href = enabled ? "enablepulltorefresh://" : "disablepulltorefresh://";
}pulltorefresh à true et preventoverscroll à false (le geste a besoin du rebond). Couleurs pour les modes clair et sombre : pulltorefresh_loadingsigncolour_lightmode, pulltorefresh_backgroundcolour_lightmode et les variantes _darkmode (documentation du pull-to-refresh).ENABLE_PULL_REFRESH à true dans Config.java. Les mêmes appels enablepulltorefresh:// et disablepulltorefresh:// fonctionnent sur les deux plateformes.autoRefreshEnabled (iOS) et AUTO_REFRESH_ENABLED (Android) rechargent la page au retour au premier plan ; laissez-les désactivés pour les apps avec de longs formulaires.remainSplashOption désactivé et une première requête lente, c'est exactement ce que voit l'examinateur, et un écran vide est un constat typique de la guideline 2.1 (comment corriger un refus 2.1).Apple exige un écran de lancement, que le projet iOS WebViewGold inclut déjà. Le splash à vos couleurs par-dessus est facultatif, mais pour une app qui charge une app web, c'est la façon pratique d'éviter un écran blanc pendant le chargement de la première page.
Le temps de charger la première page, pas plus. remainSplashOption (iOS) et REMAIN_SPLASH_OPTION (Android) font exactement cela ; n'ajoutez une durée minimale d'environ une seconde que si un chargement très rapide fait clignoter le logo.
La page est chargée, mais votre single-page app n'a pas encore effectué son rendu, ou son fond diffère de la couleur du splash. Définissez une couleur de fond inline sur l'élément html, affichez tout de suite un skeleton et gardez exactement la même couleur pour le splash.
Oui, splash.gif peut être animé sur les deux plateformes. Gardez-le carré, léger et plus court que le temps de chargement habituel, pour que les utilisateurs ne le voient pas coupé en pleine animation.
Pas automatiquement : les changements de route côté client et les appels fetch ne sont pas des chargements de page. Utilisez spinneron:// et spinneroff:// autour des opérations longues, et des skeletons pour les courtes.
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.