What data can I send via postMessage?

Any data that can be cloned with the Structured Clone Algorithm: objects, arrays, typed arrays, Map, Set. NOT functions or DOM elements.

What is the difference between Worker and SharedWorker?

Worker is per-page (each tab gets its own). SharedWorker is shared across tabs from the same origin — useful for shared state or connections.

Browser Web Worker Errors — Script Load, Messaging & SharedWorker Issues

Informationalweb development

Overview

Fix Web Worker errors including script loading failures, messaging errors, SharedWorker connection issues, and Worker termination due to resource limits.

Key Details

Web Workers run JavaScript in background threads separate from the main UI thread
Workers cannot access the DOM — communication is via postMessage/onmessage
SharedWorkers can be shared between tabs/windows from the same origin
Worker scripts must be from the same origin (CORS restrictions apply)
Workers can be terminated by the browser if they consume too many resources

Common Causes

Worker script URL returning 404 or blocked by CORS
Syntax error in Worker script preventing execution
postMessage data not serializable (functions, DOM elements cannot be transferred)
SharedWorker port not properly connected (missing port.start())
Worker consuming too much CPU and being killed by the browser

Steps

1Check Worker script loads: DevTools > Sources > verify the Worker file is loaded
2Listen for errors: worker.onerror = (e) => console.log(e.message, e.filename, e.lineno)
3Ensure data is serializable: only JSON-compatible types can be passed via postMessage
4For SharedWorker: call port.start() on both sides and listen for connect event in Worker
5Use Transferable objects (ArrayBuffer) for large data to avoid copying