Improve SW cache busting

Author: csswizardry

offline.md

@@ -1,22 +1,23 @@
 ---
 layout: page
-title: "Oops! It Looks Like Your Connection Is Offline"
+title: "Oops! It Looks Like Your’re 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:
+It looks as though your device is offline. Not to worry; I’ve prepared some
+offline content for you to read whilst you wait for your connection to come
+back:
 
 * [head to the homepage](/);
 * [read a little more about CSS Wizardry](/about/);
-* [learn about the services I offer](/services/), or;
+* [learn about the services I offer](/services/);
+* [see what I’ve done for other companies](/case-studies/), or;
 * [find out how best to get in touch with me](/contact/).
 
 Or if you’d like to read something:
 
-* [Case Study: Ocado Workshop](/case-studies/ocado-workshop/)
 * [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/)

sw.js

@@ -1,17 +1,30 @@
-var cacheName = 'csswizardry:0003';
+var cacheName = 'csswizardry:0005';
 var cacheFiles = [
   '/',
   '/about/',
   '/services/',
   '/contact/',
-  '/offline/',
+  '/case-studies/',
+  '/case-studies/raspberry-pi-code-club-workshop/',
+  '/case-studies/ocado-workshop/',
+  '/case-studies/nhs-nhsx-elearning-platform/',
+  '/case-studies/better-collective/',
+  '/case-studies/madgex-consultancy-workshop/',
+  '/case-studies/bbc-workshop/',
+  '/case-studies/bskyb/',
+  '/case-studies/css-wizardry/',
+  '/case-studies/financial-times/',
   '/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/',
-  '/case-studies/ocado-workshop/'
+  '/offline/'
 ];
 
+
+
+
+
 self.addEventListener('install', function(event) {
   event.waitUntil(
     caches.open(cacheName)
@@ -22,6 +35,10 @@ self.addEventListener('install', function(event) {
   );
 });
 
+
+
+
+
 self.addEventListener('fetch', function(event) {
   event.respondWith(
     caches.match(event.request)
@@ -37,3 +54,25 @@ self.addEventListener('fetch', function(event) {
     })
   );
 });
+
+
+
+
+
+// Empty out any caches that don’t match the ones listed.
+self.addEventListener('activate', function(event) {
+
+  var cacheWhitelist = ['csswizardry:0005'];
+
+  event.waitUntil(
+    caches.keys().then(function(cacheNames) {
+      return Promise.all(
+        cacheNames.map(function(cacheName) {
+          if (cacheWhitelist.indexOf(cacheName) === -1) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});