Add support for Service Worker

* Add Service Worker registration

* Add sw-precache support to npm run scripts

* Add SW runtime caching and pre-cache config

* gitignore: ignore sw-toolbox and generated sw script

* Include empty SW script for local testing

* Improve Service Worker registration script

* Drop explicit registration update.

Author: addyosmani

.gitignore

@@ -1,2 +1,3 @@
 /public/build
 /node_modules
+/public/sw-toolbox.js

package.json

@@ -9,10 +9,11 @@
     "url": "http://github.com/insin/react-hn.git"
   },
   "scripts": {
-    "build": "npm run lint && nwb build",
-    "lint": "eslint .",
+    "build": "npm run lint && cp node_modules/sw-toolbox/sw-toolbox.js public/sw-toolbox.js && nwb build && npm run precache",
+    "lint": "eslint src",
     "lint:fix": "eslint --fix .",
-    "start": "nwb serve"
+    "start": "nwb serve",
+    "precache": "sw-precache --root=public --config=sw-precache-config.json"
   },
   "dependencies": {
     "events": "1.1.0",
@@ -28,6 +29,8 @@
   },
   "devDependencies": {
     "eslint-config-jonnybuchanan": "2.0.3",
-    "nwb": "0.8.1"
+    "nwb": "0.8.1",
+    "sw-precache": "^3.1.1",
+    "sw-toolbox": "^3.1.1"
   }
 }

public/index.html

@@ -36,5 +36,35 @@
     <div id="app"></div>
     <script src="build/vendor.js"></script>
     <script src="build/app.js"></script>
+    <script>
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('./service-worker.js', {
+        scope: './'
+      })
+      .then(function(registration) {
+        registration.onupdatefound = function() {
+          if (navigator.serviceWorker.controller) {
+            var installingWorker = registration.installing;
+
+            installingWorker.onstatechange = function() {
+              switch (installingWorker.state) {
+                case 'installed':
+                  break;
+                case 'redundant':
+                  throw new Error('The installing ' +
+                                  'service worker became redundant.');
+                default:
+                  // Ignore
+              }
+            };
+          }
+        };
+      }).catch(function(e) {
+        console.error('Error during service worker registration:', e);
+      });
+    } else {
+      console.log('service worker is not supported');
+    }
+  </script>
   </body>
 </html>

public/runtime-caching.js

@@ -0,0 +1,21 @@
+// global.toolbox is defined in a different script, sw-toolbox.js, which is part of the
+// https://github.com/GoogleChrome/sw-toolbox project.
+// That sw-toolbox.js script must be executed first, so it needs to be listed before this in the
+// importScripts() call that the parent service worker makes.
+(function(global) {
+  'use strict'
+
+  // See https://github.com/GoogleChrome/sw-toolbox/blob/6e8242dc328d1f1cfba624269653724b26fa94f1/README.md#toolboxroutergeturlpattern-handler-options
+  // and https://github.com/GoogleChrome/sw-toolbox/blob/6e8242dc328d1f1cfba624269653724b26fa94f1/README.md#toolboxfastest
+  // for more details on how this handler is defined and what the toolbox.fastest strategy does.
+  global.toolbox.router.get('/(.*)', global.toolbox.fastest, {
+    origin: /\.(?:googleapis|gstatic|firebaseio)\.com$/
+  })
+  global.toolbox.router.get('/(.+)', global.toolbox.fastest, {
+  	  origin: 'https://hacker-news.firebaseio.com'
+  })
+  global.toolbox.router.get('/(.+)', global.toolbox.fastest, {
+  	  origin: 'https://s-usc1c-nss-136.firebaseio.com'
+  })
+})(self)
+

public/service-worker.js

@@ -0,0 +1,2 @@
+// This file is intentionally without code.
+// It's present so that service worker registration will work when serving from the 'public' directory.

sw-precache-config.json

@@ -0,0 +1,8 @@
+{
+  "importScripts": [
+    "sw-toolbox.js",
+    "runtime-caching.js"
+  ],
+  "stripPrefix": "public/",
+  "verbose": true
+}