Web Workers & Service Workers

Web Workers

Web Workers run JavaScript in a separate background thread. They can't access the DOM but can do heavy computation without blocking the UI.

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

worker.postMessage({ data: bigArray, task: "sort" });

worker.onmessage = (e) => {
  console.log("Sorted:", e.data);
  displayResult(e.data);
};

worker.onerror = (err) => console.error("Worker error:", err);
worker.terminate();  // when done

// worker.js:
self.onmessage = function(e) {
  const { data, task } = e.data;
  let result;
  
  if (task === "sort") {
    result = [...data].sort((a, b) => a - b);
  } else if (task === "filter") {
    result = data.filter(n => n % 2 === 0);
  }
  
  self.postMessage(result);
};

// Use cases: sorting large arrays, image processing, crypto,
// ML inference, complex math calculations

Service Workers

// Register:
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js")
    .then(reg => console.log("SW registered:", reg.scope));
}

// sw.js — cache-first strategy:
const CACHE = "app-v1";
const ASSETS = ["/", "/app.js", "/styles.css", "/offline.html"];

self.addEventListener("install", e => {
  e.waitUntil(caches.open(CACHE).then(c => c.addAll(ASSETS)));
  self.skipWaiting();
});

self.addEventListener("fetch", e => {
  e.respondWith(
    caches.match(e.request)
      .then(cached => cached || fetch(e.request))
      .catch(() => caches.match("/offline.html"))
  );
});

// Service workers enable:
// - Offline capability
// - Background sync
// - Push notifications
// - Pre-caching