Herramientas HTML

Gratis Generador de plantillas Service Worker modulo ES

Genere plantillas de service workers en modulo ES con estrategias de cache, lista de precache y soporte offline.

Cargando herramienta...

Qué es Generador de plantillas Service Worker modulo ES?

Los service workers de módulo ES usan la opción type: 'module' en la llamada register(), permitiendo la sintaxis import/export en lugar de importScripts(). Esto habilita patrones de módulo JavaScript estándar, importaciones estáticas y una mejor gestión de dependencias. Combinado con estrategias de caché configurables (cache-first, network-first, stale-while-revalidate, network-only, cache-only), un service worker puede controlar cómo se manejan las solicitudes de red, precargar activos críticos en la instalación y servir páginas de respaldo sin conexión.

Respuesta rápida

Genere una plantilla de service worker de módulo ES con estrategias de caché configurables (cache-first, network-first, stale-while-revalidate, network-only, cache-only), listas de URL de precarga, activación automática (skipWaiting + clients.claim) y soporte de página de respaldo sin conexión. Usa sintaxis de módulo ES con import/export estático en lugar de importScripts.

Last updated: 2026-05-31

Limitaciones

Los service workers de módulo ES no soportan import() dinámico: todas las dependencias de módulos deben declararse estáticamente en el nivel superior. La carga de código dinámico requiere el patrón clásico importScripts.
Los scripts de módulo de origen cruzado no son compatibles con service workers. Los módulos importados deben ser del mismo origen. Si necesita cargar scripts desde un CDN, use el patrón de service worker clásico o agrupe el código localmente.
El ciclo de vida del service worker (install -> waiting -> activate -> update) puede causar conflictos de versión durante el desarrollo. Las opciones 'Update on Reload' y 'Bypass for Network' de DevTools ayudan, pero el versionado en producción requiere una nomenclatura cuidadosa de caché y lógica de limpieza.

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

Cómo usar esta herramienta

Seleccione estrategias de caché para diferentes tipos de ruta: cache-first para activos estáticos, network-first para llamadas API, stale-while-revalidate para contenido que se actualiza con frecuencia y network-only para endpoints sensibles.
Ingrese la lista de URLs a precargar durante el evento install. Estas se obtienen y almacenan en la caché para que funcionen sin conexión inmediatamente.
Active la auto-activación para habilitar skipWaiting y clients.claim, que activan el nuevo service worker inmediatamente para todos los clientes sin esperar la siguiente carga de página.
Active opcionalmente la página de respaldo sin conexión. Cuando una solicitud falla y el recurso no está en caché, el service worker sirve la página de respaldo en lugar de mostrar el error de conexión del navegador.

Para qué puedes usarla

Crear una aplicación web progresiva que almacene en caché todos los activos estáticos en la instalación, use network-first para datos API y proporcione una página de respaldo sin conexión para rutas no almacenadas.
Construir un sitio de contenido con almacenamiento en caché stale-while-revalidate para artículos: sirva la versión en caché instantáneamente y actualice la caché en segundo plano, manteniendo el contenido fresco sin esperar la red.
Generar una plantilla de proyecto con un esqueleto de service worker que los desarrolladores puedan personalizar con sus propias estrategias de caché, listas de precarga y comportamiento sin conexión.

Casos de uso

Ejemplos prácticos

Ejemplo

PWA de sitio estático con soporte offline completo

Un sitio de documentación desea funcionar sin conexión. Genere un service worker con estrategia cache-first para CSS, JS y fuentes, stale-while-revalidate para páginas HTML, network-first para consultas de búsqueda y una página de respaldo sin conexión. La lista de precarga incluye todas las páginas críticas para que todo el sitio funcione sin acceso a red después de la primera visita.

Ejemplo

Service worker basado en módulos con utilidades compartidas

