So, you want to create a web worker from a function, the problem is all the examples examples show creating a web worker using a separate JavaScript file or from embedded JavaScript source. There is a way to do it and that is using Blob URLs. In the example below, I have taken the simple dedicated worker example from mdn and modified it appropriately.
First, we assume that we have a function that we want to serve as the source of the web worker.
var workerScript = function () {
console.log("starting worker");
this.onmessage = function(e) {
console.log('Message received from main script');
var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
console.log('Posting message back to main script');
postMessage(workerResult);
}
}
Next, we use that function’s source to create the web worker.
// Get the source of the function we want to use and make the source
// where it will be interpreted as an iife.
var workerScriptIifeSource = workerScript.toSource() + "()";
// Create a blob of the script source, specify it as JavaScript.
var workerScriptBlob = new Blob([workerScriptIifeSource],
{type: 'application/javascript'});
// Create a worker by creating a url from the blob.
var myWorker = new Worker(window.URL.createObjectURL(workerScriptBlob));
See this example in action on jsfiddle here: http://jsfiddle.net/chaddotson/jr5p3L7r/
Notes:
- The createObjectURL function is experimental according to MDN, so that is a bit of a warning bell. However, according to caniuse, it is mostly safe across all browsers.
- This can be used to create shared web workers, but they will not be shareable between tabs or windows.
- This makes it more difficult, but possible to assemble dependencies for the web worker.
- This isn’t the officially supported way to create a web worker.
- I think this approach to creating a worker should be used sparingly, if ever.