Crear una lista de precaché para un service worker
Pegue las rutas de los archivos que su sitio debe guardar para usarse sin conexión y reciba una lista limpia y ordenada: /assets/./app.js pasa a /assets/app.js, una hoja de estilos repetida se descarta y las cinco entradas del ejemplo quedan en 4. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Una instalación fiable de un service worker comienza con una lista limpia de archivos para almacenar en caché. Este generador recibe rutas de recursos estáticos, convierte las entradas relativas en URL desde la raíz, resuelve segmentos de punto seguros, conserva las cadenas de consulta relevantes y elimina duplicados sin alterar el primer orden de aparición. El resultado incluye una lista de precaché lista para Cache Storage y recuentos útiles para automatizar las comprobaciones de compilación.
Convierta la salida de compilación en una lista instalable
Las compilaciones web modernas pueden producir HTML, hojas de estilo, fragmentos de JavaScript, fuentes, iconos y páginas de respaldo en varios directorios. Copiar esos nombres manualmente en un service worker es lento y provoca divergencias cuando cambia un archivo. Se mantiene el primer orden de aparición para facilitar revisiones y comparaciones entre compilaciones.
La respuesta también indica el total final de recursos y cuántos duplicados se eliminaron. Estas cifras resultan prácticas en CI: una caída inesperada del total puede detener la compilación antes de publicar una versión sin conexión incompleta. La herramienta no descarga, identifica ni inspecciona recursos; solo transforma rutas obtenidas de un proceso de compilación fiable.
Normalización predecible de las rutas
Las rutas de recursos suelen llegar con grafías distintas aunque señalen el mismo archivo. Por ejemplo, <code>assets/app.js</code>, <code>/assets/app.js</code> y <code>/assets/./app.js</code> se convierten en <code>/assets/app.js</code>. Se contraen las barras repetidas, se resuelven los segmentos superiores seguros, se elimina el espacio exterior y se omiten resultados normalizados repetidos después de su primera aparición.
Las cadenas de consulta se conservan porque <code>/app.js? También se rechazan las URL completas y relativas al protocolo: esta capacidad está pensada para archivos estáticos del mismo sitio, no para copiar recursos externos. Si un segmento superior escapara de la raíz, la validación falla en vez de reescribirlo silenciosamente.
Así, la salida es determinista y no presupone el origen, el contenido ni la disponibilidad externa.
Use la lista con seguridad en el service worker
Coloque el array devuelto en la rutina de instalación que abre su caché versionada y llama a <code>addAll</code>. Mantenga el nombre de la caché versionado por separado, porque el generador no puede saber cuándo cambia el contenido de un archivo que conserva la misma ruta. Si su empaquetador incluye hashes en los nombres, introduzca esas rutas; si emplea nombres estables, cambie la versión de la caché cuando cambie su contenido.
Trate la entrada como una lista permitida deliberada: incluya el armazón de la aplicación y los recursos imprescindibles para trabajar sin conexión, pero evite páginas personales, respuestas autenticadas o URL dinámicas ilimitadas. Una instalación demasiado grande tarda más y falla con mayor facilidad en conexiones inestables. El límite defensivo es de 10,000 entradas, aunque una lista real debería ser mucho menor.
Durante la activación, elimine versiones antiguas según su política. La herramienta solo crea la lista; no genera eventos, elige estrategias, accede a la red ni modifica un service worker.
Qué puede hacer con ella
Genere la lista del armazón
Normalice las rutas de HTML, CSS, JavaScript, fuentes e iconos necesarios para iniciar una aplicación web progresiva sin conexión.
Compruebe artefactos en CI
Convierta los nombres recopilados en una salida estable y verifique los recuentos antes del despliegue.
Limpie una lista manual
Resuelva rutas relativas inconsistentes y suprima duplicados accidentales conservando el orden de instalación.
Preguntas frecuentes
¿Cuánto cuesta?
El mismo generador determinista también puede ejecutarse en su navegador desde esta página.
¿La herramienta descarga o verifica los recursos?
No. Valida y normaliza cadenas de rutas sin realizar solicitudes de red ni comprobar si existen los archivos.
¿Por qué se conservan las cadenas de consulta?
Una consulta puede seleccionar otra clave de caché o versión, y eliminarla podría unir recursos que debían permanecer separados.
¿Por qué se rechazan las URL remotas?
La capacidad crea una lista estática del mismo sitio. La caché entre orígenes requiere decisiones explícitas de disponibilidad, CORS, privacidad y errores.
¿Por qué conviene versionar aparte el nombre de la caché?
La lista solo mira rutas, así que no puede saber cuándo cambia el contenido de un archivo que conserva su nombre. Si sus archivos llevan una huella del contenido en el nombre, ponga a la caché el nombre de la versión publicada; si los nombres no cambian, cambie la versión de la caché cada vez que cambie su contenido.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/web/service-worker-cache-list-build \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"paths":["/","/assets/app.css","assets/app.js","/icons/icon-192.png"]}'const res = await fetch("https://api.kit.forhosting.com/web/service-worker-cache-list-build", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"paths": [
"/",
"/assets/app.css",
"assets/app.js",
"/icons/icon-192.png"
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/service-worker-cache-list-build",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"paths": [
"/",
"/assets/app.css",
"assets/app.js",
"/icons/icon-192.png"
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/service-worker-cache-list-build", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"paths":["/","/assets/app.css","assets/app.js","/icons/icon-192.png"]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"paths":["/","/assets/app.css","assets/app.js","/icons/icon-192.png"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/service-worker-cache-list-build", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Ejemplo de solicitud
{
"paths": [
"/",
"/assets/app.css",
"assets/app.js",
"/icons/icon-192.png"
]
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.service_worker_cache_list_build",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
timeout_sec | 30 |
max_crawl_pages | 25 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
Convierta la salida de compilación en una lista instalable
Envíe las rutas estáticas en el orden de descarga deseado y el generador devolverá una lista de precaché para service worker en la clave <code>precache_manifest</code>. Cada elemento será una URL local relativa a la raíz, por lo que podrá pasar el array directamente a <code>cache.addAll(precache_manifest)</code> durante el evento de instalación.
Normalización predecible de las rutas
v=41</code> y <code>/app.js? v=42</code> pueden representar entradas de caché diferentes. Los fragmentos se rechazan porque no viajan en las solicitudes HTTP y podrían aparentar recursos distintos sin serlo.
Preguntas técnicas
¿Puedo pasar el resultado directamente a cache.addAll?
Sí. El valor precache_manifest es un array de URL locales apto para el método addAll de Cache Storage.
¿Qué ocurre si la lista de rutas está vacía?
La solicitud falla con un error invalid_input porque una lista de precaché vacía no cumple el objetivo de esta capacidad.