HTML-Tools

Kostenlose Service Worker Modul-Template Generator

Generieren Sie ES-Modul-Service-Worker-Templates mit Cache-Strategien, Precache-Liste und Offline-Unterstutzung.

Tool wird geladen...

Was ist Service Worker Modul-Template Generator?

ES module service workers use the ype: 'module' option in the register() call, allowing import/export syntax instead of importScripts(). This enables standard JavaScript module patterns, static imports, and better dependency management. Combined with configurable cache strategies (cache-first, network-first, stale-while-revalidate, network-only, cache-only), a service worker can control how network requests are handled, precache critical assets on install, and serve offline fallback pages.

Kurze Antwort

Generate an ES module service worker template with configurable cache strategies (cache-first, network-first, stale-while-revalidate, network-only, cache-only), precache URL lists, auto-activation (skipWaiting + clients.claim), and offline fallback page support. Uses ES module syntax with static import/export instead of importScripts.

Einschränkungen

ES module service workers do not support dynamic import() — all module dependencies must be declared statically at the top level. Dynamic code loading requires the classic importScripts pattern instead.
Cross-origin module scripts are not supported in service workers. Imported modules must be same-origin. If you need to load scripts from a CDN, use the classic service worker pattern or bundle the code locally.
The service worker lifecycle (install -> waiting -> activate -> update) can cause version conflicts during development. Browser DevTools 'Update on Reload' and 'Bypass for Network' options help, but production versioning requires careful cache naming and cleanup logic.

So nutzt du dieses Tool

Select cache strategies for different route types: cache-first for static assets, network-first for API calls, stale-while-revalidate for content that updates frequently, and network-only for sensitive endpoints.
Enter the list of URLs to precache during the install event. These are fetched and stored in the cache so they work offline immediately.
Toggle auto-activation to enable skipWaiting and clients.claim, which activates the new service worker immediately for all clients without waiting for the next page load.
Optionally enable the offline fallback page. When a fetch fails and the resource is not in cache, the service worker serves the fallback page instead of showing the browser's offline error.

Wofür du es nutzen kannst

Create a progressive web app that caches all static assets on install, uses network-first for API data, and provides an offline fallback page for uncached routes.
Build a content site with stale-while-revalidate caching for articles: serve the cached version instantly and update the cache in the background, keeping content fresh without waiting for network.
Generate a project template with a service worker skeleton that developers can customize with their own cache strategies, precache lists, and offline behavior.

Anwendungsfalle

Praxisbeispiele

Beispiel

Static site PWA with full offline support

A documentation site wants to work offline. Generate a service worker with cache-first strategy for CSS, JS, and fonts, stale-while-revalidate for HTML pages, network-first for search queries, and an offline fallback page. The precache list includes all critical pages so the entire site works without network access after the first visit.

Beispiel

Module-based service worker with shared utilities

A team managing multiple PWAs wants to share cache utility functions between service workers. Use the ES module template with static imports: import { cacheFirst, networkFirst } from './cache-utils.js'. The shared utility module can be maintained separately and imported by all service workers, eliminating the need for importScripts and global scope pollution.

Haufige Fehler

Using importScripts() inside an ES module service worker — ES modules support static import/export and do not need importScripts(). Mixing both approaches causes runtime errors. Use standard import statements instead.
Not handling the activate event for cache cleanup — old caches from previous service worker versions accumulate if not cleaned up. Always add an activate handler that deletes outdated cache stores by comparing cache names against a versioned list.
Forgetting to scope the service worker correctly — a service worker's scope is determined by its URL path. A service worker at /sw.js controls / and below, but a service worker at /blog/sw.js only controls /blog/ and below. Use the scope option in register() explicitly to avoid confusion.

Überprüfung

Open the Application panel in DevTools, go to Service Workers, and verify the service worker is registered with status 'activated and running'. Check that the scope covers the expected path range.
Toggle to offline mode in DevTools (Network tab) and reload the page. Verify that cached pages load without errors and the offline fallback page appears for uncached URLs. Check the Console for any fetch handler errors.

FAQ

Fragen zu Service Worker Modul-Template Generator

What is the advantage of ES module service workers over classic importScripts-based workers?

ES module service workers support native import/export, enabling standard JavaScript module patterns, static analysis, tree shaking, and better dependency management. They avoid the global scope pollution of importScripts and provide proper error handling for missing imports. However, ES module service workers are limited to same-origin imports only and do not support dynamic import() or cross-origin module scripts.

How does cache-first differ from stale-while-revalidate in practice?

Cache-first returns the cached response immediately without waiting for the network. It only fetches from the network if the cache misses. Stale-while-revalidate returns the cached response immediately AND makes a network request in the background to update the cache for next time. Cache-first is ideal for immutable assets like versioned CSS/JS files. Stale-while-revalidate is better for HTML pages or API responses that should be reasonably current but can tolerate some delay in updates.

Why does my service worker not activate immediately after registration?

By default, a new service worker enters a waiting state until all existing clients close or navigate away. This prevents version conflicts where two service workers control different pages of the same app. Calling self.skipWaiting() during the install or activate event bypasses the waiting state, and clients.claim() immediately takes control of all uncontrolled clients. The generated template includes these as an optional toggle.

Can I use dynamic import() inside an ES module service worker?

No. ES module service workers support static import declarations but do not support dynamic import() calls. Dynamic imports require the module map to be mutable at runtime, which conflicts with the service worker's execution model. All module dependencies must be declared statically at the top level of the file. If you need dynamic code loading, consider splitting logic into separate static modules that cover different scenarios, or use the classic service worker pattern with importScripts.

Verwandte Tools