HTML-tools

Gratis Service Worker Module Template Generator

Genereer ES-module service worker templates met cache-strategieen, precache-lijst en offline ondersteuning.

Tool laden...

Wat is Service Worker Module Template Generator?

ES-module service workers gebruiken de type: 'module'-optie in de register()-aanroep, waardoor import/export-syntax mogelijk is in plaats van importScripts(). Dit maakt standaard JavaScript-modulepatronen, statische imports en beter afhankelijkheidsbeheer mogelijk. In combinatie met configureerbare cachemethoden (cache-first, network-first, stale-while-revalidate, network-only, cache-only) kan een service worker bepalen hoe netwerkverzoeken worden afgehandeld, kritieke assets bij installatie worden geprecached en offline fallback-pagina's worden bediend.

Snel antwoord

Genereer een ES-module service worker-sjabloon met configureerbare cachemethoden (cache-first, network-first, stale-while-revalidate, network-only, cache-only), precache-URL-lijsten, automatische activering (skipWaiting + clients.claim) en offline fallback-pagina-ondersteuning. Gebruikt ES-module-syntax met statische import/export in plaats van importScripts.

Last updated: 2026-05-31

Beperkingen

ES-module service workers ondersteunen geen dynamische import() —alle module-afhankelijkheden moeten statisch op het hoogste niveau worden gedeclareerd. Dynamische codetoevoeging vereist in plaats daarvan het klassieke importScripts-patroon.
Cross-origin-modulescripts worden niet ondersteund in service workers. Ge茂mporteerde modules moeten same-origin zijn. Als u scripts van een CDN moet laden, gebruik dan het klassieke service worker-patroon of bundel de code lokaal.
De levenscyclus van de service worker (install -> waiting -> activate -> update) kan versieconflicten veroorzaken tijdens ontwikkeling. Browser DevTools-opties 'Update on Reload' en 'Bypass for Network' helpen, maar productieversiebeheer vereist zorgvuldige cachenaamgeving en opschoningslogica.

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

Zo gebruik je deze tool

Selecteer cachemethoden voor verschillende routetypes: cache-first voor statische assets, network-first voor API-aanroepen, stale-while-revalidate voor content die regelmatig wordt bijgewerkt en network-only voor gevoelige eindpunten.
Voer de lijst met URL's in die tijdens het install-event moeten worden geprecached. Deze worden opgehaald en opgeslagen in de cache, zodat ze offline direct werken.
Schakel automatische activering in om skipWaiting en clients.claim in te schakelen, waardoor de nieuwe service worker direct wordt geactiveerd voor alle clients zonder te wachten op de volgende paginalading.
Schakel optioneel de offline fallback-pagina in. Wanneer een fetch mislukt en de resource niet in de cache staat, bedient de service worker de fallback-pagina in plaats van de browser-offlinefout weer te geven.

Waarvoor je het kunt gebruiken

Maak een progressive web app die alle statische assets cached bij installatie, network-first gebruikt voor API-gegevens en een offline fallback-pagina biedt voor niet-gecachte routes.
Bouw een contentsite met stale-while-revalidate-caching voor artikelen: serveer de gecachte versie direct en werk de cache op de achtergrond bij, zodat content actueel blijft zonder te wachten op het netwerk.
Genereer een projectsjabloon met een service worker-skelet dat ontwikkelaars kunnen aanpassen met eigen cachemethoden, precache-lijsten en offline-gedrag.

Gebruik

Praktische voorbeelden

Voorbeeld

Statische site PWA met volledige offline-ondersteuning

Een documentatiesite moet offline werken. Genereer een service worker met cache-first-methode voor CSS, JS en fonts, stale-while-revalidate voor HTML-pagina's, network-first voor zoekopdrachten en een offline fallback-pagina. De precache-lijst bevat alle kritieke pagina's, zodat de hele site werkt zonder netwerktoegang na het eerste bezoek.

Voorbeeld

Module-gebaseerde service worker met gedeelde hulpprogramma's

