Expand out offline app features for smoother cache clearing and version tracking (#1384)

* Add version number to bottom

* Get latest version number from GitHub

* Create versionManagement.js

Fetching the latest and local version number is now done through versionManagement.js

* Add popup to prompt for refresh when a new version is available

A new version is available whenever the sw.js file is changed.

* Add version number fixed in top right corner

* Fix Codeclimate issues

* Update versionManagement.js

* Update versionManagement.js

* Make update prompt appear at front of page

Changed z-index

* Delete unecessary code

* Create task to automatically update sw.js

Used grunt-text-replace

* Uninstall semver

* Add replace task to serve and production tasks

* Update demo.js

Make version statements more descriptive.

* Update versionManagement.js

Remove unused versionCompare function

* Change URL for getting latest version

Changed the URL for getting the latest NPM version to be based on the package.json file's attribute for "homepage".

* Update index.html

* Update demo.css

* Added explanatory comments

* Update versionManagement.js

* Update versionManagement.js

* Updates for readability

Changed single-line comments to multiline comments.

* Update versionManagement.js

* Update versionManagement.js

Co-authored-by: Harsh Khandeparkar <34770591+HarshKhandeparkar@users.noreply.github.com>
Co-authored-by: Jeffrey Warren <jeff@unterbahn.com>

examples/lib/cache.js

@@ -1,7 +1,41 @@
 var setupCache = function() {
+  let newWorker; // When sw.js is changed, this is the new service worker generated.
+
+  // Toggle a CSS class to display a popup prompting the user to fetch a new version.
+  function showUpdateModal() {
+    $('#update-prompt-modal').addClass('show');
+  }
+
+  /**
+  * When a new service worker has been loaded, the button in the update prompt
+  * modal should trigger the skipWaiting event to replace the current
+  * service worker with the new one.
+  */
+  $('#reload').on('click', function() {
+    newWorker.postMessage({ action: 'skipWaiting' });
+  });
+
   if ('serviceWorker' in navigator) {
+    // Register the service worker.
     navigator.serviceWorker.register('sw.js', { scope: '/examples/' })
       .then(function(registration) {
+        registration.addEventListener('updatefound', () => {
+          // When sw.js has been changed, get a reference to the new service worker.
+          newWorker = registration.installing;
+          newWorker.addEventListener('statechange', () => {
+            // Check if service worker state has changed.
+            switch(newWorker.state) {
+              case 'installed':
+                if(navigator.serviceWorker.controller) {
+                  // New service worker available; prompt the user to update.
+                  showUpdateModal();
+                }
+                // No updates available; do nothing.
+                break;
+            }
+          });
+        });
+
         const installingWorker = registration.installing;
         installingWorker.onstatechange = () => {
           console.log(installingWorker);
@@ -14,6 +48,17 @@ var setupCache = function() {
       .catch(function(error) {
         console.log('Service worker registration failed, error:', error);
       });
+
+      /**
+      * This is the event listener for when the service worker updates.
+      * When the service worker updates, reload the page.
+      */
+      let refreshing;
+      navigator.serviceWorker.addEventListener('controllerchange', function() {
+        if(refreshing) return;
+        window.location.reload();
+        refreshing = true;
+      });
   }
 
   if ('serviceWorker' in navigator) {
@@ -34,6 +79,11 @@ var setupCache = function() {
     }
     location.reload();
   });
+
+
+
+
+
 };
 
 module.exports = setupCache;

examples/lib/versionManagement.js

@@ -0,0 +1,43 @@
+/**
+ * Functions for getting version information.
+ * Note: these functions are not used by the service worker to check for updates;
+ * the service worker updates whenever sw.js has changed.
+ * sw.js is changed when grunt replace:version is run. This task is run during
+ * grunt build, serve, and productions tasks.
+ */
+
+const package = require('../../package.json');
+
+/**
+ * Get the current version number from package.json on the homepage.
+ * @param {function} callback The function that uses the version number.
+ */
+function getLatestVersionNumber(callback) {
+  // Get the homepage reference from the local package.json.
+  var homepage = package.homepage;
+  var request = new XMLHttpRequest();
+  request.onreadystatechange = function() {
+    if (request.readyState == 4 && request.status == 200) {
+      var response = JSON.parse(this.responseText);
+      var latestVersionNumber = response.version;
+
+      // Do something with the version number using a callback function.
+      if (callback)
+        callback(latestVersionNumber);
+    }
+  }
+
+  // Get the package.json file from online using a GET request.
+  request.open("GET", homepage + "/package.json", true);
+  request.send();
+}
+
+// Get the version number from the local package.json file.
+function getLocalVersionNumber() {
+  return package.version;
+}
+
+module.exports = {
+  getLatestVersionNumber,
+  getLocalVersionNumber
+}