PencilCode · davidbau · Nov 17, 2014 · Nov 18, 2014 · Nov 18, 2014 · Nov 18, 2014
diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,5 @@ content/framed.html
 content/turtlebits.js
 content/welcome.css
 content/worker.js
+content/worker-stats.html
+content/worker-stats.js
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -107,7 +107,10 @@ module.exports = function(grunt) {
           flatten: true,
           src: [
             'content/src/editor.html',
-            'content/src/framed.html'
+            'content/src/framed.html',
+            'content/src/worker.js',
+            'content/src/worker-stats.js',
+            'content/src/worker-stats.html'
           ],
           dest: 'content'
         } ]

diff --git a/content/src/debug.js b/content/src/debug.js
@@ -104,7 +104,8 @@ var debug = window.ide = {
   },
   setEditorText: function(text) {
     view.changePaneEditorText(view.paneid('left'), text);
-  }
+  },
+  serviceWorker: false // '/worker.js'
 };
 
 //////////////////////////////////////////////////////////////////////

diff --git a/content/src/editor.html b/content/src/editor.html
@@ -10,9 +10,9 @@
 <style>
 * {box-sizing:border-box;}
 </style>
-<link rel="stylesheet" type="text/css" href="//<!--#echo var="site"-->/editor.css">
-<link rel="stylesheet" type="text/css" href="//<!--#echo var="site"-->/lib/tooltipster/css/tooltipster.css">
-<link rel="stylesheet" type="text/css" href="//<!--#echo var="site"-->/lib/droplet.css">
+<link rel="stylesheet" type="text/css" href="/editor.css">
+<link rel="stylesheet" type="text/css" href="/lib/tooltipster/css/tooltipster.css">
+<link rel="stylesheet" type="text/css" href="/lib/droplet.css">
 </head>
 <body id="pencildoc">
 <div id="overflow">

