set up basic service worker

Author: ascott1

_layouts/default.html

@@ -49,5 +49,12 @@ <h1 class="site-title"><a class="title-link" href="{{ site.baseurl }}/">{{ site.
         </div><!--/.wrap -->
       </footer>
     </div> <!-- /.container -->
+    <script>
+      if('serviceWorker' in navigator) {
+        navigator.serviceWorker
+         .register('/sw.js')
+         .then(function() { console.log('Service Worker Registered'); });
+       }
+    </script>
     </body>
 </html>

cache-polyfill.js

@@ -0,0 +1,72 @@
+/**
+ * Copyright 2015 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+if (!Cache.prototype.addAll) {
+  Cache.prototype.addAll = function addAll(requests) {
+    var cache = this;
+
+    // Since DOMExceptions are not constructable:
+    function NetworkError(message) {
+      this.name = 'NetworkError';
+      this.code = 19;
+      this.message = message;
+    }
+    NetworkError.prototype = Object.create(Error.prototype);
+
+    return Promise.resolve().then(function() {
+      if (arguments.length < 1) throw new TypeError();
+
+      // Simulate sequence<(Request or USVString)> binding:
+      var sequence = [];
+
+      requests = requests.map(function(request) {
+        if (request instanceof Request) {
+          return request;
+        }
+        else {
+          return String(request); // may throw TypeError
+        }
+      });
+
+      return Promise.all(
+        requests.map(function(request) {
+          if (typeof request === 'string') {
+            request = new Request(request);
+          }
+
+          var scheme = new URL(request.url).protocol;
+
+          if (scheme !== 'http:' && scheme !== 'https:') {
+            throw new NetworkError("Invalid scheme");
+          }
+
+          return fetch(request.clone());
+        })
+      );
+    }).then(function(responses) {
+      // TODO: check that requests don't overwrite one another
+      // (don't think this is possible to polyfill due to opaque responses)
+      return Promise.all(
+        responses.map(function(response, i) {
+          return cache.put(requests[i], response);
+        })
+      );
+    }).then(function() {
+      return undefined;
+    });
+  };
+}

index.html

@@ -33,5 +33,4 @@ <h2>Posts</h2>
         <span class="post-date">{{ post.date | date_to_string }}</span>
       </li>
     {% endfor %}
-  </ul>
 </div>

sw.js

@@ -0,0 +1,36 @@
+---
+layout: null
+---
+
+importScripts('/cache-polyfill.js');
+
+self.addEventListener('install', function(e) {
+  e.waitUntil(
+    caches.open('DOCter').then(function(cache) {
+      return cache.addAll([
+        // root
+        '/',
+        '/index.html',
+        // css
+        '/assets/css/main.css',
+        '/assets/css/normalize.css',
+        '/assets/css/syntax.css',
+        // images
+        '/assets/img/octocat.png',
+        // pages
+        '/example_page/',
+        // posts
+        {% for post in site.posts %}'{{ post.url }}',{% endfor %}
+      ]);
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  console.log(event.request.url);
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      return response || fetch(event.request);
+    })
+ );
+});