controller.js

## controller.js
var fallbacks = {}
,   networks = {}
,   cacheName = "OldSchoolAppCache"
;

this.onmessage = function (e) {
    var msg = e.data;
    if (msg.type && msg.type === "manifest") {
        var lines = msg.manifest.split(/\n+/)
        ,   mode = "cache"
        ,   hadCache = false
        ,   cache
        ;
        if (cache = this.caches.get(cacheName)) {
            hadCache = true;
        }
        else {
            cache = new Cache();
        }
        // this is not the real parsing algorithm
        if (lines.shift() !== "CACHE MANIFEST") return;
        while (lines.length) {
            var line = lines.shift();
            if (line.match(/(?:^\s*$)|(?:^\s*#.*$)/)) continue;
            var directive = line.match(/^(CACHE|NETWORK|FALLBACK):$/);
            if (directive) {
                mode = directive.toLowerCase();
                continue;
            }
            line = line.replace(/(^\s+|\s+$)/g, "");
            if (mode === "cache") {
                cache.add(line);
            }
            else if (mode === "fallback") {
                var parts = line.split(/\s+/, 2);
                fallbacks[parts[0]] = parts[1];
            }
            else {
                networks[line] = true;
            }
        }
        if (!hadCache) this.caches.set(cacheName, cache);
    }
};

// we don't handle wildcards, but that's a detail
this.onrequest = function (e) {
    var cache = this.caches.get(cacheName);
    if (networks[e.request.url]) return; // hit the network
    if (fallbacks[e.request.url] && !this.onLine) {
        var res = cache.match(fallbacks[e.request.url]);
        if (res) {
            e.preventDefault();
            e.respondWith(res);
            return;
        }
    }
};

## index.html
<!DOCTYPE html>
<html manifest="foo.manifest" controller="controller.js" controllerpath="/*">
  <head>
    <script>
      if (document.documentElement.hasAttribute("manifest")) {
          window.controller.ready().then(function () {
          var xhr = new XMLHttpRequest();
          xhr.open("GET", document.documentElement.getAttribute("manifest"));
          xhr.onreadystatechange = function () {
              if (xhr.readyState === 4 && xhr.status === 200) {
                  window.controller.postMessage({ type: "manifest", manifest: xhr.responseText});
              }
          };
          xhr.send();
          });
      }
    </script>
  </head>
</html>