Skip to content
A simple project to explore shared web workers
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
lib open multiple windows and iframes
.gitignore pakmanaged isn't a source file, ignoring
index.jade added Desktop notifications
index.js added Desktop notifications
package.json open multiple windows and iframes
shared-worker.js got peer communication going on

Shared WebWorkers + Desktop Notifications = Remote Control

Think of the possibilities...

Sorry that this isn't a great article / walkthrough. I was having a power-hour just banging my way through.

If you checkout the code and look at it, it's pretty simple though.

Stage 1

  1. Take a look at the examples here:

  2. Copy and paste the 3 pages from the spec example:

      mkdir shared-worker-example
      cd shared-worker-example
      touch test.js
      touch index.html
      touch inner.html
  3. Use some sort of static file server, this won't work from your filesystem

      npm install served 8888 &
      # open index.html in a browser

Cool. It works.

Stage 2

Without adding any functionality, I want to refactor the code.

  1. Refactor

      # move script from index.html to index.js
      touch index.js 
      # move script from inner.html to index.js
      touch inner.js
      # rename indescriptive 'test.js'
      mv test.js shared-worker.js
  2. De-html

      # convert html to jade
      html2jade index.html
      html2jade inner.html
  3. Create build system
      rm *.html
      jade *.jade
  4. Test

      # open index.html in a browser

Cool. It still works.

Stage 3

The examples have really crummy javascript examples. Rewrite!

  1. strict mode

    Everything gets wrapped in a strict-mode closure for safe-keeping

      (function () {
        "use strict";
        ... previous content goes here ...
  2. No magic globals

    They broke strict mode by using onconnect = rather than self.onconnect =. Fixed

  3. No magic events

    onmessage automatically invokes port.start(). That's just weird.

    All events updated to use addEventListener

Awesome. Not broken yet.

Stage 4

Now I want to see interaction, so I need a DOM library and a form to send messages.

  1. Install pakmanager

      npm install pakmanager
  2. Create a package

      # just added a console.log (so that the file isn't empty), will convert main index.js later
      touch lib/index.js
      npm init
      # edit package.json to add `domReady`, `bean` (events), `bonzo` (DOM manipulations), and `qwery` (css selection)
      # add "main" as "lib/index" and "lib" as "lib"
  3. Add script tags for pakmanaged.js in index.jade and inner.jade

    These tags must come first so that the latter files have access

  4. Modify build script

      # add at end of
      pakmanager build
  5. Added button and event handlers to open new iFrames or windows for inner.html instances

Stage 5

Send a message from a form

  1. Add form with submit button

    Easy enough, no trickery here

  2. Get the message through the webworker to the peers

    Turns out that event.ports is a rabbit hole. It's useless. It isn't an Array or an Object. You can only ever access ports[0]. It's part of the spec that you can't access ports[i]! WTF!?!?!

    So inside the worker I did something like this:

      var channels = [];
      function connect(ev) {
        var newbie = ev.ports[0];
        channels.forEach(function (port) {
          if (newbie === port) {
          port.postMessage('a newcomer has arrived with the message: ' +;

Stage 6

Added Desktop Notifications using webkitNotification and mozNotification.

  1. Request permission from user

    You can only do this once (without hardcore clearing the cache - so do it right!)

  2. Debugging is impossible... but oh well


Stage 7

Houston, we have remote control!!!

Can't type from Notifications box, but can Bark!!! Ruff ruff!

Something went wrong with that request. Please try again.