ServiceWorker

ServiceWorker API for request handling.

Lifecycle

parsing → installing → installed → activating → activated

Events

fetch

Fires for incoming requests.

self.addEventListener("fetch", (event) => {
  event.respondWith(new Response("Hello"));
});

install

Fires once during worker registration.

self.addEventListener("install", (event) => {
  event.waitUntil(initializeApp());
});

activate

Fires after successful installation.

self.addEventListener("activate", (event) => {
  event.waitUntil(runMigrations());
});

FetchEvent

respondWith(response: Response | Promise<Response>): void

Sets the response.

event.respondWith(new Response("OK"));
event.respondWith(fetchFromAPI(request));

waitUntil(promise: Promise<any>): void

Extends event lifetime for background work.

event.respondWith(new Response("OK"));
event.waitUntil(logRequest(request)); // Doesn't block response

ExtendableEvent

Base interface for lifecycle events.

waitUntil(promise: Promise<any>): void

Delays event completion until promise resolves.

self.addEventListener("install", (event) => {
  event.waitUntil(cacheAssets());
  event.waitUntil(validateConfig()); // Multiple calls OK
});

Globals

fetch() During Lifecycle

Relative URLs route through your own fetch handler:

self.addEventListener("install", (event) => {
  event.waitUntil(
    (async () => {
      const response = await fetch("/404.html");
      const html = await response.text();
      // Write to static output
    })()
  );
});

Differences from Browser

Supported

• Fetch event handling
• Install/activate lifecycle
• Cache API, CookieStore, Crypto

Server-Only

• databases - SQL databases
• directories - File system
• loggers - Structured logging

See Also

• Router - Route definition
• Middleware - Request processing