DEV Community

Cover image for Web Workers API
Ernesto Herrera Salinas
Ernesto Herrera Salinas

Posted on

Web Workers API

The Web Workers API, as detailed on Mozilla Developer Network (MDN), offers a way for web content to execute scripts in background threads, separate from the main execution thread of a web application. This separation allows for more intensive processing without blocking or slowing down the user interface thread.

Types of Web Workers:

  1. Dedicated Workers: These are utilized by a single script and operate within a DedicatedWorkerGlobalScope.
  2. Shared Workers: These can be used by multiple scripts, even if they run in different windows, IFrames, or workers, as long as they are in the same domain. They operate within a SharedWorkerGlobalScope.
  3. Service Workers: These act like proxy servers between web applications, the browser, and the network. They are designed to enable offline experiences, intercept network requests, update server assets, and provide access to push notifications and background sync APIs.

Key Features and Functions:

  • Communication with Workers: Data is exchanged between workers and the main thread through a system of messages using the postMessage() method and the onmessage event handler. The data is copied, not shared, between them.
  • Error Handling: Workers have an onerror event handler for runtime errors, providing details like the error message, filename, and line number where the error occurred.
  • Subworkers: Workers can spawn new workers (sub-workers), as long as these sub-workers are hosted within the same origin as the parent page.
  • Script Importing: Workers use importScripts() to import scripts, which are executed synchronously and in the order they are passed.

Global Contexts and Functions:

  • Workers run in a different global context than the window and have access to functions like atob(), btoa(), fetch(), and setInterval() through their own WorkerGlobalScope-derived contexts.
  • However, workers cannot directly manipulate the DOM or use some default methods and properties of the Window object.

Supported Web APIs in Workers:
Workers have access to various Web APIs, including but not limited to the Canvas API, Fetch API, File API, IndexedDB API, and WebSockets API. It's important to check browser compatibility for specific worker types and functions.

Constructing and Using Workers:

  • To create a dedicated worker, the Worker("path/to/worker/script") constructor is used. For a shared worker, SharedWorker("scriptURL") is employed.
  • These workers handle messages and errors through event handlers and methods like postMessage() and terminate(). The shared worker also involves a port object for communication.

Shared Worker Specifics:
Shared workers differ from dedicated workers in their ability to be accessed from several browsing contexts. They require the use of a MessagePort object for communication, and the worker's lifetime is tied to its global scope's owner set.

Thread Safety and Security:

  • Web workers spawn real OS-level threads but are designed to avoid typical concurrency issues as they have controlled communication points and no access to non-threadsafe components or the DOM.
  • Workers have their own execution context and are generally not governed by the content security policy of the document that created them.

The Web Workers API is a powerful tool for web developers, enabling more efficient and responsive web applications by offloading tasks to background threads. For more detailed information and examples, you can refer directly to the MDN Web Docs on Using Web Workers, Web Workers API, Worker, and SharedWorker.

Top comments (0)