Peter Lubbers - Pro HTML 5 Programming

CHAPTER 8 ■ USING THE HTML5 WEB WORKERS API
In this example, you test for browser support in the loadDemo function, which might be called when
the page is loaded. A call to typeof(Worker) will return the window’s global Worker property, which will
be undefined if the browser doesn’t support the Web Workers API. In this example, the page is updated
to reflect whether there is browser support by updating a previously defined support element on the
page with a suitable message, as shown at the top of Figure 8-2.
Figure 8-2. Example of showing whether HTML5 Web Workers is supported
Creating HTML5 Web Workers
Web Workers are initialized with the URL of a JavaScript file, which contains the code the worker will
execute. This code sets event listeners and communicates with the script that spawned it. The URL for
the JavaScript file can be a relative or absolute URL with the same origin (the same scheme, host, and
port) as the main page:
worker = new Worker("echoWorker.js");
Loading and Executing Additional JavaScript
An application composed of several JavaScript files can contain elements that synchronously
load JavaScript files as the page loads. However, because Web Workers do not have access to the
document object, there is an alternative mechanism for synchronously importing additional JavaScript
files from within workers—importScripts:
importScripts("helper.js");
Importing a JavaScript file simply loads and executes JavaScript into an existing worker. Multiple
scripts can be imported by the same call to importScripts. They are executed in the order specified:
importScripts("helper.js", "anotherHelper.js");
Communicating with HTML5 Web Workers
Once the Web Worker is spawned, you can use the postMessage API to send data to and from Web
Workers. This is the same postMessage API that is used for cross-frame and cross-window
communication. postMessage can be used to send most JavaScript objects, but not functions or objects
with cyclic references.
195