Web Workers

Chapter 4. Inline Workers

There are cases in which you will want to create your Worker script “on the fly” in response to some event that your web app has fired. In other cases, you might want to have a self-contained page without having to create separate Worker files. Sometimes, you might wish to have your entire web app encapsulated in one page: you want to be able to fetch the app with one Ajax call, or bundle it as a Chrome extension. Inline Workers support these use cases.

The example below shows how we can use the new BlobBuilder^[6] interface to inline your Worker code in the same HTML file.

Example 4-1. Creating an inline Worker with a javascript/worker type

<script id="worker1" type="javascript/worker">
// This script won't be parsed by JS engines because its type is JavaScript/worker.
// Simple code to calculate prime number and send it back to the parent page.
      self.onmessage = function(e) {
      self.postMessage("<h3>Worker: Started the calculation</h3><ul>");
        var n = 1;
        search: while (n < 500) {
          n += 1;
          for (var i = 2; i <= Math.sqrt(n); i += 1)
            if (n % i == 0)
              continue search;
          // found a prime!
          postMessage("<li>Worker: Found another prime: " + n + "</li>");
        }
        postMessage("</ul><h3>Worker: Done</h3>");
      }
</script>

You can see that we are using javascript/worker in the type so the JavaScript engine won’t parse this code (yet). Next, we calculate the prime numbers up to 500 and send messages to the parent page after each prime is found.

In the main page, we will create a BlobBuilder ...