postMessage API

myWorker.postMessage([mixed] aMessage, [array] transferList);

Modern browsers support Structured Clone.

Duplicates your message to send to the worker.

Transfer ArrayBuffers via transferList.

Let's poke around…

index.html

var echoWorker = new Worker('/scripts/echoworker.js');
echoWorker.onmessage = function(message){
    console.log('%cMessage from worker: ', 'color: darkred', message);
};
        

echoworker.js

addEventListener('message', function(e) {
    console.log('%cMessage from parent: ', 'color: blue', e.data);
    postMessage(e.data);
}, false);
        

Transferrable objects

var selectedFile = document.getElementById('input').files[0];
var reader = new FileReader();
reader.onload = function(e){
    window.arrayBuffer = e.target.result;
    console.log('Loaded file, byteLength: ', arrayBuffer.byteLength);
    console.groupEnd();
};
reader.readAsArrayBuffer(selectedFile);

Worker Scope

• WorkerGlobalScope.importScripts()
• WorkerGlobalScope.close()

APIs available

Most of the non-DOM APIs are available.

• XHR 👍
• IndexedDB 👍
• WebSockets 👍
• et al
• LocalStorage 👎

Solving for window

Lots of browser code expects the global to be window

// Map `window` to `self` inside a closure
(function(window){    if(window.indexedDB){
        doStuff();
    }
})(self);

Solving for window

// nuclear option
self.window = self;

Building apps with workers

Opinion: Use fewer, generalist workers.

Limit to CPU cores -1.

navigator.hardwareConcurrency (and polyfills)

Develop a protocol

Workers aren't smart, but you can make smart things.

• Async “do something” API
• Run your model in a worker
• Misc, other!

Readymade implementations

workerproxy gives you some sugar:

var proxyWorker = createWorkerProxy(new Worker('proxyworker.js'));

createWorkerProxy({
    greet: function(name, callback) {
        callback(null, 'Hello, ' + name + '!');
    },
    tokenize: tokenize,
    pluralize: pluralize
}, {autoCallback: true});

Workerify

npm install browserify workerify
browserify -t workerify index.js

var worker = new Worker(window.URL.createObjectURL(
    new Blob(['BROWSERIFIED CONTENTS OF worker.js'])
));

Use with caution

Only useful for dedicated worker.

Inlined files can be difficult to debug.

Can't (easily) uglify the worker code.

Lose out on compiler optimisations.

Can I use Web Workers?

Can I use Service Workers?

Can I use Service Workers?

Further reading

• Shared workers
• Service worker
• Broadcast channel - Mozilla proposal

Some resources

• simworker - Dedicated worker polyfill
• core-estimator - Estimate CPU count
• workerproxy - useful API/framework
• workerify - Browserify transform