Een team dat meerdere PWA's beheert, wil cache-hulpfuncties delen tussen service workers. Gebruik het ES-module-sjabloon met statische imports: import { cacheFirst, networkFirst } from './cache-utils.js'. De gedeelde hulpprogrammamodule kan apart worden onderhouden en door alle service workers worden ge茂mporteerd, waardoor importScripts en globale scope-vervuiling overbodig worden.

Veelgemaakte fouten

importScripts() gebruiken in een ES-module service worker —ES-modules ondersteunen statische import/export en hebben importScripts() niet nodig. Het mengen van beide benaderingen veroorzaakt runtimefouten. Gebruik in plaats daarvan standaard import-statements.
Het activate-event niet afhandelen voor cache-opschoning —oude caches van eerdere service workerversies hopen zich op als ze niet worden opgeschoond. Voeg altijd een activate-handler toe die verouderde cache-opslag verwijdert door cachenamen te vergelijken met een versielijst.
Vergeten de service worker correct te scopen —de scope van een service worker wordt bepaald door het URL-pad. Een service worker op /sw.js bestuurt / en lager, maar een service worker op /blog/sw.js bestuurt alleen /blog/ en lager. Gebruik de scope-optie in register() expliciet om verwarring te voorkomen.

Verificatie

Open het Application-panel in DevTools, ga naar Service Workers en controleer of de service worker is geregistreerd met status 'activated and running'. Controleer of de scope het verwachte padbereik dekt.
Schakel over naar offline-modus in DevTools (Network-tabblad) en herlaad de pagina. Controleer of gecachte pagina's zonder fouten laden en de offline fallback-pagina verschijnt voor niet-gecachte URL's. Controleer de Console op fetch-handler-fouten.

FAQ

Vragen over Service Worker Module Template Generator

Wat is het voordeel van ES-module service workers ten opzichte van klassieke importScripts-gebaseerde workers?

ES-module service workers ondersteunen native import/export, wat standaard JavaScript-modulepatronen, statische analyse, tree shaking en beter afhankelijkheidsbeheer mogelijk maakt. Ze voorkomen de globale scope-vervuiling van importScripts en bieden een juiste foutafhandeling voor ontbrekende imports. ES-module service workers zijn echter beperkt tot same-origin-imports en ondersteunen geen dynamische import() of cross-origin-modulescripts.

Hoe verschilt cache-first van stale-while-revalidate in de praktijk?

Cache-first retourneert de gecachte respons direct zonder op het netwerk te wachten. Het haalt alleen van het netwerk op als de cache mist. Stale-while-revalidate retourneert de gecachte respons direct EN doet een netwerkverzoek op de achtergrond om de cache bij te werken voor de volgende keer. Cache-first is ideaal voor onveranderlijke assets zoals versiebeheerde CSS/JS-bestanden. Stale-while-revalidate is beter voor HTML-pagina's of API-reacties die redelijk actueel moeten zijn maar enige vertraging in updates kunnen tolereren.

Waarom wordt mijn service worker niet direct na registratie geactiveerd?

Standaard gaat een nieuwe service worker in wachtstand totdat alle bestaande clients sluiten of wegnavigeren. Dit voorkomt versieconflicten waarbij twee service workers verschillende pagina's van dezelfde app besturen. Het aanroepen van self.skipWaiting() tijdens het install- of activate-event omzeilt de wachtstand en clients.claim() neemt direct de controle over van alle ongecontroleerde clients. Het gegenereerde sjabloon bevat deze als optionele schakelaar.

Kan ik dynamische import() gebruiken in een ES-module service worker?

Nee. ES-module service workers ondersteunen statische import-declaraties maar geen dynamische import()-aanroepen. Dynamische imports vereisen dat de module-map tijdens runtime muteerbaar is, wat conflicteert met het uitvoeringsmodel van de service worker. Alle module-afhankelijkheden moeten statisch op het hoogste niveau van het bestand worden gedeclareerd. Als u dynamische codetoevoeging nodig hebt, overweeg dan logica te splitsen in aparte statische modules die verschillende scenario's bestrijken, of gebruik het klassieke service worker-patroon met importScripts.

Gerelateerde tools