Skip to content

Commit 383e0a1

Browse files
committed
fix: correct inaccuracies and update outdated info in web-workers concept page
- Fix Error objects cloning claim (moved from 'Cannot Clone' to 'Can Clone') - Update Safari Shared Workers support (now supported in Safari 16+) - Change 'neutered' to 'detached' terminology for ArrayBuffer - Expand transferable objects table (add AudioData, VideoFrame, RTCDataChannel) - Add structuredClone() mention with code example - Clarify requestAnimationFrame is dedicated workers only - Simplify inline worker URL revocation explanation
1 parent b76e257 commit 383e0a1

1 file changed

Lines changed: 45 additions & 13 deletions

File tree

β€Ždocs/concepts/web-workers.mdxβ€Ž

Lines changed: 45 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,26 @@ Communication between workers and the main thread happens through [`postMessage(
345345

346346
### The Structured Clone Algorithm
347347

348-
When you send data via `postMessage`, it's **copied** using the [structured clone algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm). This is deeper than `JSON.stringify`: it handles more types and preserves object references within the data.
348+
When you send data via `postMessage`, it's **copied** using the [structured clone algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm). This is deeper than `JSON.stringify`: it handles more types, preserves object references within the data, and even supports circular references.
349+
350+
<Tip>
351+
You can use the global [`structuredClone()`](https://developer.mozilla.org/en-US/docs/Web/API/structuredClone) function to deep-clone objects using the same algorithm. This is useful for copying complex data outside of worker communication:
352+
353+
```javascript
354+
const original = {
355+
name: 'Alice',
356+
date: new Date(),
357+
nested: { deep: true }
358+
}
359+
360+
// Deep clone with structuredClone (handles Date, Map, Set, etc.)
361+
const clone = structuredClone(original)
362+
363+
clone.name = 'Bob'
364+
console.log(original.name) // 'Alice' (unchanged)
365+
console.log(clone.date instanceof Date) // true (Date preserved!)
366+
```
367+
</Tip>
349368

350369
```javascript
351370
// main.js
@@ -369,12 +388,17 @@ worker.postMessage(data)
369388
|-----------|--------------|
370389
| Primitives (string, number, boolean, null, undefined) | Functions |
371390
| Plain objects and arrays | DOM nodes |
372-
| Date objects | Error objects (partially) |
373-
| RegExp objects | Symbols |
374-
| Blob, File, FileList | WeakMap, WeakSet |
375-
| ArrayBuffer, TypedArrays | Objects with prototype chains |
376-
| Map, Set | Getters/setters |
377-
| ImageBitmap, ImageData | Proxies |
391+
| Date objects | Symbols |
392+
| RegExp objects | WeakMap, WeakSet |
393+
| Blob, File, FileList | Objects with prototype chains |
394+
| ArrayBuffer, TypedArrays | Getters/setters |
395+
| Map, Set | Proxies |
396+
| Error objects (standard types) | |
397+
| ImageBitmap, ImageData | |
398+
399+
<Note>
400+
**Error cloning:** Only standard error types can be cloned (`Error`, `EvalError`, `RangeError`, `ReferenceError`, `SyntaxError`, `TypeError`, `URIError`). The `name` and `message` properties are preserved, and browsers may also preserve `stack` and `cause`.
401+
</Note>
378402

379403
```javascript
380404
// βœ“ These work
@@ -490,7 +514,7 @@ console.time('transfer')
490514
worker.postMessage(hugeBuffer, [hugeBuffer])
491515
console.timeEnd('transfer') // Nearly instant!
492516

493-
// WARNING: hugeBuffer is now "neutered" (empty)
517+
// WARNING: hugeBuffer is now "detached" (unusable)
494518
console.log(hugeBuffer.byteLength) // 0
495519
console.log(array.length) // 0
496520
```
@@ -520,6 +544,13 @@ self.onmessage = (event) => {
520544
| [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) | Streaming data |
521545
| [`WritableStream`](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream) | Streaming data |
522546
| [`TransformStream`](https://developer.mozilla.org/en-US/docs/Web/API/TransformStream) | Streaming transforms |
547+
| [`AudioData`](https://developer.mozilla.org/en-US/docs/Web/API/AudioData) | Audio processing (WebCodecs) |
548+
| [`VideoFrame`](https://developer.mozilla.org/en-US/docs/Web/API/VideoFrame) | Video processing (WebCodecs) |
549+
| [`RTCDataChannel`](https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel) | WebRTC data channels |
550+
551+
<Note>
552+
This table shows the most commonly used transferable objects. For a complete list including newer APIs like `MediaStreamTrack` and `WebTransportSendStream`, see MDN's [Transferable objects](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Transferable_objects) documentation.
553+
</Note>
523554

524555
```
525556
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
@@ -626,7 +657,7 @@ Use shared workers for:
626657
- Reducing resource usage for identical workers
627658

628659
<Warning>
629-
Shared Workers have limited browser support. Check [caniuse.com](https://caniuse.com/sharedworkers) before using. They're not supported in Safari at all.
660+
Shared Workers have limited browser support. They work in Chrome, Firefox, Edge, and Safari 16+, but are **not supported on Android browsers** (Chrome for Android, Samsung Internet). Check [caniuse.com](https://caniuse.com/sharedworkers) before using in production.
630661
</Warning>
631662

632663
### Service Workers (Brief Overview)
@@ -718,7 +749,8 @@ function animate() {
718749
100
719750
)
720751

721-
// Request next frame (in worker context)
752+
// Request next frame
753+
// Note: requestAnimationFrame is available in dedicated workers only
722754
requestAnimationFrame(animate)
723755
}
724756
```
@@ -1304,9 +1336,9 @@ function createWorkerFromString(code) {
13041336
const url = URL.createObjectURL(blob)
13051337
const worker = new Worker(url)
13061338

1307-
// Clean up the URL when done
1308-
worker.addEventListener('message', () => {}, { once: true })
1309-
URL.revokeObjectURL(url) // Revoke after worker starts
1339+
// The URL can be revoked immediately after the worker is created.
1340+
// The browser keeps the blob data until the worker finishes loading.
1341+
URL.revokeObjectURL(url)
13101342

13111343
return worker
13121344
}

0 commit comments

Comments
Β (0)