feat(offline): Add service worker

The main app components (index.html, .js bundle, png logo and background image) are pre-cached. ITK image IO's are cached on-demand.
Kitware · Sep 27, 2017 · 9a179ec · 9a179ec
1 parent 18fd004
commit 9a179ec
Show file tree

Hide file tree

Showing 6 changed files with 272 additions and 17 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -3,6 +3,19 @@
   <head>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script>
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', function () {
+          navigator.serviceWorker.register('./serviceWorker.js').then(function (registration) {
+            // Registration was successful
+            console.log('ServiceWorker registration successful with scope: ', registration.scope)
+          }, function (err) {
+            // registration failed :(
+            console.log('ServiceWorker registration failed: ', err)
+          })
+        })
+      }
+    </script>
     <link rel="icon" type="image/png" href="favicon-32x32.png">
   </head>
   <body>

diff --git a/dist/workbox-sw.prod.v2.0.1.js b/dist/workbox-sw.prod.v2.0.1.js
diff --git a/generate-sw.js b/generate-sw.js
@@ -0,0 +1,15 @@
+const workboxBuild = require('workbox-build')
+
+workboxBuild.injectManifest({
+  "globDirectory": "dist/",
+  "globPatterns": [
+    "*.{jpg,png,html,js}"
+  ],
+  "swSrc": "src/serviceWorker.js",
+  "swDest": "dist/serviceWorker.js",
+  "globIgnores": [
+    "serviceWorker.js"
+  ]
+}).then(() => {
+  console.log('The production service worker has been generated.');
+})
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,7 +25,8 @@
     "itk": "5.0.0",
     "kw-doc": "1.1.1",
     "kw-web-suite": "3.0.0",
-    "vtk.js": "3.0.4"
+    "vtk.js": "3.0.4",
+    "workbox-build": "^2.0.3"
   },
   "scripts": {
     "doc": "kw-doc -c ./doc/config.js",
@@ -34,8 +35,9 @@
     "build": "webpack --progress --colors",
     "build:debug": "webpack --progress --colors --display-modules",
     "build:release": "npm run build -- -p",
-    "postbuild:release": "npm run itk",
+    "postbuild:release": "npm run itk && npm run service-worker",
     "itk": "shx rm -rf ./dist/itk && shx cp -r ./node_modules/itk ./dist/",
+    "service-worker": "node generate-sw.js",
     "bundle": "StandaloneHTML ./dist/index.html ./dist/ItkVtkImageViewer.html",
     "commit": "git cz",
     "semantic-release": "semantic-release pre && npm publish && semantic-release post"

diff --git a/src/serviceWorker.js b/src/serviceWorker.js
@@ -0,0 +1,15 @@
+importScripts('workbox-sw.prod.v2.0.1.js');
+
+const workboxSW = new self.WorkboxSW({clientsClaim: true})
+workboxSW.precache([])
+
+workboxSW.router.registerRoute(
+  /\.js|\.png$/,
+  workboxSW.strategies.cacheFirst({
+  cacheName: 'cacheFirstContent',
+  cacheExpiration: {
+    maxEntries: 50,
+    maxAgeSeconds: 7 * 24 * 60 * 60 * 26,
+    }
+  })
+);