Claude Code + pantalla splash
Una pantalla blanca durante dos segundos al abrir la app es la manera en que una app de Claude Code se gana una observación por la directriz 2.1 o una reseña de una estrella. La app nativa se abre al instante; tu app web necesita un momento. WebViewGold cubre ese momento con una splash con tu marca, un indicador de carga nativo y deslizar para actualizar (pull-to-refresh), y unas pocas líneas en tu app web hacen que la transición sea invisible.
Desde $109 de pago único por plataforma, o deja que nuestro equipo lo haga todo desde $698.
La app arranca en milisegundos, pero el primer HTML, CSS y JavaScript todavía tienen que llegar por la red. Con un servidor en frío (hosting que escala a cero) o una conexión débil, eso tarda segundos. Sin splash, usuarios y revisores se quedan mirando un WebView vacío.
La mayoría de las apps de vibe coding son single-page apps de React. Cuando la página "ha terminado de cargar", el elemento raíz todavía puede estar vacío hasta que JavaScript renderiza y llegan los primeros datos. Si la splash desaparece justo en ese momento, ves un fotograma en blanco.
Una app oscura detrás de un fondo de splash blanco, o un fondo de página blanco bajo una cabecera oscura, provoca un destello en cada arranque. Un único color de fondo compartido por la splash, el HTML y la barra de estado lo elimina.
Pega esto en Claude Code para implementar la parte de la web app. Revisa el resultado, publica y luego prueba dentro de la app WebViewGold.
Lee https://www.webviewgold.com/llms-full.txt (secciones App Name, Icon & Splash Screen, Splash Screen y Loading Sign). Esta app web funciona dentro de WebViewGold; el proyecto de iOS está en ./ios-app y el de Android en ./android-app. 1. Determina a partir del tema el color de fondo de la primera pantalla y defínelo inline en html y body en el punto de entrada HTML; añade un pequeño esqueleto de carga con CSS dentro del elemento raíz. 2. Sustituye por un esqueleto de carga cualquier renderizado que devuelva null mientras se cargan la sesión o los primeros datos. 3. iOS: en Config.swift pon splashScreenEnabled = true, remainSplashOption = true, splashMinTime = 800, splashFadeTime = 250 y splashscreencolor con ese color. 4. Android: en Config.java pon SPLASH_SCREEN_ACTIVATED = true, REMAIN_SPLASH_OPTION = true, SPLASH_MIN_TIME = 800 y SPLASH_FADE_OUT = 250, y define el color de fondo de la splash en colors.xml. 5. Añade helpers para spinneron:// y spinneroff:// que solo se ejecuten cuando navigator.userAgent incluya "WebViewGold", y úsalos alrededor de las peticiones largas. 6. Anota el color en CLAUDE.md y enumera todos los cambios.
¡Estoy muy feliz de haber comprado esta aplicación! Documentación extremadamente fácil y excelente. Estaba en contacto con el servicio al cliente, respondieron muy rápido y de forma muy amigable. Resolvieron mi pregunta en un día. 10/10 lo recomendaría".
Diez minutos en Config.swift y Config.java, y luego una nueva compilación.
iOS: splashScreenEnabled en Config.swift y tu splash.gif cuadrado (128, 512 o 1024 px) en la raíz del proyecto. Android: SPLASH_SCREEN_ACTIVATED en Config.java y splash.gif en los assets. Los GIF animados funcionan; mantén la animación corta.
Ajusta splashscreencolor en iOS y el fondo de la splash en colors.xml en Android exactamente al color de fondo de tu primera pantalla. Controla el tamaño del logo con scaleSplashImage y SCALE_SPLASH_IMAGE (porcentaje del lado más corto de la pantalla; 0 lo oculta).
Pon remainSplashOption (iOS) y REMAIN_SPLASH_OPTION (Android) en true: la splash se queda hasta que la URL de inicio ha cargado, en lugar de dar paso al indicador de carga tras un splashTimeout / SPLASH_TIMEOUT fijo. Opcional: splashMinTime / SPLASH_MIN_TIME para una duración mínima y splashFadeTime / SPLASH_FADE_OUT para el fundido de salida, en milisegundos.
Después del arranque, WebViewGold muestra su indicador nativo cada vez que se carga una página. En iOS elige entre spinner o barra de progreso (useLoadingSign, useLoadingProgressBar) y un color (loadingIndicatorColor); en Android cámbialo con ACTIVATE_PROGRESS_BAR.
Dale al elemento html un color de fondo inline en index.html igual al color de la splash, y renderiza un esqueleto de carga ligero en lugar de una raíz vacía mientras se comprueba la sesión y se cargan los primeros datos. Así, el paso de la splash a la app web es imperceptible.
El trabajo en el cliente no es una carga de página, así que el indicador nativo no aparece por sí solo. Actívalo y desactívalo tú mismo en tu app de Claude Code durante generaciones con IA, subidas de archivos o llamadas largas al backend, y desactiva deslizar para actualizar en pantallas con gestos propios:
const inApp = navigator.userAgent.includes("WebViewGold"); // tu token personalizado de user agent
async function withNativeSpinner(task) {
if (inApp) window.location.href = "spinneron://";
try {
return await task();
} finally {
if (inApp) window.location.href = "spinneroff://";
}
}
// uso
// const reply = await withNativeSpinner(() => fetch("/api/generate", { method: "POST", body }));
// mapas, tableros de arrastrar y soltar, carruseles: desactívalo mientras la pantalla esté abierta
function setPullToRefresh(enabled) {
if (inApp) window.location.href = enabled ? "enablepulltorefresh://" : "disablepulltorefresh://";
}pulltorefresh en true y preventoverscroll en false (el gesto necesita el efecto rebote). Colores para los modos claro y oscuro: pulltorefresh_loadingsigncolour_lightmode, pulltorefresh_backgroundcolour_lightmode y las variantes _darkmode (documentación de deslizar para actualizar).ENABLE_PULL_REFRESH en true en Config.java. Las mismas llamadas enablepulltorefresh:// y disablepulltorefresh:// funcionan en ambas plataformas.autoRefreshEnabled (iOS) y AUTO_REFRESH_ENABLED (Android) recargan la página al volver al primer plano; déjalos desactivados en apps con formularios largos.remainSplashOption desactivado y una primera petición lenta, eso es exactamente lo que ve el revisor, y una pantalla en blanco es un hallazgo típico de la directriz 2.1 (cómo solucionar la 2.1).Apple exige una launch screen, que el proyecto iOS de WebViewGold ya incluye. La splash con tu marca que va encima es opcional, pero en una app que carga una app web es la forma práctica de evitar una pantalla blanca mientras se carga la primera página.
Lo que tarde en cargar la primera página y ni un momento más. remainSplashOption (iOS) y REMAIN_SPLASH_OPTION (Android) hacen exactamente eso; añade un tiempo mínimo de alrededor de un segundo solo si una carga muy rápida hace que el logo parpadee.
La página ha cargado, pero tu single-page app todavía no ha renderizado, o su fondo es distinto del color de la splash. Pon un color de fondo inline en el elemento html, renderiza un esqueleto de carga de inmediato y mantén idéntico el color de la splash.
Sí, splash.gif puede ser animado en ambas plataformas. Que sea cuadrado, ligero y más corto que el tiempo de carga habitual, para que los usuarios no lo vean cortarse a mitad de la animación.
No automáticamente: los cambios de ruta en el cliente y las llamadas fetch no son cargas de página. Usa spinneron:// y spinneroff:// alrededor de las operaciones largas, y esqueletos de carga para las cortas.
El mismo resultado, con distinta cantidad de trabajo por tu parte. Las tres incluyen la garantía de aprobación y soporte humano 24/7.
$109 por plataforma, pago único
La licencia de WebViewGold: un proyecto de Xcode o Android Studio listo para usar. Pega tu URL, define nombre e icono, activa funciones, compila y envía. Actualizaciones gratuitas para siempre.
Ver planes en la página principal$349 por licencia, complemento de pago único
Sin Mac, sin Xcode, sin Android Studio: configura en el navegador, compilamos ambas apps en la nube y las entregamos a App Store Connect y a Play Console.
Cómo funciona el Cloud Builder Prueba la demo gratuita$698 por plataforma $798
Envíanos tu URL y tu icono. Nuestro equipo configura, compila y entrega tu app en 72 horas, en marca blanca y con los proyectos fuente. Ambas plataformas por $1,158.
Detalles del Full Service Con tecnología de
Precios de la Oferta de invierno válidos hasta el 31 de diciembre de 2026.
Garantía de aprobación en App Store & Google Play – o te devolvemos el dinero en 14 días
¿Prefieres delegarlo? Full Service: configuramos, compilamos y entregamos en 72 horas, desde $698 por plataforma. ¿Preguntas? Chatea con nosotros 24/7.
Los reembolsos se conceden bajo las condiciones indicadas en nuestras FAQ: un rechazo por motivos ajenos al contenido por parte de Apple y/o Google, reclamado dentro de los 14 días posteriores a la compra.