Un equipo que gestiona múltiples PWAs desea compartir funciones de utilidad de caché entre service workers. Use la plantilla de módulo ES con importaciones estáticas: import { cacheFirst, networkFirst } from './cache-utils.js'. El módulo de utilidad compartida puede mantenerse por separado e importarse por todos los service workers, eliminando la necesidad de importScripts y la contaminación del ámbito global.

Errores comunes

Usar importScripts() dentro de un service worker de módulo ES: los módulos ES soportan import/export estático y no necesitan importScripts(). Mezclar ambos enfoques causa errores en tiempo de ejecución. Use declaraciones import estándar en su lugar.
No manejar el evento activate para la limpieza de caché: las cachés antiguas de versiones anteriores del service worker se acumulan si no se limpian. Añada siempre un handler activate que elimine los almacenes de caché obsoletos comparando los nombres de caché con una lista versionada.
Olvidar definir correctamente el ámbito del service worker: el ámbito de un service worker está determinado por la ruta de su URL. Un service worker en /sw.js controla / y hacia abajo, pero un service worker en /blog/sw.js solo controla /blog/ y hacia abajo. Use la opción scope en register() explícitamente para evitar confusiones.

Verificación

Abra el panel Application en DevTools, vaya a Service Workers y verifique que el service worker esté registrado con estado 'activated and running'. Compruebe que el ámbito cubra el rango de rutas esperado.
Cambie a modo offline en DevTools (pestaña Network) y recargue la página. Verifique que las páginas en caché se carguen sin errores y que la página de respaldo sin conexión aparezca para URLs no almacenadas. Revise la consola en busca de errores del handler fetch.

FAQ

Preguntas sobre Generador de plantillas Service Worker modulo ES

¿Cuál es la ventaja de los service workers de módulo ES sobre los workers clásicos basados en importScripts?

Los service workers de módulo ES soportan import/export nativo, habilitando patrones de módulo JavaScript estándar, análisis estático, tree shaking y mejor gestión de dependencias. Evitan la contaminación del ámbito global de importScripts y proporcionan un manejo de errores adecuado para importaciones faltantes. Sin embargo, los service workers de módulo ES se limitan a importaciones del mismo origen y no soportan import() dinámico ni scripts de módulo de origen cruzado.

¿En qué se diferencia cache-first de stale-while-revalidate en la práctica?

Cache-first devuelve la respuesta almacenada inmediatamente sin esperar la red. Solo obtiene de la red si hay un fallo de caché. Stale-while-revalidate devuelve la respuesta almacenada inmediatamente Y realiza una solicitud de red en segundo plano para actualizar la caché para la próxima vez. Cache-first es ideal para activos inmutables como archivos CSS/JS versionados. Stale-while-revalidate es mejor para páginas HTML o respuestas API que deben estar razonablemente actualizadas pero pueden tolerar cierto retraso en las actualizaciones.

¿Por qué mi service worker no se activa inmediatamente después del registro?

Por defecto, un nuevo service worker entra en estado de espera hasta que todos los clientes existentes se cierren o naveguen a otra página. Esto evita conflictos de versión donde dos service workers controlan diferentes páginas de la misma aplicación. Llamar a self.skipWaiting() durante el evento install o activate omite el estado de espera, y clients.claim() toma inmediatamente el control de todos los clientes no controlados. La plantilla generada incluye estos como un interruptor opcional.

¿Puedo usar import() dinámico dentro de un service worker de módulo ES?

No. Los service workers de módulo ES soportan declaraciones import estáticas pero no soportan llamadas import() dinámicas. Las importaciones dinámicas requieren que el mapa de módulos sea mutable en tiempo de ejecución, lo que entra en conflicto con el modelo de ejecución del service worker. Todas las dependencias de módulos deben declararse estáticamente en el nivel superior del archivo. Si necesita carga de código dinámica, considere dividir la lógica en módulos estáticos separados que cubran diferentes escenarios, o use el patrón de service worker clásico con importScripts.

Herramientas relacionadas