Added Service Worker for offline support

Gruntfile.js

@@ -8,6 +8,8 @@
 // If you want to recursively match all subfolders, use:
 // 'test/spec/**/*.js'
 
+var git = require('git-rev-sync');
+
 module.exports = function (grunt) {
 
   // Time how long tasks take. Can help when optimizing build times
@@ -245,10 +247,16 @@ module.exports = function (grunt) {
           '<%= config.dist %>',
           '<%= config.dist %>/images',
           '<%= config.dist %>/styles'
-        ]
+        ],
+        patterns: {
+          js: [
+            [/'\/([^']+)'/gm, 'Update the js value to reference our revved url']
+          ]
+        }
       },
       html: ['<%= config.dist %>/{,*/}*.html'],
-      css: ['<%= config.dist %>/styles/{,*/}*.css']
+      css: ['<%= config.dist %>/styles/{,*/}*.css'],
+      js: ['<%= config.dist %>/sw.js']
     },
 
     // The following *-min tasks produce minified files in the dist folder
@@ -318,9 +326,18 @@ module.exports = function (grunt) {
     //     }
     //   }
     // },
-    // concat: {
-    //   dist: {}
-    // },
+
+    concat: {
+      sw: {
+        options: {
+          banner: 'const VERSION = \'' + git.short() + '\'; const groups = ',
+          separator: ';\n'
+        },
+
+        src: ['build/groups.json', '<%= config.app %>/scripts/sw.js'],
+        dest: '<%= config.dist %>/sw.js'
+      }
+    },
 
     // Copies remaining files to places other tasks can use
     copy: {
@@ -499,6 +516,11 @@ module.exports = function (grunt) {
     'htmlmin'
   ]);
 
+  grunt.registerTask('serve-dist', [
+    'build',
+    'browserSync:dist'
+  ]);
+
   grunt.registerTask('default', [
     'newer:eslint',
     'test',

app/scripts/app.js

@@ -37,4 +37,11 @@
 
   initializeAndRun(container.injector);
 
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/sw.js')
+      .catch(function (error) {
+        console.warn('SW registration failed with ' + error);
+      });
+  }
+
 })(WWCD.container);

app/scripts/sw.js

@@ -0,0 +1,59 @@
+
+this.addEventListener('install', function (event) {
+  event.waitUntil(
+    caches.open(VERSION).then(function (cache) {
+      let files = [
+        '/',
+        '/index.html',
+        '/scripts/main.js',
+        '/scripts/vendor.js',
+        '/styles/main.css',
+        '/styles/vendor.css',
+        '/images/logo.svg',
+        '/fonts/Material-Design-Icons.woff'
+      ];
+
+      groups.forEach(function (group) {
+        group.features.forEach(function (feature) {
+          files.push(`/${feature.id}.html`);
+        });
+      });
+
+      return cache.addAll(files);
+    })
+  );
+});
+
+this.addEventListener('activate', function (event) {
+  event.waitUntil(
+    caches.keys().then(function (keyList) {
+      return Promise.all(keyList.map(function (key) {
+        if (key !== VERSION) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});
+
+this.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.open(VERSION)
+      .then(function (cache) {
+        return cache.match(event.request, {ignoreSearch: true})
+          .then(function (response) {
+            if (response) {
+              return response;
+            }
+
+            return fetch(event.request)
+              .then(function (fetchResponse) {
+                if (event.request.url.indexOf('https://raw.githubusercontent.com') === 0) {
+                  cache.put(event.request, fetchResponse.clone());
+                }
+                return fetchResponse;
+              });
+          });
+      })
+  );
+});

package.json

@@ -2,6 +2,7 @@
   "private": true,
   "devDependencies": {
     "autoprefixer-core": "^5.2.1",
+    "git-rev-sync": "1.8.0",
     "grunt": "^0.4.5",
     "grunt-babel": "^5.0.0",
     "grunt-browser-sync": "^2.1.2",