jsnotes

Topic 008: Web workers in JS

Topic 008: Web workers in JS

Web Workers provide a way to run scripts in background threads. They are useful for performing computationally expensive tasks without blocking the main thread, thereby keeping the UI responsive.

Basic Example of a Web Worker

main.js:

// Check if the browser supports web workers
if (window.Worker) {
  // Create a new web worker
  const worker = new Worker("worker.js");

  // Send a message to the worker
  worker.postMessage("Hello, worker!");

  // Listen for messages from the worker
  worker.onmessage = function (event) {
    console.log("Message from worker:", event.data);
  };

  // Handle errors from the worker
  worker.onerror = function (error) {
    console.error("Worker error:", error);
  };
}

worker.js:

// Listen for messages from the main thread
self.onmessage = function (event) {
  console.log("Message from main script:", event.data);
  // Send a message back to the main thread
  self.postMessage("Hello from the worker!");
};

Differences Between Web Worker, Shared Worker, and Service Worker

Web Worker

• Scope: Dedicated to a single script context (e.g., a single web page or document).
• Communication: Communicates with the main script using postMessage and onmessage.
• Use Case: Suitable for background tasks that don’t need to be shared between different scripts or pages.

Shared Worker

• Scope: Can be accessed by multiple scripts, even if they are in different windows or iframes.
• Communication: Uses port objects for message passing, allowing communication between different contexts.
• Use Case: Ideal for scenarios where multiple scripts need to interact with the same background task, such as a chat application where multiple tabs need to update the same chat log.

Service Worker

• Scope: Runs in the background, independent of web pages, and can handle network requests, including offline scenarios.
• Communication: Uses postMessage and onmessage, similar to web workers, but can also intercept and handle network requests via the fetch event.
• Use Case: Perfect for building Progressive Web Apps (PWAs) that need offline support, caching, and background data synchronization.

Example of a Shared Worker:

main1.js:

const sharedWorker = new SharedWorker("sharedWorker.js");

sharedWorker.port.start();

sharedWorker.port.postMessage("Hello from page 1");

sharedWorker.port.onmessage = function (event) {
  console.log("Message from shared worker:", event.data);
};

main2.js:

const sharedWorker = new SharedWorker("sharedWorker.js");

sharedWorker.port.start();

sharedWorker.port.postMessage("Hello from page 2");

sharedWorker.port.onmessage = function (event) {
  console.log("Message from shared worker:", event.data);
};

sharedWorker.js:

self.onconnect = function (event) {
  const port = event.ports[0];

  port.onmessage = function (event) {
    console.log("Message from page:", event.data);
    port.postMessage("Hello from the shared worker!");
  };
};

Example of a Service Worker:

main.js:

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("serviceWorker.js").then(
    function (registration) {
      console.log("ServiceWorker registration successful with scope: ", registration.scope);
    },
    function (error) {
      console.log("ServiceWorker registration failed: ", error);
    }
  );
}

serviceWorker.js:

self.addEventListener("install", function (event) {
  console.log("Service worker installing...");
  // Cache files if needed
});

self.addEventListener("activate", function (event) {
  console.log("Service worker activating...");
});

self.addEventListener("fetch", function (event) {
  console.log("Fetching:", event.request.url);
  event.respondWith(
    fetch(event.request).catch(function () {
      return new Response("Fallback content if offline");
    })
  );
});

Summary

• Web Worker: Ideal for performing background computations, dedicated to a single page.
• Shared Worker: Useful for sharing data or tasks between multiple scripts and windows.
• Service Worker: Best suited for managing network requests, offline capabilities, and background synchronization.

Each type of worker serves a different purpose and is suited for different use cases within web development.