Simple worker example in HTML5

Hi.

I just added an example of workers to the HTML5 detection and examples code on which I talked about in my two previous posts. Workers are, undoubtedly, the most interesting feature of the HTML5 specs. A lot of the specifications derive from the work done by the Google gears team. Kudos for finally bringing multi-threaded applications to the web!!!

Here's a statement on web workers in the current specifications:

This specification defines an API that allows Web application authors to spawn background workers running scripts in parallel to their main page. This allows for thread-like operation with message-passing as the coordination mechanism.

It also has the following statement:

Workers are relatively heavy-weight, and are not intended to be used in large numbers. Generally, workers are expected to be long-loved, have a high start-up cost, and a high per-instance memory cost.

Example initialization: (in parent page)
var worker = new Worker("worker.js");
worker.onmessage = function(){}

In worker.js:
postMessage();//used to send a message back to the "parent" thread.

Currently, most browsers support just strings being passed as messages, although the developers working with the W3C are also trying to get it into the specifications to pass around generic objects.

There are also some stipulations on what can be done within a worker thread:

1. Workers have no access to the DOM
2. Workers do not have direct access to the 'parent' page.

The first point above means that one cannot do any DOM manipulations within the worker thread. i.e. no access to document, window, document.body or any of the DOM elements.

The second stipulation means that the worker thread can communicate with only it's parent thread, and cannot call any functions or use any variables on the "parent" page that initialized it.

The demo I have put together works quite well in Chrome 4 and Safari 4. The demo works quite weirdly in FF 3.5, but only for the "terminate" call, where it seems to terminate the worker thread after a random period of time after I click the "Stop" button. However, that might be due to Firebug or any other extensions I may have installed. Do let me know in case you experience otherwise.

Here is the zip file once more: Html5.zip

Cheers.

HTML5 browser support

The emergence of the HTML5 specifications has gotten me all excited about the future of web pages and the possibility of web applications finally catching up with their desktop counterparts (in terms of speed and richness). For just getting my hands a little dirty with the "magical" HTML5 dust, I decided to quickly write up some sample code to detect some features I thought were important. Of course, I have skipped quite a few (I haven't read the complete specs yet).

If you want to take a look at what I've coded up, click here to download the files. The Html5Detect object queries most properties as simple getter functions.

The following table lists some of the HTML5 elements and properties supported in 4 of the latest browsers (Windows versions only tested here):

Property	Chrome4	Opera10	Safari4	Firefox3.5
canvas	TRUE	TRUE	TRUE	TRUE
canvasText	TRUE	FALSE	TRUE	TRUE
video	TRUE	FALSE	TRUE	TRUE
h264 video	probably	FALSE	probably	FALSE
OGG video	probably	FALSE	FALSE	probably
localStorage	TRUE	FALSE	TRUE	TRUE
workers	TRUE	FALSE	TRUE	TRUE
applicationCache	FALSE	FALSE	TRUE	TRUE
geoLocation	FALSE	FALSE	TRUE	TRUE
placeholder	TRUE	FALSE	FALSE	FALSE
autofocus	TRUE	TRUE	TRUE	FALSE
microdata	FALSE	FALSE	FALSE	FALSE
inputTypes.search	TRUE	FALSE	TRUE	FALSE
inputTypes.number	TRUE	TRUE	TRUE	FALSE
inputTypes.range	TRUE	TRUE	TRUE	FALSE
inputTypes.color	TRUE	FALSE	FALSE	FALSE
inputTypes.tel	TRUE	FALSE	TRUE	FALSE
inputTypes.url	TRUE	TRUE	TRUE	FALSE
inputTypes.email	TRUE	TRUE	TRUE	FALSE
inputTypes.date	FALSE	TRUE	FALSE	FALSE
inputTypes.month	FALSE	TRUE	FALSE	FALSE
inputTypes.time	FALSE	TRUE	FALSE	FALSE
inputTypes.datetime	FALSE	TRUE	FALSE	FALSE
inputTypes.datetimeLocal	FALSE	TRUE	FALSE	FALSE

For all values of "probably", I haven't tried them out myself yet, but that's the value the detection returns. "probably" indicates that the browser is fairly confident that it can play this format. IE8 doesn't support any of the HTML5 elements I've tested for.

Let me know if there are any other browsers you would like to see included in this list. For further reading, I'd recommend following the HTML5 specification itself, as it is rapidly evolving.

Cheers.