JavaScript Workers — Web Workers, Service Workers, and Parallel Execution

// main.js
const worker = new Worker("scan-worker.js");

// Send data to worker
worker.postMessage({
  type: "process",
  data: largeArray
});

// Receive results
worker.onmessage = (event) => {
  console.log("Result:", event.data);
};

// Handle errors
worker.onerror = (error) => {
  console.error("Worker error:", error.message);
};

// Terminate when done
worker.terminate();

// scan-worker.js
self.onmessage = (event) => {
  const { type, data } = event.data;

  switch (type) {
    case "process":
      const result = data.map(item => heavyComputation(item));
      self.postMessage(result);
      break;
    case "cancel":
      self.close(); // Terminate this worker
      break;
  }
};

function heavyComputation(item) {
  // CPU-intensive work
  let result = 0;
  for (let i = 0; i < 1000000; i++) {
    result += Math.sqrt(item * i);
  }
  return result;
}

class WorkerPool {
  constructor(workerScript, size = navigator.hardwareConcurrency) {
    this.workers = [];
    this.taskQueue = [];
    this.availableWorkers = [];
    this.callbacks = new Map();
    this.idCounter = 0;

    for (let i = 0; i < size; i++) {
      const worker = new Worker(workerScript);
      worker.onmessage = (event) => this.#handleResult(event);
      worker.idle = true;
      this.workers.push(worker);
      this.availableWorkers.push(worker);
    }
  }

  #handleResult(event) {
    const { taskId, result } = event.data;
    const callback = this.callbacks.get(taskId);
    if (callback) {
      callback(result);
      this.callbacks.delete(taskId);
    }

    // Worker is now idle
    const worker = this.workers.find(
      w => w.idle === false && w.taskId === taskId
    );
    if (worker) {
      worker.idle = true;
      this.availableWorkers.push(worker);
    }

    // Process next task
    this.#processNext();
  }

  #processNext() {
    if (this.taskQueue.length === 0 || this.availableWorkers.length === 0) return;

    const worker = this.availableWorkers.pop();
    const task = this.taskQueue.shift();
    worker.idle = false;
    worker.taskId = task.id;
    worker.postMessage({ taskId: task.id, data: task.data });
  }

  runTask(data) {
    return new Promise((resolve) => {
      const id = ++this.idCounter;
      this.callbacks.set(id, resolve);
      this.taskQueue.push({ id, data });
      this.#processNext();
    });
  }

  terminate() {
    this.workers.forEach(w => w.terminate());
    this.workers = [];
    this.availableWorkers = [];
  }
}

// main.js
if ("serviceWorker" in navigator) {
  window.addEventListener("load", async () => {
    try {
      const registration = await navigator.serviceWorker.register(
        "/service-worker.js",
        { scope: "/" }
      );
      console.log("SW registered:", registration.scope);

      // Check for updates
      registration.onupdatefound = () => {
        const newWorker = registration.installing;
        newWorker.onstatechange = () => {
          if (newWorker.state === "installed") {
            if (navigator.serviceWorker.controller) {
              console.log("Update available!");
              // Notify user to refresh
            }
          }
        };
      };
    } catch (err) {
      console.error("SW registration failed:", err);
    }
  });
}

// service-worker.js
const CACHE_NAME = "v1";
const STATIC_ASSETS = [
  "/",
  "/index.html",
  "/app.js",
  "/styles.css",
  "/logo.png"
];

// Install: cache static assets
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(STATIC_ASSETS);
    })
  );
  // Activate immediately without waiting
  self.skipWaiting();
});

// Activate: clean old caches
self.addEventListener("activate", (event) => {
  event.waitUntil(
    caches.keys().then((keys) => {
      return Promise.all(
        keys
          .filter((key) => key !== CACHE_NAME)
          .map((key) => caches.delete(key))
      );
    })
  );
  clients.claim(); // Take control immediately
});

// Fetch strategies
self.addEventListener("fetch", (event) => {
  const { request } = event;
  const url = new URL(request.url);

  // Strategy 1: Cache First (for static assets)
  if (STATIC_ASSETS.includes(url.pathname)) {
    event.respondWith(cacheFirst(request));
    return;
  }

  // Strategy 2: Network First (for API calls)
  if (url.pathname.startsWith("/api/")) {
    event.respondWith(networkFirst(request));
    return;
  }

  // Strategy 3: Stale While Revalidate (default)
  event.respondWith(staleWhileRevalidate(request));
});

async function cacheFirst(request) {
  const cached = await caches.match(request);
  return cached || fetch(request);
}

async function networkFirst(request) {
  try {
    const response = await fetch(request);
    const cache = await caches.open(CACHE_NAME);
    cache.put(request, response.clone());
    return response;
  } catch (err) {
    const cached = await caches.match(request);
    if (cached) return cached;
    // Return offline page
    return caches.match("/offline.html");
  }
}

async function staleWhileRevalidate(request) {
  const cache = await caches.open(CACHE_NAME);
  const cached = await cache.match(request);
  const fetchPromise = fetch(request).then((response) => {
    cache.put(request, response.clone());
    return response;
  });
  return cached || fetchPromise;
}

// service-worker.js
self.addEventListener("push", (event) => {
  const data = event.data.json();
  const options = {
    body: data.body,
    icon: "/icon.png",
    badge: "/badge.png",
    data: { url: data.url }
  };

  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

self.addEventListener("notificationclick", (event) => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.notification.data.url)
  );
});

// main.js
const largeBuffer = new ArrayBuffer(1000000);

// Without transfer: 1MB is copied to worker
worker.postMessage({ data: largeBuffer });

// With transfer: 1MB is moved (main thread loses access)
worker.postMessage({ data: largeBuffer }, [largeBuffer]);
// largeBuffer.byteLength === 0 now

// Transferable types:
// - ArrayBuffer
// - MessagePort
// - ReadableStream
// - WritableStream
// - TransformStream
// - OffscreenCanvas
// - ImageBitmap

// 1. Terminate unused workers
const worker = new Worker("worker.js");
// ... use it ...
worker.terminate();

// 2. Error handling
worker.onerror = (event) => {
  console.error("Uncaught error in worker:", event.message);
  // Offer fallback on main thread
};

// 3. Keep messages serializable (no functions, DOM nodes)
worker.postMessage({ numbers: [1, 2, 3] }); // OK
// worker.postMessage(() => {}); // Error!

// 4. Use importScripts in workers
// worker.js:
// importScripts("math-utils.js", "data-processor.js");

// 5. Module workers (newer):
// const worker = new Worker("worker.js", { type: "module" });