网络工作者内联而不是获取另一个页面

Question

I would like to create web workers in line instead of referencing an external script (so that I can deploy a single HTML page instead of an HTML file and a JS file). I found a cool method online using Blobs here , but for some reason I cannot get it to work. I noticed mixed results in the comments section of that article too.

I am getting an error: Failed to load resource: the server responded with a status of 404 (Not Found) which errors on line: localhost:63342/[object%20Worker]:1

I'm guessing that the web worker isn't really the issue, it's in creating the temporary url resource? If so what am I missing still?

Here's my code, in the script tag in the HTML file:

function createWorker(fn) {
    var blob = new Blob(['self.onmessage = ', fn.toString()], { type: 'text/javascript' });
    var url = window.URL.createObjectURL(blob);

    return new Worker(url);
}

var generic = function(e) {
    self.postMessage('in line web worker code');
};

var worker = createWorker(generic);

if (window.Worker) {
    var getEquipmentW = new Worker(worker);

    getEquipmentW.postMessage({
        msg: 'hi'
    });

    getEquipmentW.onmessage = function (e) {
        console.log(e.data);
    };
}

Answer 1

You function createWorker already returns a worker, so you can replace:

var worker = createWorker(generic);
var getEquipmentW = new Worker(worker);

With this:

var getEquipmentW = createWorker(generic);

Answer 2

I'll answer my own question, you can include a Web Worker in a separate script tag. I believe the script type isn't an official one, so the code in this tag is not evaluated until later. It'll look something like this:

<script id="myWorkerCode" type="javascript/worker">

self.onmessage = function(e) {
    const data = e.data
    self.postMessage('received some data in worker thread');
};
</script>

then, in the script where you need the worker, create a Blob and assign the content to be the "javascript" type. make that Blob be a URL that you can feed into the Worker constructor:

if(window.Worker) {
            // select the id of the script that contains your worker code
            const blob = new Blob([
                document.querySelector('#myWebWorker').textContent
            ], {type: "text/javascript"})

            // Note: window.webkitURL.createObjectURL() in Chrome 10+.
            const worker = new Worker(window.URL.createObjectURL(blob));

            worker.onMessage = (e) => {
               console.log('received data in main thread')
            };
        }

It's more of a "in-a-line-above" than "inline", but it allows web workers to be composed and used in the same file. The trick is using script tags and converting unevaluated javascript by assigning the script tags to the given types in the code above. Still not the most elegant solution, but very handy when pushing processes to another thread.