Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A simple project to explore shared web workers

branch: master
README.md

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:

  1. 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
    
  2. 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

      build.sh:
    
      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.push(newbie)
        channels.forEach(function (port) {
          if (newbie === port) {
            return;
          }
          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

W00T!

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.