HTML 5 Web Workers In Action

Introduction

HTML5 introduced the web worker concept a long time ago. In this article, we will see the use of web worker in real scenarios.

In a nutshell, web worker is a JavaScript code that runs in the background (without refreshing the page) and without adding any performance overhead on the page. So that means, you can continue using your site by clicking here and there while web worker is doing its assigned functionality in the background.

Web worker runs independently of other scripts, so plumbing of code is relatively easy. It does support most of the common browsers today; i.e.,  Google Chrome, Internet Explorer (10 onwards), Firefox, etc.

Is Web Worker Supported for my development work?

Before we really go into developing the web worker, let us do a small check to see if it is supported in our development scenarios.

The below simple code should help you.

if (typeof(Worker) !== "undefined") {
    alert(“Yes, Web worker is supported”);
} else {
    alert(“No, Web worker is not supported”);
}

After running the above script, if the answer is "Yes" … We are good to go ahead with web worker.

Basic syntaxes to get started

Create Web Worker Object,

var worker = new Worker(“worker.js”);

 

Send messages using web worker

To send the message from web worker, we need to add “onmessage” event listener to our worker role.

w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
};

Terminate Web Worker

Once we are finished with the role of web worker, we should release the browser resources

w.terminate();

 

Reuse Web Worker

We can reuse the same web worker to carry out different dynamic functionalities.

w = undefined;

 

Once we set our web worker variable to undefined, we can reuse it for different purpose.

Web Worker Implementation Scenarios

I have seen others developing the Web workers effectively using the below implementation approaches:

1. Web Worker File
2. Inline code

We can pass complex types in/out of Workers such as File, Blob, ArrayBuffer, and JSON objects.

Web Worker File

As we discussed earlier, Web worker runs independently of other scripts. We can create an independent js file that will be designated to work as worker.

Let’s take a simple example of timer.

1. Create a JS file named, timer.js
2. Inside file, add below code which ticks the time by incrementing the count by 1.
   

   var time = 0;
   
   function timer() {
       time = time + 1;
       postMessage(i);
       setTimeout("timer()", 100);
   }
   timer();

3. In our page, use the above timer.js to perform web worker
   

   if (typeof(Worker) == "undefined") {
       var w = new Worker("timer.js");
   }

Inline code

We can also have the inline code for web worker processing.

1. Instead of file, create a function for web worker.
   

   function webRoleFunction() {
       setInterval(function() {
           time = time + 1;
           postMessage(i);
       }, 100);
   }

2. Now, we will have to convert above function to string equivalent
   

   var code = webRoleFunction.toString();
   code = code.substring(code.indexOf("{") + 1, code.lastIndexOf("}"));

3. We will create a BLOB to store this code
   

   var blob = new Blob([code], { type: "application/javascript" });
   var blobURL = window.URL.createObjectURL(blob);
   var w = new Worker(blobURL);

Blob URLs are unique and last for the lifetime of your application. We should explicitly release the created BLOBs by

window.URL.revokeObjectURL(blobURL);

 

Loading External Scripts

Web worker runs in its own thread. That means, you will have to load the external scripts by providing the absolute urls only. Note, relative urls will not work to load external files.

importScripts() function can be used to load external files.

w.onmessage = function (e) {
var data = e.data;

  if (data.url) {
var url = data.url.href;
var index = url.indexOf('index.html');
if (index != -1){
url = url.substring(0, index);
}
importScripts(url + 'externalScript.js');
 }
}

Error Handling

We should have a JavaScript logic to handle the errors raised by web worker.

var worker = new Worker('workerWithError.js');
worker.addEventListener('message', onMsg, false);
worker.addEventListener('error', onError, false);
worker.postMessage(); // Start worker without a message