Créer une liste de précache pour service worker
Collez les chemins des fichiers que votre site doit garder hors ligne et obtenez une liste propre et ordonnée : /assets/./app.js devient /assets/app.js, une feuille de style répétée disparaît et les cinq entrées de l'exemple passent à 4. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Une installation fiable de service worker commence par une liste propre de fichiers à mettre en cache. Ce générateur reçoit des chemins de ressources statiques, convertit les entrées relatives en URL depuis la racine, résout les segments de point sûrs, conserve les requêtes utiles et supprime les doublons sans modifier leur première position. Le résultat fournit une liste de précache prête pour Cache Storage et des compteurs pratiques pour automatiser les contrôles de compilation.
Transformez la sortie du build en liste installable
Les builds web modernes produisent parfois du HTML, des feuilles de style, des fragments JavaScript, des polices, des icônes et des pages de secours dans plusieurs répertoires. Copier ces noms à la main dans un service worker prend du temps et crée des écarts dès qu’un fichier change. Le premier ordre d’apparition est conservé afin de faciliter les vérifications et les comparaisons entre builds.
La réponse indique aussi le nombre final de ressources et celui des doublons retirés. Ces chiffres sont utiles en CI : une baisse inattendue peut arrêter le build avant qu’une version hors ligne incomplète ne soit publiée. L’outil ne télécharge, n’empreinte et n’inspecte aucun fichier ; il transforme uniquement les chemins issus d’un build fiable.
Une normalisation prévisible
Des chemins peuvent s’écrire différemment tout en désignant le même fichier. Ainsi, <code>assets/app.js</code>, <code>/assets/app.js</code> et <code>/assets/./app.js</code> deviennent <code>/assets/app.js</code>. Les barres répétées sont réduites, les remontées sûres sont résolues, les espaces extérieurs sont supprimés et les résultats normalisés identiques sont omis après leur première apparition.
Les chaînes de requête restent présentes, car <code>/app.js? Les URL absolues ou relatives au protocole sont également refusées, puisque cette capacité vise les fichiers statiques du même site, pas les ressources tierces. Une remontée au-dessus de la racine provoque une erreur plutôt qu’une réécriture silencieuse.
La sortie reste ainsi déterministe sans supposer l’origine, le contenu ou la disponibilité externe.
Utilisez la liste en toute sécurité
Placez le tableau renvoyé dans la routine d’installation qui ouvre votre cache versionné et appelle <code>addAll</code>. Versionnez séparément le nom du cache, car le générateur ignore quand le contenu change derrière un chemin stable. Si votre bundler ajoute des empreintes aux noms, fournissez les chemins produits ; s’il garde des noms stables, changez la version du cache à chaque modification.
Considérez l’entrée comme une liste d’autorisation volontaire : incluez le socle de l’application et les ressources nécessaires hors ligne, mais évitez les pages personnelles, les réponses authentifiées ou les URL d’exécution illimitées. Une liste trop longue ralentit le téléchargement et rend l’installation plus fragile. La limite défensive est de 10,000 entrées, mais une liste réelle devrait rester bien plus courte.
À l’activation, supprimez les anciennes versions selon votre politique. Cet outil crée uniquement la liste ; il ne génère pas d’événements, ne choisit aucune stratégie, n’accède pas au réseau et ne modifie pas votre service worker.
Cas d’usage
Générer la liste du socle applicatif
Normalisez les chemins HTML, CSS, JavaScript, polices et icônes nécessaires au démarrage hors ligne d’une application web progressive.
Contrôler les artefacts en CI
Convertissez les noms collectés en sortie stable et vérifiez les compteurs avant le déploiement.
Nettoyer une liste manuelle
Résolvez les chemins relatifs incohérents et retirez les doublons accidentels tout en gardant l’ordre d’installation.
Questions fréquentes
Quel est le tarif ?
Le même générateur déterministe peut aussi s’exécuter dans votre navigateur sur cette page.
L’outil télécharge-t-il ou vérifie-t-il les ressources ?
Non. Il valide et normalise les chemins sans requête réseau et sans vérifier l’existence des fichiers.
Pourquoi conserver les chaînes de requête ?
Une requête peut sélectionner une autre clé ou version de cache ; la retirer risquerait de fusionner des ressources distinctes.
Pourquoi les URL distantes sont-elles refusées ?
La capacité produit une liste statique du même site. Le cache interorigine exige des choix explicites concernant la disponibilité, CORS, la confidentialité et les échecs.
Pourquoi versionner le nom du cache à part ?
La liste ne regarde que les chemins : elle ne peut pas savoir quand le contenu d'un fichier change alors que son nom reste identique. Si vos noms de fichiers portent une empreinte du contenu, nommez le cache d'après la version publiée ; sinon, changez la version du cache à chaque modification.
Outils associés
Pour les développeurs — accès API
Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.
Endpoint
Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.
Appeler depuis votre 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)Exemple de requête
{
"paths": [
"/",
"/assets/app.css",
"assets/app.js",
"/icons/icon-192.png"
]
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.service_worker_cache_list_build",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.
Tarifs
Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.
Limites
timeout_sec | 30 |
max_crawl_pages | 25 |
Erreurs
| HTTP | Code | Signification |
|---|---|---|
401 | unauthorized | Clé API absente ou invalide : vérifiez l’en-tête Authorization. |
402 | insufficient_balance | Solde insuffisant : rechargez votre compte pour lancer cette tâche. |
404 | unknown_type | Type de tâche inconnu : vérifiez le champ type de votre requête. |
429 | rate_limited | Trop de requêtes : ralentissez la cadence, puis réessayez. |
Notes techniques
Transformez la sortie du build en liste installable
Indiquez les chemins statiques dans l’ordre de récupération souhaité : le générateur renvoie une liste de précache pour service worker sous la clé <code>precache_manifest</code>. Chaque élément est une URL locale relative à la racine ; vous pouvez donc transmettre directement le tableau à <code>cache.addAll(precache_manifest)</code> pendant l’installation.
Une normalisation prévisible
v=41</code> et <code>/app.js? v=42</code> peuvent représenter des clés de cache distinctes. Les fragments sont refusés : ils ne sont pas envoyés dans les requêtes HTTP et pourraient donner l’illusion de ressources différentes.
Questions techniques
Puis-je transmettre directement le résultat à cache.addAll ?
Oui. La valeur precache_manifest est un tableau d’URL locales adapté à la méthode addAll de Cache Storage.
Que se passe-t-il si la liste est vide ?
La requête échoue avec invalid_input, car une liste de précache vide ne remplit pas l’objectif de cette capacité.