Part 3: Fixing Service Worker

vfeskov · Dec 28, 2017 · d269f55e9f9c83cb6a67033499c51f5a778bdb4a · d269f55
1 parent 565abd8
commit d269f55e9f9c83cb6a67033499c51f5a778bdb4a
Unified Split

Showing with 232 additions and 4 deletions.

+129 −0 client/package-lock.json

+5 −2 client/package.json

+2 −2 client/src/index.js

+83 −0 client/src/service-worker.js

+13 −0 client/workbox-cli-config.js
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -10,11 +10,14 @@
    "react-redux": "^5.0.6",
    "react-scripts": "1.0.17",
    "redux": "^3.7.2",
-  
-    "redux-thunk": "^2.2.0"
+  
+    "redux-thunk": "^2.2.0",
+  
+    "workbox-cli": "^2.1.2",
+  
+    "workbox-sw": "^2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
-  
-    "build": "react-scripts build && npm run move-build-to-server",
+  
+    "build": "react-scripts build && npm run generate-sw && npm run move-build-to-server",
+  
+    "generate-sw": "workbox inject:manifest && cp node_modules/workbox-sw/build/importScripts/workbox-sw.prod* build",
    "move-build-to-server": "mv build _build && mv _build ../server && cd ../server && rm -rf public && mv _build public && mv public/index.html public/layout.html",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"

diff --git a/client/src/index.js b/client/src/index.js
@@ -3,7 +3,7 @@ import 'isomorphic-fetch'
 import ReactDOM from 'react-dom'
 import './index.css'
 import App from './App'
-  
-import { unregister } from './registerServiceWorker'
+  
+import registerServiceWorker from './registerServiceWorker'
 import thunkMiddleware from 'redux-thunk'
 import { Provider } from 'react-redux'
 import { createStore, applyMiddleware } from 'redux'
@@ -20,4 +20,4 @@ ReactDOM.render(
  document.getElementById('root')
 )
-  
-unregister()
+  
+registerServiceWorker()
diff --git a/client/src/service-worker.js b/client/src/service-worker.js
@@ -0,0 +1,83 @@
+  
+importScripts('workbox-sw.prod.v2.1.2.js')
+  
+
+  
+const workbox = new WorkboxSW({
+  
+  skipWaiting: true,
+  
+  clientsClaim: true
+  
+})
+  
+
+  
+// following array will be filled with filenames
+  
+// from `build/` folder when `generate-sw` script runs
+  
+workbox.precache([])
+  
+
+  
+// cache index.html when service worker gets installed
+  
+self.addEventListener('install', updateIndexCache)
+  
+
+  
+// the listener catches all http requests coming from
+  
+// the browser at my website
+  
+self.addEventListener('fetch', event => {
+  
+  const url = new URL(event.request.url)
+  
+  // I want to let event through without modifying if
+  
+  // any of the following conditions are met
+  
+  if (
+  
+    // if it's a request for a precached file
+  
+    isPrecached(url) ||
+  
+    // if it's a request for a static file (not index.html)
+  
+    isStaticFile(url) ||
+  
+    // if it's an external request to another domain
+  
+    isExternal(url) ||
+  
+    // if it's a GET request to /api/* url
+  
+    isGetApi(event, url)
+  
+  ) { return }
+  
+
+  
+  // when an API action happens, for example,
+  
+  // "DELETE /api/session" that logs user out,
+  
+  // I let the request through and update index.html
+  
+  // cache after it's done
+  
+  if (event.request.method !== 'GET') {
+  
+    return event.respondWith(
+  
+      fetch(event.request)
+  
+        .then(response => {
+  
+          updateIndexCache()
+  
+          return response
+  
+        })
+  
+    )
+  
+  }
+  
+
+  
+  // I serve index.html network-first on any request that
+  
+  // reached this line
+  
+  event.respondWith(
+  
+    fetch(indexRequest())
+  
+      .then(response => {
+  
+        updateIndexCache()
+  
+        return response
+  
+      })
+  
+      .catch(() => caches.match(indexRequest()))
+  
+  )
+  
+})
+  
+
+  
+function isPrecached({ href }) {
+  
+  return workbox._revisionedCacheManager._parsedCacheUrls.includes(href)
+  
+}
+  
+
+  
+function isStaticFile({ pathname }) {
+  
+  return pathname.includes('.') && pathname !== '/index.html'
+  
+}
+  
+
+  
+function isExternal({ origin }) {
+  
+  return origin !== location.origin
+  
+}
+  
+
+  
+// if your api has a different prefix, e.g., /api/v1/,
+  
+// just update RegExp accordingly
+  
+function isGetApi({ request }, { pathname }) {
+  
+  return request.method === 'GET' && /^\/api\/.+/.test(pathname)
+  
+}
+  
+
+  
+async function updateIndexCache() {
+  
+  const cache = await caches.open('dynamic-v1')
+  
+  cache.add(indexRequest())
+  
+}
+  
+
+  
+function indexRequest() {
+  
+  return new Request('index.html', { credentials: 'same-origin' })
+  
+}
diff --git a/client/workbox-cli-config.js b/client/workbox-cli-config.js
@@ -0,0 +1,13 @@
+  
+module.exports = {
+  
+  "globDirectory": "build/",
+  
+  "globPatterns": [
+  
+    "**/*.{json,ico,html,js,css,woff2,woff}"
+  
+  ],
+  
+  "swSrc": "./src/service-worker.js",
+  
+  "swDest": "build/service-worker.js",
+  
+  "globIgnores": [
+  
+    "../workbox-cli-config.js",
+  
+    "asset-manifest.json",
+  
+    "index.html"
+  
+  ]
+  
+};