HTML - Web Workers

Overview

Estimated time: 20–30 minutes

Example

// main.js
const worker = new Worker('worker.js');
worker.onmessage = e => console.log('From worker:', e.data);
worker.postMessage({ op: 'sum', data: [1,2,3] });

// worker.js
self.onmessage = e => {
  if (e.data.op === 'sum') {
    const s = e.data.data.reduce((a,b)=>a+b,0);
    self.postMessage(s);
  }
};

Common Pitfalls

  • Access to DOM is not available in workers.
  • Module workers need type: 'module' and proper paths.