diff --git a/content/src/storage.js b/content/src/storage.js
@@ -5,6 +5,16 @@
 define(['jquery', 'see', 'filetype'],
 function($, see, filetype) {
 
+var sw = null;
+function installServiceWorker() {
+  navigator.serviceWorker.register('/worker.js').then(function(reg) {
+    console.log('happy', reg);
+  }, function(err) {
+    console.log('sad', err);
+  });
+}
+installServiceWorker();
+
 eval(see.scope('storage'));
 function hasBackup(filename) {
   try {

diff --git a/content/src/view.js b/content/src/view.js
@@ -1090,7 +1090,6 @@ function setPaneRunHtml(
       p.html('');
       var iframe = $('<iframe></iframe>').appendTo(p);
       // Destroy and create new iframe.
-      iframe.attr('src', 'about:blank');
       var framewin = iframe[0].contentWindow;
       var framedoc = framewin.document;
       framedoc.open();

diff --git a/content/src/worker-stats.html b/content/src/worker-stats.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>ServiceWorker stats for ${worker_scope}</title>
+    <style>
+.hit { color: green }
+.miss { color: red }
+.error { color: red }
+.updated { color: orange }
+.fallback { color: red }
+.skip { color: gray }
+    </style>
+    <script>
+
+function loadData() {
+  var r = new XMLHttpRequest();
+  r.open("GET", "/stats/get");
+  r.responseType = "json";
+  r.onreadystatechange = function() {
+    if (r.readyState == 4) {
+      onDataReady(r.response);
+    }
+  };
+  r.send();
+}
+
+function onDataReady(data) {
+  ["worker_scope", "cache_hits", "cache_misses", "cache_errors"].forEach(function(key) {
+    var el = document.getElementById(key);
+    el.textContent = data[key];
+  });
+  ["main_cache_keys", "user_cache_keys", "recent_requests"].forEach(function(key) {
+    constructListElement(document.getElementById(key), data[key]);
+  });
+}
+
+function constructListElement(parentNode, list) {
+  while (parentNode.hasChildNodes()) {
+    parentNode.removeChild(parentNode.childNodes[0]);
+  }
+  if (!Array.isArray(list)) {
+    return;
+  }
+
+  var list_element = document.createElement('UL');
+  list.sort().forEach(function(value) {
+    var el = document.createElement('LI');
+    if (Array.isArray(value)) {
+      var tag_text = {
+        hit: "HIT",
+        miss: "MISS",
+        error: "ERROR",
+        updated: "Updated",
+        fallback: "Network failed",
+        skip: "Skipped"
+      };
+      el.appendChild(document.createTextNode(value.shift()));
+      value.forEach(function(tag) {
+        var span = document.createElement('SPAN');
+        span.appendChild(document.createTextNode(' ' + tag_text[tag]));
+        span.classList.add(tag);
+        el.appendChild(span);
+      });
+    } else {
+      el.textContent = value;
+    }
+    list_element.appendChild(el);
+  });
+  parentNode.appendChild(list_element);
+}
+
+function killCache() {
+  var r = new XMLHttpRequest();
+  r.open("GET", "/stats/killcache");
+  r.addEventListener("readystatechange", function() {
+    if (r.readyState == 4) {
+      loadData();
+    }
+  });
+  r.send();
+}
+    </script>
+  </head>
+  <body onload="loadData()">
+    <h1>ServiceWorker stats for <span id="worker_scope">PencilCode</span></h1>
+    <p>Cache hits: <span id="cache_hits">Loading...</span></p>
+    <p>Cache misses: <span id="cache_misses">Loading...</span></p>
+    <p>Cache errors: <span id="cache_errors">Loading...</span></p>
+    <p><input type="button" onclick="killCache()" value="Kill caches"></input></p>
+    <h3>Recent activity</h3>
+    <div id="recent_requests">
+    </div>
+    <h3>Main cache keys</h3>
+    <div id="main_cache_keys">
+    </div>
+    <h3>User cache keys</h3>
+    <div id="user_cache_keys">
+    </div>
+  </body>
+</html>
diff --git a/content/src/worker-stats.js b/content/src/worker-stats.js
@@ -0,0 +1,106 @@
+// Some stats for this service worker session.
+
+var CACHE_HIT = 'hit';
+var CACHE_MISS = 'miss';
+var CACHE_ERROR = 'error';
+var CACHE_UPDATED = 'updated';
+var CACHE_FALLBACK = 'fallback';
+var CACHE_SKIPPED = 'skip';
+
+(function() {
+  var cache_hits = 0;
+  var cache_misses = 0;
+  var cache_errors = 0;
+  var cache_activity = {};
+  var max_cache_activity = 30;
+  var result_handler = {
+    hit: function() { ++cache_hits; },
+    miss: function() { ++cache_misses; },
+    error: function() { ++cache_errors; }
+  };
+
+  var stats_page = '/worker-stats.html';
+
+  function addResult(url, result) {
+    if (!(url in cache_activity))
+      cache_activity[url] = [];
+    cache_activity[url].push(result);
+    if (result in result_handler)
+      (result_handler[result])();
+  }
+
+  function handlePageRequest(request, path) {
+    if (path === '/killcache') {
+      return killCache();
+    }
+    if (path === '/get') {
+      return getStats();
+    }
+    return getStatsPage();
+  }
+
+  function getStats() {
+    var main_cache_entries = null;
+    var user_cache_entries = null;
+
+    return self.caches.open(main_cache_name)
+      .then(function(cache) {
+          return cache.keys();
+        })
+      .then(function(keys) {
+          main_cache_entries = keys.map(function(request) {
+              return request.url;
+            });
+        })
+      .then(function() {
+          return self.caches.open(user_cache_name);
+        })
+      .then(function(cache) {
+          return cache.keys();
+        })
+      .then(function(keys) {
+          user_cache_entries = keys.map(function(request) {
+              return request.url;
+            });
+        })
+      .then(function() {
+          var data = {
+            worker_scope: self.scope,
+            cache_hits: cache_hits,
+            cache_misses: cache_misses,
+            cache_errors: cache_errors,
+            main_cache_keys: main_cache_entries,
+            user_cache_keys: user_cache_entries,
+            recent_requests: Object.keys(cache_activity).map(function(key) {
+              return [key].concat(cache_activity[key]);
+            })
+          };
+          var blob = new Blob([JSON.stringify(data)], { type: 'text/javascript' });
+          return new Response(blob);
+        });
+  }
+
+  function killCache() {
+    return Promise.all([
+        self.caches.delete(main_cache_name),
+        self.caches.delete(user_cache_name)
+      ])
+      .then(function() {
+          return getStatsPage();
+        })
+      .then(function() {
+          return new Response('OK');
+        });
+  }
+
+  function getStatsPage() {
+    return getCachedResponse(new Request(stats_page));
+  }
+
+  self.stats = {
+    addResult: addResult,
+    handlePageRequest: handlePageRequest,
+    prefetch: getStatsPage,
+  };
+})();
+