Can I build a WebWorker that executes arbitrary Javascript code?

Question

I'd like to build a layer of abstraction over the WebWorker API that would allow (1) executing an arbitrary function over a webworker, and (2) wrapping the interaction in a Promise. At a high level, this would look something like this:

function bake() {
  ... // expensive calculation
  return 'mmmm, pizza'
}

async function handlePizzaButtonClick() {
  const pizza = await workIt(bake)
  eat(pizza)
}

(Obviously, methods with arguments could be added without much difficulty.)

My first cut at workIt looks like this:

async function workIt<T>(f: () => T): Promise<T> {
  const worker: Worker = new Worker('./unicorn.js') // no such worker, yet
  worker.postMessage(f)
  return new Promise<T>((resolve, reject) => {
    worker.onmessage = ({data}: MessageEvent) => resolve(data)
    worker.onerror   = ({error}: ErrorEvent)  => reject(error)
  })
}

This fails because functions are not structured-cloneable and thus can't be passed in worker messages. (The Promise wrapper part works fine.)

There are various options for serializing Javascript functions, some scarier than others. But before I go that route, am I missing something here? Is there another way to leverage a WebWorker (or anything that executes in a separate thread) to run arbitrary Javascript?

Answer 1

I thought an example would be useful in addition to my comment, so here's a basic (no error handling, etc.), self-contained example which loads the worker from an object URL:

Meta: I'm not posting it in a runnable code snippet view because the rendered iframe runs at a different origin (https://stacksnippets.net at the time I write this answer — see snippet output), which prevents success: in Chrome, I receive the error message Refused to cross-origin redirects of the top-level worker script..

Anyway, you can just copy the text contents, paste it into your dev tools JS console right on this page, and execute it to see that it works. And, of course, it will work in a normal module in a same-origin context.

console.log(new URL(window.location.href).origin);

// Example candidate function:
// - pure
// - uses only syntax which is legal in worker module scope
async function get100LesserRandoms () {
  // If `getRandomAsync` were defined outside the function,
  // then this function would no longer be pure (it would be a closure)
  // and `getRandomAsync` would need to be a function accessible from
  // the scope of the `message` event handler within the worker
  // else a `ReferenceError` would be thrown upon invocation
  const getRandomAsync = () => Promise.resolve(Math.random());

  const result = [];

  while (result.length < 100) {
    const n = await getRandomAsync();
    if (n < 0.5) result.push(n);
  }

  return result;
}

const workerModuleText =
  `self.addEventListener('message', async ({data: {id, fn}}) => self.postMessage({id, value: await eval(\`(\${fn})\`)()}));`;

const workerModuleSpecifier = URL.createObjectURL(
  new Blob([workerModuleText], {type: 'text/javascript'}),
);

const worker = new Worker(workerModuleSpecifier, {type: 'module'});

worker.addEventListener('message', ({data: {id, value}}) => {
  worker.dispatchEvent(new CustomEvent(id, {detail: value}));
});

function notOnMyThread (fn) {
  return new Promise(resolve => {
    const id = window.crypto.randomUUID();
    worker.addEventListener(id, ({detail}) => resolve(detail), {once: true});
    worker.postMessage({id, fn: fn.toString()});
  });
}

async function main () {
  const lesserRandoms = await notOnMyThread(get100LesserRandoms);
  console.log(lesserRandoms);
}

main();