prefetch
Deja un recurso pesado ya calentito en la caché del navegador antes de que haga falta, sin gastar los datos de quien navega a sus espaldas.
El dato clave: si un Service Worker atiende los GET del mismo origen dando prioridad a la caché, basta con hacer fetch de una URL una vez para que quede en CacheStorage. Cualquier petición posterior a esa misma URL da en la caché y funciona sin conexión. La precarga, por tanto, no necesita ningún descargador especial: solo hay que traerse los bytes.
API
| Función | Descripción |
|---|---|
whenIdle(callback, options?) |
Ejecuta cuando el navegador está ocioso; devuelve una función para cancelar |
networkAllowsDownload(options?) |
¿Podemos gastar ahora mismo los datos de quien navega? |
isUrlCached(url) |
¿Está ya esta URL en CacheStorage? |
prefetchUrl(url) |
Trae una URL a la caché; se la salta si ya está y falla en silencio |
prefetchUrls(urls, options?) |
Lo mismo para una lista, una detrás de otra |
prefetchWhenIdle(urls, options?) |
Las tres juntas: permiso → ocio → precarga en serie. No bloquea |
Opciones
| Opción | Se aplica a | Descripción | Por defecto |
|---|---|---|---|
timeout |
whenIdle |
Espera máxima por requestIdleCallback (ms) |
8000 |
fallbackDelay |
whenIdle |
Espera cuando no existe requestIdleCallback (ms) |
2500 |
optOutKey |
permiso de red | Clave de localStorage; cualquier valor significa que la persona desactivó la precarga | — |
slowTypes |
permiso de red | Valores de effectiveType que se dan por demasiado lentos |
['slow-2g', '2g'] |
serviceWorkerMessage |
prefetchUrls |
El type del mensaje con que se pasa la lista a un SW que controle la página |
— |
Ejemplo
import { prefetchWhenIdle, isUrlCached } from 'ranuts';
prefetchWhenIdle(modelFiles, {
optOutKey: 'disable_model_prefetch',
serviceWorkerMessage: 'precache-models',
});
// Más tarde: ¿ya está en local? (mira el archivo que termina de bajar el último)
const ready = await isUrlCached(modelFiles.at(-1));Notas
- La precarga gasta datos ajenos.
networkAllowsDownloadse niega con el ahorro de datos activado, con una conexión lenta o cuando la persona ha dicho que no. - Lo desconocido cuenta como permitido. La Network Information API no existe en Safari ni en Firefox; no poder leer la conexión no es motivo para no precargar nunca.
- Las listas se traen una detrás de otra: saturar el tubo ralentizaría la página que la persona está mirando de verdad.
- Mejor por la vía del Service Worker. Un SW que use
event.waitUntilsigue descargando aunque se cambie de página; un fetch del hilo principal muere en cuanto la persona se va. Sin un SW que controle la página, se recurre a esa vía automáticamente. - Comprueba el archivo más grande al mirar si un conjunto está en caché, o una descarga a medias parecerá completa.
- Que los fallos sean silenciosos es a propósito: una precarga fallida solo significa que la carga de verdad descargará más tarde.