[test] switch to service workers

dont merge to live until can be confirmed to work well
2025-12-08 22:33:24 +00:00 · 2018-08-26 09:44:44 +10:00
parent afbfe3ea12
commit 0aecbbf892
7 changed files with 344 additions and 24 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -2455,6 +2455,12 @@
      "resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz",
      "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ=="
    },
+    "common-tags": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz",
+      "integrity": "sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==",
+      "dev": true
+    },
    "commondir": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -6984,6 +6990,12 @@
        "minimalistic-crypto-utils": "^1.0.1"
      }
    },
+    "hoek": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
+      "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==",
+      "dev": true
+    },
    "home-or-tmp": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
@@ -7830,6 +7842,23 @@
      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
    },
+    "isemail": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/isemail/-/isemail-3.1.3.tgz",
+      "integrity": "sha512-5xbsG5wYADIcB+mfLsd+nst1V/D+I7EU7LEZPo2GOIMu4JzfcRs5yQoypP4avA7QtUqgxYLKBYNv4IdzBmbhdw==",
+      "dev": true,
+      "requires": {
+        "punycode": "2.x.x"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+          "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+          "dev": true
+        }
+      }
+    },
    "isexe": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -8952,6 +8981,17 @@
        }
      }
    },
+    "joi": {
+      "version": "11.4.0",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-11.4.0.tgz",
+      "integrity": "sha512-O7Uw+w/zEWgbL6OcHbyACKSj0PkQeUgmehdoXVSxt92QFCq4+1390Rwh5moI2K/OgC7D8RHRZqHZxT2husMJHA==",
+      "dev": true,
+      "requires": {
+        "hoek": "4.x.x",
+        "isemail": "3.x.x",
+        "topo": "2.x.x"
+      }
+    },
    "js-base64": {
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.3.2.tgz",
@@ -9469,6 +9509,12 @@
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
      "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
    },
+    "lodash._reinterpolate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
+      "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
+      "dev": true
+    },
    "lodash.assignin": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/lodash.assignin/-/lodash.assignin-4.2.0.tgz",
@@ -9553,6 +9599,25 @@
      "integrity": "sha1-G7nzFO9ri63tE7VJFpsqlF62jk0=",
      "dev": true
    },
+    "lodash.template": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.4.0.tgz",
+      "integrity": "sha1-5zoDhcg1VZF0bgILmWecaQ5o+6A=",
+      "dev": true,
+      "requires": {
+        "lodash._reinterpolate": "~3.0.0",
+        "lodash.templatesettings": "^4.0.0"
+      }
+    },
+    "lodash.templatesettings": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz",
+      "integrity": "sha1-K01OlbpEDZFf8IvImeRVNmZxMxY=",
+      "dev": true,
+      "requires": {
+        "lodash._reinterpolate": "~3.0.0"
+      }
+    },
    "lodash.uniq": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -11104,6 +11169,12 @@
      "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=",
      "dev": true
    },
+    "pretty-bytes": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz",
+      "integrity": "sha1-sr+C5zUNZcbDOqlaqlpPYyf2HNk=",
+      "dev": true
+    },
    "pretty-error": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.1.tgz",
@@ -12728,6 +12799,15 @@
      "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=",
      "dev": true
    },
+    "topo": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/topo/-/topo-2.0.2.tgz",
+      "integrity": "sha1-zVYVdSU5BXwNwEkaYhw7xvvh0YI=",
+      "dev": true,
+      "requires": {
+        "hoek": "4.x.x"
+      }
+    },
    "toposort": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.6.tgz",
@@ -13403,6 +13483,171 @@
      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
      "dev": true
    },
