[SalesForce] Using Webworkers in Lightning Component client controller

I'm trying to incorporate JS Webworkers in my Lightning Component, but the Worker's initialization does not seem to find the specified javascript file:

var worker = new Worker('heavycalculations.js');

Although the specific file calculate.js is available as static resource and loaded using ltng:require, this does not mean that I can access the file in the component client controller.

I tried several ways to approach the file, but without luck:

var worker = new Worker('heavycalculations.js');
var worker = new Worker('/resource/heavycalculations/');
var worker = new Worker('/resource/heavycalculations');
var worker = new Worker('/resource/heavycalculations.js);

I tried it in different browsers, but it made no difference.
I'm afraid using Webworkers will be a no-go for now, as it is not supported at all?

Best Answer

Web Workers do currently work in Lightning Components (and apps) but they represent a security attack vector that is possibly not going to be something we can overcome in the initial release of the upcoming Locker Service security model for Lightning Platform. We are discussing this inside of R&D actively but tomorrow is actually feature freeze for Summer'16 and we have not managed to find a solution yet. That does not mean we won't but I cannot guarantee we will before Summer'16 deploys.

With that in mind...

Here is a quick fully working example that uses a worker to multiply 2 numbers:

Static resource named webworker:

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);
}

webWorkerDemo.app

<aura:application>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
</aura:application>

webWorkerDemo.app.controller.js

({
    init : function(component, event, helper) {
        var worker = new Worker("/resource/webworker");
        worker.onmessage = function(e) {
            alert('Message received from worker: ' + e.data);
        };

        worker.postMessage([2, 3]);
    }
})

ltng:require does not factor into web workers - its sole purpose is to load scripts and css into the main page and web workers load their javascript contents directly. A number of your attempted script refs are nonsensical from static resource perspective - e.g heavycalculations.js alone is not a static resource reference at all, and the /resource/*.js also do not make sense since those are not valid developer names. What is the structure of heavycalculations? Is it a single javascript file or a js file in a zip archive?

Related Topic