Skip to content
A list of available functionality and use cases for web workers
Branch: master
Clone or download
Chandrasekar and deebloo very minor update to readme. (#2)
The event argument was missing.
Latest commit 6f1c300 Dec 4, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples remove console log Nov 23, 2018 very minor update to readme. (#2) Dec 5, 2018


tldr; A list of available functionality and use cases for web workers. Have something to add? Submit a PR.

(List just started, Will grow soon) Web Workers give web developers the apility to run code in multiple threads. This is great, now, what can we do with these threads? This document is meant to help provide context and real world use cases for these little wonders.

Sweet Links



The file reader api allows you to read uploaded files. You can now upload a file (say csv). send that to a web worker, read the file and parse it to json without blocking the main UI thread.


"IndexedDB is a way for you to persistently store data inside a user's browser. Because it lets you create web applications with rich query abilities regardless of network availability, your applications can work both online and offline."

Web Notifications

Web Notifications allow you to send pop up style notifications to users even when they do not have your site open.


Lets you make a network request.


The Fetch API is a modern replacement for XMLHttpRequest and is closer to a lot of the libraries we are used to.

Web Sockets

"WebSockets is an advanced technology that makes it possible to open an interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply."



Filter large data sets without blocking the UI thread and without making a full round trip to the server.

// filter-worker.js
self.onmessage = function (e) {
  self.postMessage( () {
    return e.flagged;

// app.js
var filterWorker = new Worker('filter-worker.js');

filterWorker.onmessage = function (e) {
  // Log filtered list

var hugeData = [ ... ];


Proxy for other Js library APIs

You can use web workers to load and run Javascript libraries in separate threads so that none of the downloading or parsing is handled on the main thread

// cool-worker.js

self.onmessage = function (e) {
  switch( {
    case: 'thingIWantToDo':
      myLibraryScope.doTheThing( => {
          status: 'COMPLETED'
          payload: res
      throw new Error(`Action ${} is not handled by cool-worker`);

// app.js
var coolWorker = new Worker('cool-worker.js');

  type: 'thingIWantToDo',
  payload: 1000

function dispatch(action) {
  return new Promise(resolve => {
    const listener = res => {
      if ( === action.type && === 'COMPLETED') {
        coolWorker.removeEventListener('message', listener);
    coolWorker.addEventListener('message', listener);


Yes yes yes polling is gross, but sometimes it can be necessary, offload the grossness to a new thread. NOTE: web workers will hold their state but NOT permanently, so don't keep anything in them that you can't get some other way.

// polling-worker.js
self.onmessage = function (e) {
  let cache;
  const compare = (newData, oldData) => { ... };
  var myRequest = new Request('/my-api-endpoint');
  setInterval(() => {
      .then(res => res.json())
      .then(data => {
        if(!compare(data, cache)) {
          cache = data;
  }, 1000)

// app.js
var pollingWorker = new Worker('polling-worker.js');

pollingWorker.onmessage = () => {
  // render data

You can’t perform that action at this time.