Performing work on separate threads with Web Workers

Web Workers allow browser operations to take place outside the main thread. Once created, communication between threads is made by passing messages. In this recipe, we'll see how to create a very simple worker, and send it a message from the main thread.

Getting ready

This recipe assumes that you already have a workspace that allows you to create and run ES modules in your browser. If you don't, please see the first two chapters.

How to do it...

1. Open your command-line application and navigate to your workspace.
2.  Create a new folder named 05-01-performing-work-with-web-workers.
3. Copy or create an index.html that loads and runs a main function from main.js.
4. Create a main.js file with a main function that creates a worker from a file named worker.js. Then post a message of type hello-message to the worker:

// main.js 
export function main() {  
  console.log('Hello, from main.'); 
  const worker = new Worker('./worker.js'); 
  worker.postMessage(...