Web Workers - HTML5, JavaScript, and jQuery - page 240

• The window object
• The Document Object Model
• The localstorage object
• The document object
Web Workers can however invoke AJAX calls, and they do have access to all the
JavaScript features we examined in the JavaScript section of this topic.
As a result of their restrictions, the use-cases for Web Workers is limited. There are
however a number of cases where they are relevant. If we envisage a word processing ap-
plication inside a web browser, there are a number of activities we may want to perform on
a regular basis in the background, these might include:
1. Checking which words in the document are misspelt.
2. Checking the grammar of the document against a set of rules.
3. Checking where the page breaks should be placed in the document.
4. Collecting statistics for the number of words and pages in the document.
All of the processing associated with these activities could be done in a Web Worker. The
Web Worker could be posted the word processor document on a regular basis, it could per-
form these potentially intensive activities, and then the results could be posted back to the
main thread so that the DOM could be updated to reflect the results.
If all these activities were performed on the main browser thread it is likely that the user
would experience lags and delays every time these activities were performed, and as the
document increased in size it is likely that these lags would become worse.
We are going to implement a Web Worker that is posted a JavaScript string representing a
CSV version of a set of tasks. It is then going to process these and post back an array of
tasks.
The first step in this process is the creation of a new JavaScript file for the Web Worker: the
code cannot exist in the same JavaScript file as any other code, and each Web Worker must
have its own JavaScript file. Create a new file in the scripts folder called tasks-csvparser.js.
The following is the basic structure of our Web Worker:
self.addEventListener('message', function(msg) {
var data = msg.data;
self.postMessage(null);