+    "workbox-background-sync": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-3.4.1.tgz",
+      "integrity": "sha512-Ksb2nCg/2wOyBMhSBqSbtCEwuKaf5sHgTY8HdCxbLIQSzDh9/qZqg+1P11CKlgJmHtje3EK3B8EsrzukZo10xA==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^3.4.1"
+      }
+    },
+    "workbox-broadcast-cache-update": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/workbox-broadcast-cache-update/-/workbox-broadcast-cache-update-3.4.1.tgz",
+      "integrity": "sha512-+WPqHFk4ER4RICAMOYrP88yBbiUQ9ZOFNruqwbl9YxGfbADV16OEGmYpIs+Az6HT6DNDCx8eQqtFiaG8N3O11Q==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^3.4.1"
+      }
+    },
+    "workbox-build": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-3.4.1.tgz",
+      "integrity": "sha512-Qi04XdHjkXbRN0CV5XO1oqDWbJSIm7VYhxmxjtnVcKK8PrMT6rOUFUi9ziDI+8UQgcXbLK4ZChWf2ptZS1/MbA==",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "common-tags": "^1.4.0",
+        "fs-extra": "^4.0.2",
+        "glob": "^7.1.2",
+        "joi": "^11.1.1",
+        "lodash.template": "^4.4.0",
+        "pretty-bytes": "^4.0.2",
+        "workbox-background-sync": "^3.4.1",
+        "workbox-broadcast-cache-update": "^3.4.1",
+        "workbox-cache-expiration": "^3.4.1",
+        "workbox-cacheable-response": "^3.4.1",
+        "workbox-core": "^3.4.1",
+        "workbox-google-analytics": "^3.4.1",
+        "workbox-navigation-preload": "^3.4.1",
+        "workbox-precaching": "^3.4.1",
+        "workbox-range-requests": "^3.4.1",
+        "workbox-routing": "^3.4.1",
+        "workbox-strategies": "^3.4.1",
+        "workbox-streams": "^3.4.1",
+        "workbox-sw": "^3.4.1"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
+          "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        }
+      }
+    },
+    "workbox-cache-expiration": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/workbox-cache-expiration/-/workbox-cache-expiration-3.4.1.tgz",
+      "integrity": "sha512-AzOPB+dwfxg13v4+q5jWkxsw/oim9mPIzew1anu8ALA3vB8qySaJJToXp+ZlVh/Co+sDK0tgjlB76bvSFHgZ4g==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^3.4.1"
+      }
+    },
+    "workbox-cacheable-response": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-3.4.1.tgz",
+      "integrity": "sha512-SO2k830JT93GitPwc5tzJI49d9VwyVxXwiCbyvo+Sqo+dcvWSrmpsyuXdzy6zuasbPrWUF0vsFj1uGtZbOym8Q==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^3.4.1"
+      }
+    },
+    "workbox-core": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-3.4.1.tgz",
+      "integrity": "sha512-RqMV2so9/KLAu9aUxJ/85pvrZMUn835B8zoHmqRyGNetiDr8B1zSBeKXPZAjFlX/88KdhizNwiRlJtqlXtM4tA==",
+      "dev": true
+    },
+    "workbox-google-analytics": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-3.4.1.tgz",
+      "integrity": "sha512-w6Osz2Rr1/4+W0gram6Yzg6NNWLvHP51RwFCNAZSpEnipr0qSEtD+yvwrdaHfiJHWhcK2yH/V6E1MV8Hrczmvw==",
+      "dev": true,
+      "requires": {
+        "workbox-background-sync": "^3.4.1",
+        "workbox-core": "^3.4.1",
+        "workbox-routing": "^3.4.1",
+        "workbox-strategies": "^3.4.1"
+      }
+    },
+    "workbox-navigation-preload": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-3.4.1.tgz",
+      "integrity": "sha512-P3FHAcyZ8db2QiW/BpMkuosC1OkRsEoUaT7U3QOgg7JSjjsJoEbF7G5olNe+P+PQYdVhJA7TCuptI6dy2gLS/g==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^3.4.1"
+      }
+    },
+    "workbox-precaching": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-3.4.1.tgz",
+      "integrity": "sha512-ykU2mly9xmRrCW6iMeUWYydWiso/WSE16+7wponhI0WC53jiQSt2JvykWm0VpWFJSs6ZTSZZ1WK2gs/brRnPug==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^3.4.1"
+      }
+    },
+    "workbox-range-requests": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-3.4.1.tgz",
+      "integrity": "sha512-ktgjl6liZrRTmQjPw1pBblC5umHnTb8XcvFVitdGz17B23jj6cUV4EXzEU2ilGn6jO6+MLV1Vn9SWajtLSc2Gg==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^3.4.1"
+      }
+    },
+    "workbox-routing": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-3.4.1.tgz",
+      "integrity": "sha512-6j6cXMUYfMPYTycmElxVOfBTr6WV5zAn/JUFJ7GJ5pYFIE9cqztprnrcOsWJ42+AiNIeHPbKfyIWE/rZVviMxQ==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^3.4.1"
+      }
+    },
+    "workbox-strategies": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-3.4.1.tgz",
+      "integrity": "sha512-7mJuzFsgejflzjfnChXCFma1S0mi9WC6wlSU2wE50M7bJmEuf9A3j3MojpKcsTEM58hbhbnU6QF/u9iIV7+opw==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^3.4.1"
+      }
+    },
+    "workbox-streams": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-3.4.1.tgz",
+      "integrity": "sha512-krw+5bp+oe9Za5c6WlTWM3SgZGfExYcqRSn1gsyYgKeXmgzTwf+DOb5Lwult0KSWlJfq8B3Wk7sW8Sl7lRzSbA==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^3.4.1"
+      }
+    },
+    "workbox-sw": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-3.4.1.tgz",
+      "integrity": "sha512-nnm2by5oaQGXRH7x4M5/n2KqjUGVmP4P8azUmJITnYa3DWVYn/ghDg3LJ5+h4A28vYq9V6ePgATaEPfb6B5pug==",
+      "dev": true
+    },
+    "workbox-webpack-plugin": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/workbox-webpack-plugin/-/workbox-webpack-plugin-3.4.1.tgz",
+      "integrity": "sha512-dwIaEJK27xbGKMQv1sbSjywxhfX74nMW1zgUP9XUtpFeykH0e5Dm1j7wbQezXU3mFoaO7xuzqwGpAFxMKc0xMA==",
+      "dev": true,
+      "requires": {
+        "json-stable-stringify": "^1.0.1",
+        "workbox-build": "^3.4.1"
+      }
+    },
    "worker-farm": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.5.1.tgz",
