Outils HTML

Gratuit Generateur de template Service Worker module ES

Generez des templates de service workers en module ES avec strategies de cache, liste de precache et support hors ligne.

Chargement de l'outil...

Qu'est-ce que Generateur de template Service Worker module ES ?

Les service workers ES module permettent import/export au lieu de importScripts(), avec des strategies de cache configurables pour gerer les requetes, precacher les ressources et servir des pages hors ligne.

Réponse rapide

Template de service worker ES module avec strategies de cache, precache, activation automatique et page de repli hors ligne.

Last updated: 2026-05-31

Limites

  • Pas de dynamic import().
  • Pas de scripts cross-origin.
  • Conflits de version possibles sans nommage soigneux.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Selectionnez les strategies de cache par type de route.
  2. Listez les URL a precacher.
  3. Activez skipWaiting et clients.claim.
  4. Activez la page de repli hors ligne.

A quoi il sert

  • PWA avec cache des statiques et network-first pour les API.
  • Site avec stale-while-revalidate pour les articles.
  • Template personnalisable de service worker.

Cas d'usage

Exemples concrets

Exemple

Site statique PWA hors ligne

Cache-first pour CSS/JS, stale-while-revalidate pour HTML, page de repli.

Exemple

Service worker modulaire

Imports statiques pour partager des utilitaires entre plusieurs workers.

Erreurs frequentes

  • Utiliser importScripts() dans un module ES.
  • Ne pas nettoyer les anciens caches dans activate.
  • Oublier de definir le scope correctement.

Vérification

  1. Verifiez l'enregistrement et l'activation dans DevTools.
  2. Testez le mode hors ligne.

FAQ

Questions sur Generateur de template Service Worker module ES

Avantage des modules ES?

Import/export natif, analyse statique, pas de pollution du scope global.

Cache-first vs stale-while-revalidate?

Cache-first ne consulte pas le reseau. Stale-while-revalidate met a jour en arriere-plan.

Service worker ne s'active pas?

Utilisez skipWaiting() et clients.claim().

Dynamic import() possible?

Non, imports statiques obligatoires.

Outils lies

Autres outils outils html

A essayer aussi

A essayer aussi