darobin/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>
	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;
	}
	}
	};
	<!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>