Web Workers API
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down.
Web Workers concepts and usage
A worker is an object created using a constructor (e.g. Worker()
) that runs a named JavaScript file — this file contains the code that will run in the worker thread.
In addition to the standard JavaScript set of functions (such as String
, Array
, Object
, JSON
, etc.), you can run almost any code you like inside a worker thread. There are some exceptions: for example, you can't directly manipulate the DOM from inside a worker, or use some default methods and properties of the Window
object. For information about the code that you can run see worker global context and functions, and supported web APIs below.
Data is sent between workers and the main thread via a system of messages — both sides send their messages using the postMessage()
method, and respond to messages via the onmessage
event handler (the message is contained within the message
event's data
property). The data is copied rather than shared.
Workers may in turn spawn new workers, as long as those workers are hosted within the same origin as the parent page.
In addition, workers can make network requests using the fetch()
or XMLHttpRequest
APIs (although note that the responseXML
attribute of XMLHttpRequest
will always be null
).
Worker types
There are a number of different types of workers:
- Dedicated workers are workers that are utilized by a single script. This context is represented by a
DedicatedWorkerGlobalScope
object. - Shared workers are workers that can be utilized by multiple scripts running in different windows, IFrames, etc., as long as they are in the same domain as the worker. They are a little more complex than dedicated workers — scripts must communicate via an active port.
- Service Workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to push notifications and background sync APIs.
Note: As per the Web workers Spec, worker error events should not bubble (see Firefox bug 1188141). This has been implemented in Firefox 42.
Worker global contexts and functions
Workers run in a different global context than the current window
! While Window
is not directly available to workers, many of the same methods are defined in a shared mixin (WindowOrWorkerGlobalScope
), and made available to workers through their own WorkerGlobalScope
-derived contexts:
DedicatedWorkerGlobalScope
for dedicated workersSharedWorkerGlobalScope
for shared workersServiceWorkerGlobalScope
for service workers
Some of the functions (a subset) that are common to all workers and to the main thread (from WindowOrWorkerGlobalScope
) are:
WorkerGlobalScope.atob()
WorkerGlobalScope.btoa()
WorkerGlobalScope.clearInterval()
WorkerGlobalScope.clearTimeout()
WorkerGlobalScope.createImageBitmap()
WorkerGlobalScope.dump()
Non-standardWorkerGlobalScope.fetch()
WorkerGlobalScope.queueMicrotask()
WorkerGlobalScope.reportError()
WorkerGlobalScope.setInterval()
WorkerGlobalScope.setTimeout()
WorkerGlobalScope.structuredClone()
DedicatedWorkerGlobalScope.requestAnimationFrame()
(dedicated workers only)DedicatedWorkerGlobalScope.cancelAnimationFrame()
(dedicated workers only)
The following functions are only available to workers:
WorkerGlobalScope.importScripts()
(all workers)DedicatedWorkerGlobalScope.postMessage()
(dedicated workers only)
Supported Web APIs
Note: If a listed API is supported by a platform in a particular version, then it can generally be assumed to be available in web workers. You can also test support for a particular object/function using the site: https://worker-playground.glitch.me/
The following Web APIs are available to workers:
- Background Fetch API
- Background Synchronization API
- Barcode Detection API
- Broadcast Channel API
- Canvas API
- Channel Messaging API
- Console API
- Compression Streams API
- CSS Font Loading API
CustomEvent
- Encoding API (e.g.
TextEncoder
,TextDecoder
) - Fetch API
- File API
- File System API
- Idle Detection API
- IndexedDB API
- Media Capabilities API
- Media Source Extensions API (dedicated workers only)
- Network Information API
- Notifications API
- Payment Handler API
- Performance API
- Permissions API
- Prioritized Task Scheduling API
- Push API
- Server-Sent Events
- Service Worker API
- Streams API
- Trusted Types API
- URL API (e.g.
URL
) - URL Pattern API
- User-Agent Client Hints API
- WebCodecs API
- Web Crypto API (e.g.
Crypto
) - Web Locks API
- Web Serial API
- Web Periodic Background Synchronization API
- WebGPU API
- WebUSB API
- WebSockets API
- XMLHttpRequest API
Workers can also spawn other workers, so these APIs are also available:
Web Worker interfaces
Worker
-
Represents a running worker thread, allowing you to pass messages to the running worker code.
WorkerLocation
-
Defines the absolute location of the script executed by the
Worker
. -
Represents a specific kind of worker that can be accessed from several browsing contexts (i.e. windows, tabs, or iframes) or even other workers.
WorkerGlobalScope
-
Represents the generic scope of any worker (doing the same job as
Window
does for normal web content). Different types of worker have scope objects that inherit from this interface and add more specific features. DedicatedWorkerGlobalScope
-
Represents the scope of a dedicated worker, inheriting from
WorkerGlobalScope
and adding some dedicated features. -
Represents the scope of a shared worker, inheriting from
WorkerGlobalScope
and adding some dedicated features. -
Represents the identity and state of the user agent (the client).
Examples
We have created a couple of demos to show web worker usage:
- Basic dedicated worker example (run dedicated worker).
- Basic shared worker example (run shared worker).
- OffscreenCanvas worker example (run OffscreenCanvas worker).
You can find out more information on how these demos work in Using Web Workers.
Specifications
Specification |
---|
HTML Standard # workers |
See also
- Using Web Workers
Worker
interfaceSharedWorker
interface- Service Worker API