--- a/package.json
+++ b/package.json
@@ -65,9 +65,16 @@
    "babel-preset-react": "*",
    "babel-preset-stage-0": "*",
    "create-react-class": "^15.6.2",
-    "css-loader": "^0.28.0",
    "cross-env": "^5.1.4",
+    "css-loader": "^0.28.0",
    "d3-selection": "1",
+    "esdoc": "^1.1.0",
+    "esdoc-custom-theme": "^1.4.2",
+    "esdoc-ecmascript-proposal-plugin": "^1.0.0",
+    "esdoc-jsx-plugin": "^1.0.0",
+    "esdoc-publish-html-plugin": "^1.1.2",
+    "esdoc-react-plugin": "^1.0.1",
+    "esdoc-standard-plugin": "^1.0.0",
    "eslint": "3.19.0",
    "eslint-plugin-react": "^6.10.3",
    "expose-loader": "^0.7.3",
@@ -91,16 +98,10 @@
    "uglify-js": "^2.4.11",
    "url-loader": "^0.5.8",
    "webpack": "^2.4.1",
+    "webpack-bugsnag-plugins": "^1.1.1",
    "webpack-dev-server": "^2.4.4",
    "webpack-notifier": "^1.6.0",
-    "webpack-bugsnag-plugins": "^1.1.1",
-    "esdoc": "^1.1.0",
-    "esdoc-ecmascript-proposal-plugin": "^1.0.0",
-    "esdoc-jsx-plugin": "^1.0.0",
-    "esdoc-react-plugin": "^1.0.1",
-    "esdoc-standard-plugin": "^1.0.0",
-    "esdoc-publish-html-plugin": "^1.1.2",
-    "esdoc-custom-theme": "^1.4.2"
+    "workbox-webpack-plugin": "^3.4.1"
  },
  "dependencies": {
    "babel-polyfill": "*",
--- a/src/app/Coriolis.jsx
+++ b/src/app/Coriolis.jsx
@@ -322,14 +322,48 @@ export default class Coriolis extends React.Component {
   */
  componentWillMount() {
    // Listen for appcache updated event, present refresh to update view
-    if (window.applicationCache) {
-      window.applicationCache.addEventListener('updateready', () => {
-        if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
-          this.setState({ appCacheUpdate: true }); // Browser downloaded a new app cache.
+    // Check that service workers are registered
+    if ('serviceWorker' in navigator) {
+      // Your service-worker.js *must* be located at the top-level directory relative to your site.
+      // It won't be able to control pages unless it's located at the same level or higher than them.
+      // *Don't* register service worker file in, e.g., a scripts/ sub-directory!
+      // See https://github.com/slightlyoff/ServiceWorker/issues/468
+      const self = this;
+      navigator.serviceWorker.register('/service-worker.js').then(function(reg) {
+        // updatefound is fired if service-worker.js changes.
+        reg.onupdatefound = function() {
+          // The updatefound event implies that reg.installing is set; see
+          // https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#service-worker-container-updatefound-event
+          var installingWorker = reg.installing;
+
+          installingWorker.onstatechange = function() {
+            switch (installingWorker.state) {
+              case 'installed':
+                if (navigator.serviceWorker.controller) {
+                  // At this point, the old content will have been purged and the fresh content will
+                  // have been added to the cache.
+                  // It's the perfect time to display a "New content is available; please refresh."
+                  // message in the page's interface.
+                  console.log('New or updated content is available.');
+                  self.setState({ appCacheUpdate: true }); // Browser downloaded a new app cache.
+                } else {
+                  // At this point, everything has been precached.
+                  // It's the perfect time to display a "Content is cached for offline use." message.
+                  console.log('Content is now available offline!');
+                  self.setState({ appCacheUpdate: true }); // Browser downloaded a new app cache.
                }
+                break;
+
+              case 'redundant':
+                console.error('The installing service worker became redundant.');
+                break;
+            }
+          };
+        };
+      }).catch(function(e) {
+        console.error('Error during service worker registration:', e);
      });
    }
-
    window.onerror = this._onError.bind(this);
    window.addEventListener('resize', () => this.emitter.emit('windowResize'));
    document.getElementById('coriolis').addEventListener('scroll', () => this._tooltip());
--- a/src/index.ejs
+++ b/src/index.ejs
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html <%= htmlWebpackPlugin.options.appCache ? 'manifest=/' + htmlWebpackPlugin.options.appCache : '' %> >
+<html manifest="/">
  <head>
    <title>Coriolis EDCD Edition</title>
    <meta charset="UTF-8">
--- a/src/sw.js
+++ b/src/sw.js
@@ -0,0 +1,40 @@
+console.log('Hello from sw.js');
+
+if (workbox) {
+  console.log('Yay! Workbox is loaded 🎉');
+  workbox.routing.registerRoute(
+    new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
+    workbox.strategies.cacheFirst({
+      cacheName: 'google-fonts',
+      plugins: [
+        new workbox.expiration.Plugin({
+          maxEntries: 30
+        }),
+        new workbox.cacheableResponse.Plugin({
+          statuses: [0, 200]
+        })
+      ]
+    })
+  );
+  workbox.routing.registerRoute(
+    /\.(?:png|gif|jpg|jpeg|svg)$/,
+    workbox.strategies.cacheFirst({
+      cacheName: 'images',
+      plugins: [
+        new workbox.expiration.Plugin({
+          maxEntries: 60,
+          maxAgeSeconds: 30 * 24 * 60 * 60 // 30 Days
+        })
+      ]
+    })
+  );
+  workbox.routing.registerRoute(
+    /\.(?:js|css)$/,
+    workbox.strategies.staleWhileRevalidate({
+      cacheName: 'static-resources'
+    })
+  );
+  workbox.googleAnalytics.initialize();
+} else {
+  console.log('Boo! Workbox didn\'t load 😬');
+}
--- a/webpack.config.prod.js
+++ b/webpack.config.prod.js
@@ -3,7 +3,8 @@ const exec = require('child_process').exec;
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const AppCachePlugin = require('appcache-webpack-plugin');
+const { InjectManifest } = require('workbox-webpack-plugin');
+
 const { BugsnagSourceMapUploaderPlugin } = require('webpack-bugsnag-plugins');
 const pkgJson = require('./package');
 const buildDate = new Date();
@@ -75,12 +76,11 @@ module.exports = {
    new CopyDirPlugin(path.join(__dirname, 'src/schemas'), 'schemas'),
    new CopyDirPlugin(path.join(__dirname, 'src/images/logo/*'), ''),
    new CopyDirPlugin(path.join(__dirname, 'src/.htaccess'), ''),
-    new AppCachePlugin({
-      network: ['*'],
-      settings: ['prefer-online'],
-      exclude: ['index.html', /.*\.map$/],
-      output: 'coriolis.appcache'
-    })
+    new InjectManifest({
+      swSrc: './src/sw.js',
+      importWorkboxFrom: 'cdn',
+      swDest: 'service-worker.js'
+    }),
  ],
  module: {
    rules: [