Land Workbox support. (#82)

* package.json: [sw-precache, sw-toolbox] => sw-cli

* precache config, runtime => sw-cli-config, sw-lib

* Add service-worker and runtime caching rules

* Move over to using sw-build

* Moves over to the Workbox libraries. (#81)

Author: addyosmani

generate-sw.js

@@ -0,0 +1,11 @@
+const workboxBuild = require('workbox-build');
+
+workboxBuild.injectManifest({
+  swSrc: 'public/service-worker.js',
+  swDest: 'dist/service-worker.js',
+  globDirectory: 'dist',
+  staticFileGlobs: ['**/!(*map*)'],
+  globIgnores: ['**/service-worker.js'],
+}).then(() => {
+  console.log('The production service worker has been generated.');
+});

package.json

@@ -9,16 +9,16 @@
     "url": "http://github.com/insin/react-hn.git"
   },
   "scripts": {
-    "build": "mkdir -p dist && npm run lint && cp node_modules/sw-toolbox/sw-toolbox.js dist/sw-toolbox.js && ./node_modules/.bin/nwb build && npm run copy-manifest && npm run precache",
+    "build": "mkdir -p dist && nwb build && npm run copy-manifest && npm run clean && npm run generate-sw",
     "deploy": "gcloud preview app deploy",
-    "lint": "./node_modules/eslint-config-jonnybuchanan/bin/lint.js src",
+    "lint-old": "./node_modules/eslint-config-jonnybuchanan/bin/lint.js src",
     "lint:fix": "./node_modules/eslint-config-jonnybuchanan/bin/lint.js --fix .",
     "start": "node server.js",
     "postinstall": "npm run build",
-    "serve": "./node_modules/.bin/nwb serve",
+    "serve": "nwb serve",
     "copy-manifest": "cp public/manifest.json dist/manifest.json",
-    "clean": "rm -rf *.json.gzip dist/index.html",
-    "precache": "./node_modules/sw-precache/cli.js --root=public --config=sw-precache-config.json && npm run clean"
+    "generate-sw": "node generate-sw.js",
+    "clean": "rm -rf *.json.gzip dist/index.html"
   },
   "engines": {
     "node": "6.1.0"
@@ -46,12 +46,11 @@
     "reactfire": "1.0.0",
     "scroll-behavior": "0.8.1",
     "setimmediate": "1.0.5",
-    "sw-precache": "^4.1.0",
-    "sw-toolbox": "^3.1.1",
     "url-parse": "^1.1.1"
   },
   "devDependencies": {
-    "html-webpack-plugin": "^2.22.0",
-    "webpack": "^1.13.2"
+    "html-webpack-plugin": "2.22.0",
+    "webpack": "1.13.2",
+    "workbox-build": "0.0.2"
   }
 }

public/index-static.html

@@ -36,9 +36,7 @@
     <div id="app"></div>
     <script>
     if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.register('./service-worker.js', {
-        scope: './'
-      })
+      navigator.serviceWorker.register('/service-worker.js')
       .then(function(registration) {
         registration.onupdatefound = function() {
           if (navigator.serviceWorker.controller) {

public/runtime-caching.js

@@ -1,2 +1,11 @@
-// This file is intentionally without code.
-// It's present so that service worker registration will work when serving from the 'public' directory.
+importScripts('https://unpkg.com/[email protected]');
+
+const workboxSW = new WorkboxSW({clientsClaim: true});
+
+// This array will be populated by workboxBuild.injectManifest() when the
+// production service worker is generated.
+workboxSW.precache([]);
+
+workboxSW.router.setDefaultHandler({
+  handler: workboxSW.strategies.staleWhileRevalidate()
+});