Basic debugging callbacks for HTML Service Workers

client.js.coffee

console.log navigator.serviceWorker.controller

navigator.serviceWorker.register('/worker.js') #, scope: 'path'
.then (reg) ->
  console.log '◕‿◕', reg
, (err) ->
  console.log 'ಠ_ಠ', err

# credit: https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html
@sendMessage = (message) ->
  # This wraps the message posting/response in a promise, which will resolve if the response doesn't
  # contain an error, and reject with the error if it does. If you'd prefer, it's possible to call
  # controller.postMessage() and set up the onmessage handler independently of a promise, but this is
  # a convenient wrapper.
  new Promise (resolve, reject) ->
    messageChannel = new MessageChannel
    messageChannel.port1.onmessage = (event) ->
      if event.data.error
        reject event.data.error
      else
        resolve event.data

    # This sends the message data as well as transferring messageChannel.port2 to the service worker.
    # The service worker can then use the transferred port to reply via postMessage(), which
    # will in turn trigger the onmessage handler on messageChannel.port1.
    # See https://html.spec.whatwg.org/multipage/workers.html#dom-worker-postmessage
    navigator.serviceWorker.controller.postMessage message, [messageChannel.port2]
    # return

@sendMessage(name:'inspect').then(console.log.bind(console), console.warn.bind(console))

worker.js

// Written Against Chrome 42.0

// The SW will be shutdown when not in use to save memory,
// be aware that any global state is likely to disappear

self.addEventListener('install',       function(event) { console.log("SW installed") })
self.addEventListener('activate',      function(event) { console.log("SW activated") })
self.addEventListener('evicted',       function(event) { console.log("SW evicted") })
self.addEventListener('beforeevicted', function(event) { console.log("SW beforeevicted") })

// Respond to postMessage queries

var Message = {};
(function(){
  var _send = function(event, message) {
    event.ports.forEach(function(port) {
      port.postMessage(message)
    })
  }
  self.addEventListener('message', function(event) {
    var send = _send.bind(null, event)
    if (event.data.name && Message[event.data.name]) {
      Message[event.data.name](send,event.data)
    } else {
      send('Could not find Message["'+event.data.name+'"]')
    }
  })
})()

self.addEventListener('fetch', function(event) {
  console.log("fetch: "+event.request.method+" "+event.request.url, event.request);

  event.respondWith(
    caches.match(event.request)
    .then(function(response) {
      if (response) {
        console.info('HIT^'+" "+event.request.url)
        return response
      }
      console.warn('MISS^'+" "+event.request.url)
  
      return fetch(event.request.clone())
      .then(function(response) {
        if (!response || response.status !== 200 || response.type !== 'basic') {
          console.warn('cache.put', 'uncachable', response.status, response.type, event.request.url)
          return response
        }
  
        var responseClone = response.clone()
        caches.open('main')
        .then(function(cache) {
          console.log('cache.put', event.request, responseClone)
          cache.put(event.request, responseClone)
        })
  
        return response
      })
    })
  )

});

// Define Controllers to respond to postMessages

Message['echo'] = function(send, message) { send(message) }
Message['inspect'] = function(send, message) {
  var start = Date.now()
  caches.keys().then(function(keys) {
    return Promise.all(keys.map(function(key) {
      return caches.open(key).then(function(cache) {
        return cache.keys().then(function(keys) {
          return Promise.all(keys.map(function(request) {
            return Promise.all([
              Promise.all([
                request.clone().text().then(function(text){ return text }),
                request.arrayBuffer().then(function(data){ return data.byteLength }),
              ]).then(function(promises) {
                return {
                  body: promises[0],
                  length: promises[1],
                  credentials: request.credentials,
                  method: request.method,
                  mode: request.mode,
                  referrer: request.referrer,
                  url: request.url,
                }
              }),
              cache.match(request).then(function(response) {
                return Promise.all([
                  response.clone().text().then(function(text){ return text }),
                  response.arrayBuffer().then(function(data){ return data.byteLength }),
                ]).then(function(promises) {
                  return {
                    body: promises[0],
                    length: promises[1],
                    ok: response.ok,
                    status: response.status,
                    statusText: response.statusText,
                    type: response.type,
                    url: response.url,
                  }
                })
              })
            ])
          }))
        })
      }).then(function(cache){ return [key, cache] })
    })).then(function(caches){
      return caches.reduce(function(result, pair) {
        result[pair[0]] = pair[1]
        return result
      }, {})
    })
  }).then(function(resp){
    console.info("Message['inspect']", Date.now()-start, resp)
    send(resp)
  })
}