A simple project to explore shared web workers
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


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 build.sh
      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: ' + event.data);

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!