Aller au contenu
WebViewGold Du vibe coding à l'App Store
Français
Obtenir WebViewGold

Base44 + splash screen

Splash screen, indicateur de chargement et pull-to-refresh pour votre app Base44

Deux secondes d'écran blanc après le lancement : c'est ainsi qu'une app Base44 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.

  • Garantie d'approbation – ou remboursement sous 14 jours
  • Aucun codage requis
  • Paiement unique, mises à jour gratuites
  • Support humain 24/7
  • Conçu en Allemagne depuis 2014 · ISO 27001

D'où vient le flash blanc

La première requête

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 single-page app 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.

Des couleurs qui ne correspondent pas

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.

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
Cette app va être publiée en app native (WebViewGold) qui affiche un splash à ses couleurs jusqu'au chargement de la première page. Soignez les premières secondes :
1. Sur chaque page qui charge des données, affichez des lignes ou des cartes skeleton pendant le chargement, jamais une liste vide ni une page blanche.
2. Affichez immédiatement l'écran de connexion aux utilisateurs déconnectés, avec la même couleur de fond que le reste de l'app.
3. Utilisez partout une seule couleur de fond de page cohérente et indiquez-moi sa valeur hex.
4. Pour les actions qui prennent plus de deux secondes (rapports, fonctionnalités IA, imports), affichez un texte de progression ; quand navigator.userAgent contient "WebViewGold", naviguez aussi vers spinneron:// au début de l'action et vers spinneroff:// à la fin.
5. Affichez une erreur aimable avec un bouton Réessayer si le chargement échoue.

Mon WebView iOS est enfin approuvé. Merci !!

Taha Farooqui · CodeCanyon

Configurez un splash qui couvre tout le premier chargement

Dix minutes dans Config.swift et Config.java, puis une recompilation.

  1. Activez le splash et ajoutez votre image

    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.

  2. Accordez la couleur de fond

    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).

  3. Gardez-le affiché jusqu'à ce que la page soit prête

    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.

  4. Stylisez l'indicateur de chargement des pages suivantes

    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.

  5. Peignez la première image dans votre app web

    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.

Spinner natif et pull-to-refresh depuis JavaScript

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 Base44, activez-le et désactivez-le vous-même, et coupez le pull-to-refresh sur les écrans qui ont leurs propres gestes :

javascript
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://";
}

Le pull-to-refresh en un seul réglage

  • iOS : passez 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).
  • Android : passez ENABLE_PULL_REFRESH à true dans Config.java. Les mêmes appels enablepulltorefresh:// et disablepulltorefresh:// fonctionnent sur les deux plateformes.
  • Le geste recharge l'URL actuelle. Sur les écrans de votre app Base44 qui contiennent une saisie non enregistrée (un long formulaire, un brouillon de message), désactivez-le tant que l'écran est ouvert.
  • Vous voulez du contenu frais quand l'app revient de l'arrière-plan ? 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.

Ce qui est signalé lors de l'examen

  • Un splash qui se termine avant que la page soit prête, suivi d'un écran blanc. Avec 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).
  • Une longue intro à vos couleurs. Les Human Interface Guidelines d'Apple considèrent le lancement comme une transition rapide vers l'app ; un splash qui dure le temps du chargement convient, une animation supplémentaire de cinq secondes, non.
  • Le splash ou l'icône par défaut de WebViewGold laissés dans le build.
  • Une vérification de connexion qui n'affiche rien pendant plusieurs secondes. Affichez immédiatement le formulaire de connexion ou un skeleton.
  • Une URL de preview, protégée par mot de passe ou de développement en veille comme URL de départ : le splash se termine sur une page d'erreur.

Questions fréquentes

Un splash screen est-il obligatoire pour l'App Store ?

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.

Combien de temps le splash doit-il rester affiché ?

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.

Pourquoi vois-je encore une image blanche après le splash ?

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.

Le splash peut-il être animé ?

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.

L'indicateur de chargement s'affiche-t-il pendant la navigation côté client dans une app Base44 ?

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.

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 principale

Full 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 WeSetupYourWebViewApp

Prix Soldes d'hiver valables jusqu'au 31 décembre 2026.

Prêt à publier votre app Base44 ?

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.