Describe the background task, pick classic or module worker, and get matching main-thread and worker-thread code with a clean, extensible message shape.
Everything is generated locally — nothing you type is sent anywhere.
Main-thread and worker code are generated together and always agree on the same message format.
Toggle module workers on for native import/export syntax, or keep the classic importScripts() style.
Optionally include a zero-copy ArrayBuffer transfer example for large binary payloads.
Fill in the two fields and toggles above, then copy each block into its own file.
Web Workers only communicate through postMessage() and the message event, which accepts any structured-cloneable value. It's tempting to send a bare string or number, but that falls apart the moment a worker needs to report progress, return partial results or signal an error. Wrapping every message as an object with a type and a payload gives both sides of the conversation a stable contract: a switch statement on type can grow to handle new cases without breaking the ones that already work.
Created without options. They load additional scripts with importScripts() and cannot use ES module import statements directly.
Created with { type: 'module' }. They support native import/export syntax, so you can share code with your main bundle more easily.
A minimal envelope: type drives a switch statement, payload carries whatever data that message kind needs.
Binary data like an ArrayBuffer can be transferred instead of copied, moving ownership between threads at near-zero cost.
Questions about workers, message shapes and transferable objects.
A Web Worker runs JavaScript on a background thread, separate from the main thread that renders your page. It is useful for CPU-heavy work like parsing large files, image processing or complex calculations, so the user interface never freezes while that work happens.
A classic worker loads extra files with importScripts() and has no access to ES module import/export syntax. A module worker is created with { type: 'module' } and lets you use native import statements inside the worker file, just like a regular JavaScript module.
postMessage() can send any structured-cloneable value, but sending a plain string or number quickly becomes hard to extend. Wrapping every message as { type, payload } gives both sides a predictable way to branch on a switch statement and add new message kinds later without breaking existing ones.
Transferable objects, such as an ArrayBuffer, can be handed to a worker by reference instead of being copied. Passing one as the second argument to postMessage() moves ownership instantly at near-zero cost, which matters a lot for large binary data like images or audio buffers.
It only generates text. Nothing is executed, uploaded or sent anywhere; the two code blocks are built locally in your browser from the options you choose, ready to paste into your own project.