You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/concepts/web-workers.mdx
+45-13Lines changed: 45 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -345,7 +345,26 @@ Communication between workers and the main thread happens through [`postMessage(
345
345
346
346
### The Structured Clone Algorithm
347
347
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
+
constoriginal= {
355
+
name:'Alice',
356
+
date:newDate(),
357
+
nested: { deep:true }
358
+
}
359
+
360
+
// Deep clone with structuredClone (handles Date, Map, Set, etc.)
| 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>
378
402
379
403
```javascript
380
404
// β These work
@@ -490,7 +514,7 @@ console.time('transfer')
490
514
worker.postMessage(hugeBuffer, [hugeBuffer])
491
515
console.timeEnd('transfer') // Nearly instant!
492
516
493
-
// WARNING: hugeBuffer is now "neutered" (empty)
517
+
// WARNING: hugeBuffer is now "detached" (unusable)
|[`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.
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 usingin production.
630
661
</Warning>
631
662
632
663
### Service Workers (Brief Overview)
@@ -718,7 +749,8 @@ function animate() {
718
749
100
719
750
)
720
751
721
-
// Request next frame (in worker context)
752
+
// Request next frame
753
+
// Note: requestAnimationFrame is available in dedicated workers only
722
754
requestAnimationFrame(animate)
723
755
}
724
756
```
@@ -1304,9 +1336,9 @@ function createWorkerFromString(code) {
0 commit comments