Click here to Skip to main content
Click here to Skip to main content
Go to top

An HTML5 ProgressBar using Web Workers

, 6 Sep 2011
Rate this:
Please Sign up or sign in to vote.
A look at an advanced HTML5 feature: Web workers

HTML5 is here to stay. HTML5 is not about markup only. It's about constructing, styling and adding client-side features to a modern website. I suggest you read my introductory post on HTML5 if you want to get a quick glimpse of its new features. Considering the exciting client-side capabilities, what I really like on HTML5 are the JavaScript libraries which really enhance the end-user experience. 

Today we'll have a look at an advanced HTML5 feature: Web workers. Web workers introduce multi-threading to the web browsers. They define an API for executing scripts concurrently, separating the UI from any background process. And, yes, the language they use is JavaScript. JavaScript has been a little misunderstood, but it is now commonly thought as a robust and powerful programming language.

Web workers simple demo 

We'll use web workers' power to create a client-side progress bar between the page UI and a background script (specifically, this script will calculate some prime numbers). No server-side staff for now. Before implementing this, let's have a look at how web workers are used.

Creating the background script

Firstly, we need to decide what our long-running background process is all about. In our case, this is about calculating prime numbers. Secondly, we need to update the HTML page by sending a proper message to it.

The first part is just Maths. It could be ANY long-running process, so do not care of the implementation!

The second part is accomplished by the postMessage function. postMessage is able to send an argument of any type back to the UI thread!

Here is "robot.js" file, containing the long-running process of finding prime numbers:

var found = 0;
var n = 1;
var total = 0;
var THRESHOLD = 10000;

while (total < THRESHOLD) {
    n += 1;
    for (var i = 2; i <= Math.sqrt(n); i++) {
        if (!(n % i == 0)) {
            total++;
            postMessage(found);
        }
        else {
            found++;
        }
    }
}

Using the web worker

Web workers are declared as any other JavaScript object, getting the background JavaScript file as a parameter. Note that we do not need to import "robot.js" using HTML tags; it will be seamlessly used from the worker. 

Worker worker = new Worker("robot.js");

The worker is updated when postMessage is called. As a result, we need to handle the event generated. This is done via onMessage function:

worker.onmessage = function (event) {
    var result = event.data;
};

event.data contains the objects (in our case, the prime number found) passed from the background script to the user interface.

Testing web workers

Have in mind that not all browsers support web workers properly. I suggest you use Internet Explorer 10 preview, as it is supposed to be the most modern option (and scores really great in the benchmarks), but the latest releases of Chrome, Firefox and Opera will do the job pretty well, too. Here is the result of our demo in action!

HTML5 web workers progressbar

View the demo, download the source code and experiment. Ι have included some simple extra code for calculating the progressbar's percentage as well as some CSS3 styling. Enjoy!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Vangos Pterneas
Product Manager LightBuzz
United Kingdom United Kingdom
Vangos Pterneas is a Microsoft Most Valuable Professional in the Kinect technology. He helps companies from all over the world grow their revenue by creating profitable software products. Vangos is the owner of LightBuzz Software agency and author of two technical books.
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 PinmemberJenny Quinn14-Sep-11 2:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140926.1 | Last Updated 6 Sep 2011
Article Copyright 2011 by Vangos Pterneas
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid