My first service worker

Author: csswizardry

_layouts/default.html

@@ -7,6 +7,20 @@
 
     {{ content }}
 
+<script>
+  if ('serviceWorker' in navigator) {
+    window.addEventListener('load', function() {
+      navigator.serviceWorker.register('/sw.js').then(function(registration) {
+        // Successfully registered the Service Worker
+        //console.log('Service Worker registration successful with scope: ', registration.scope);
+      }).catch(function(err) {
+        // Failed to register the Service Worker
+        //console.log('Service Worker registration failed: ', err);
+      });
+    });
+  }
+</script>
+
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

offline.md

@@ -0,0 +1,22 @@
+---
+layout: page
+title: "Oops! It Looks Like Your Connection Is Offline"
+page-class: page--offline
+meta: "CSS Wizardry’s offline content"
+permalink: /offline/
+---
+
+It looks as though your device is offline. You’ll probably want to check back
+when you have a connection, but until then you can:
+
+* [head to the homepage](/);
+* [read a little more about CSS Wizardry](/about/);
+* [learn about the services I offer](/services/), or;
+* [find out how best to get in touch with me](/contact/).
+
+Or if you’d like to read something:
+
+* [Pragmatic, Practical, and Progressive Theming with Custom Properties](/2016/10/pragmatic-practical-progressive-theming-with-custom-properties/)
+* [Mixins Better for Performance](/2016/02/mixins-better-for-performance/)
+* [More Transparent UI Code with Namespaces](/2015/03/more-transparent-ui-code-with-namespaces/)
+* [BEMIT: Taking the BEM Naming Convention a Step Further](/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/)

sw.js

@@ -0,0 +1,38 @@
+var cacheName = 'csswizardry:0001';
+var cacheFiles = [
+  '/',
+  '/about/',
+  '/services/',
+  '/contact/',
+  '/offline/',
+  '/2015/03/more-transparent-ui-code-with-namespaces/',
+  '/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/',
+  '/2016/02/mixins-better-for-performance/',
+  '/2016/10/pragmatic-practical-progressive-theming-with-custom-properties/'
+];
+
+self.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open(cacheName)
+      .then(function(cache) {
+        //console.log('Opened cache');
+        return cache.addAll(cacheFiles);
+      })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request)
+      .then(function(response) {
+        // Grab the asset from SW cache.
+        if (response) {
+          return response;
+        }
+        return fetch(event.request);
+    }).catch(function() {
+      // Can't access the network return an offline page from the cache
+      return caches.match('/offline/');
+    })
+  );
+});