workbox

build-sw.js

@@ -0,0 +1,34 @@
+const fs = require('fs-extra')
+const pathmodule = require('path')
+const workbox = require('workbox-build')
+
+function build() {
+  const cwd = process.cwd();
+  const pkgPath = `${cwd}/node_modules/workbox-sw/package.json`;
+  const pkg = require(pkgPath);
+  const readPath = `${cwd}/node_modules/workbox-sw/${pkg.main}`;
+  let data = fs.readFileSync(readPath, 'utf8');
+  let path = `${cwd}/build/workbox-sw.js`;
+  console.log(`Writing ${path}.`);
+  fs.writeFileSync(path, data, 'utf8');
+  data = fs.readFileSync(`${readPath}.map`, 'utf8');
+  path = `${cwd}/build/${pathmodule.basename(pkg.main)}.map`;
+  console.log(`Writing ${path}.`);
+  fs.writeFileSync(path, data, 'utf8');
+
+  workbox.injectManifest({
+    globDirectory: './build/',
+    globPatterns: ['**\/*.{html,js,css,png,jpg,json}'],
+    globIgnores: ['sw-default.js', 'service-worker.js', 'workbox-sw.js', 'index.html'],
+    swSrc: './src/sw-template.js',
+    swDest: './build/sw-default.js',
+  }).then(_ => {
+    console.log('Service worker generated.')
+  })
+}
+
+try {
+  build();
+} catch(e) {
+  console.log(e);
+}

package.json

@@ -11,13 +11,15 @@
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.0.17",
     "react-test-renderer": "^16.2.0",
-    "react-transition-group": "^2.2.1"
+    "react-transition-group": "^2.2.1",
+    "workbox-build": "^2.1.2"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "react-scripts build && yarn sw",
     "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "sw": "node build-sw.js"
   },
   "devDependencies": {
     "chai": "^4.1.2",

src/registerServiceWorker.js

@@ -30,7 +30,8 @@ export default function register() {
     }
 
     window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+      const swUrl = `${process.env.PUBLIC_URL}/sw-default.js`;
+      // const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 
       if (isLocalhost) {
         // This is running on localhost. Lets check if a service worker still exists or not.

src/sw-template.js

@@ -0,0 +1,43 @@
+importScripts('/workbox-sw.js');
+//self.workbox.logLevel = self.workbox.LOG_LEVEL.verbose;
+
+const w = new self.WorkboxSW();
+
+self.addEventListener('install', event => event.waitUntil(self.skipWaiting()));
+self.addEventListener('activate', event => event.waitUntil(self.clients.claim()));
+
+w.precache([]);
+
+// app-shell
+w.router.registerRoute('/', w.strategies.networkFirst());
+w.router.registerRoute(/^\/$|home|profile|work|contact/, w.strategies.networkFirst());
+
+// webfont-cache
+const webFontHandler = w.strategies.cacheFirst({
+  cacheName: 'webfont-cache',
+  cacheExpiration: {
+    maxEntries: 20
+  },
+  cacheableResponse: { statuses: [0, 200] }
+});
+w.router.registerRoute(/https:\/\/fonts.googleapis.com\/.*/, webFontHandler);
+w.router.registerRoute(/https:\/\/fonts.gstatic.com\/.*/, webFontHandler);
+w.router.registerRoute(/https:\/\/use.fontawesome.com\/.*/, webFontHandler);
+
+// get-urls-cache
+const API = /https:\/\/us-central1-joanne-lee.cloudfunctions.net\/getUrls\/.*/;
+const apiHandler = w.strategies.networkFirst({
+  cacheName: 'get-urls-cache'
+});
+w.router.registerRoute(API, apiHandler);
+
+// work-images-cache
+w.router.registerRoute(/https:\/\/storage.googleapis.com\/joanne-lee.appspot.com\/.*/,
+  w.strategies.cacheFirst({
+    cacheName: 'work-images-cache',
+    cacheExpiration: {
+      maxEntries: 60
+    },
+    cacheableResponse: { statuses: [0, 200] }
+  })
+);

yarn.lock

@@ -2706,7 +2706,7 @@ [email protected]:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
 
-[email protected]:
+[email protected], fs-extra@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
   dependencies:
@@ -6668,6 +6668,21 @@ wordwrap@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
 
+workbox-build@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-2.1.2.tgz#5425094a83ac77c991b6060dd1df3d37984ef87e"
+  dependencies:
+    chalk "^1.1.3"
+    fs-extra "^3.0.1"
+    glob "^7.1.1"
+    lodash.template "^4.4.0"
+    mkdirp "^0.5.1"
+    workbox-sw "^2.1.2"
+
+workbox-sw@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-2.1.2.tgz#8f3a687c36f3b92ac2a66a08183bd3a163474b61"
+
 worker-farm@^1.3.1:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.5.2.tgz#32b312e5dc3d5d45d79ef44acc2587491cd729ae"