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/demo.css

@@ -315,8 +315,55 @@ a.name-header{
   color: #444;
 }
 
+#version-number-text {
+  text-align: center;
+  padding-top: 100px;
+  color: gray;
+}
+#version-number-top-right {
+  position: fixed;
+  right: 2%;
+  top: 5%;
+  color: lightgray;
+}
 /* Non float rightward alignment*/
 .right {
   margin-left: auto;
   display: block;
 }
+
+#update-prompt-modal {
+ visibility: hidden;
+ min-width: 250px;
+ margin-left: -125px;
+ background-color: #333;
+ color: #fff;
+ text-align: center;
+ border-radius: 2px;
+ padding: 16px;
+ position: fixed;
+ z-index: 1000;
+ left: 10%;
+ top: 30px;
+}
+#update-prompt-modal.show {
+ visibility: visible;
+ -webkit-animation: fadein 0.5s;
+ animation: fadein 0.5s;
+}
+@-webkit-keyframes fadein {
+ from {
+   opacity: 0;
+ }
+ to {
+   opacity: 1;
+ }
+}
+@keyframes fadein {
+ from {
+   opacity: 0;
+ }
+ to {
+   opacity: 1;
+ }
+}

examples/demo.js

@@ -3,7 +3,9 @@ var defaultHtmlSequencerUi = require('./lib/defaultHtmlSequencerUi.js'),
   intermediateHtmlStepUi = require('./lib/intermediateHtmlStepUi.js'),
   DefaultHtmlStepUi = require('./lib/defaultHtmlStepUi.js'),
   urlHash = require('./lib/urlHash.js'),
-  insertPreview = require('./lib/insertPreview.js');
+  insertPreview = require('./lib/insertPreview.js'),
+  versionManagement = require('./lib/versionManagement.js');
+
 
 window.onload = function () {
   sequencer = ImageSequencer(); // Set the global sequencer variable
@@ -28,6 +30,17 @@ window.onload = function () {
     }
   };
 
+  versionManagement.getLatestVersionNumber(function(versionNumber) {
+    console.log("The latest NPM version number for Image Sequencer (from GitHub) is v" + versionNumber);
+  });
+  console.log("The local version number for Image Sequencer is v" + versionManagement.getLocalVersionNumber());
+
+  function displayVersionNumber() {
+    $('#version-number-text').text("Image Sequencer v" + versionManagement.getLocalVersionNumber());
+    $('#version-number-top-right').text("v" + versionManagement.getLocalVersionNumber());
+  }
+  displayVersionNumber();
+
   function refreshOptions(options) {
     // Default options if parameter is empty.
     if (options == undefined) options = { sortField: 'text' };
@@ -310,7 +323,7 @@ window.onload = function () {
         step.options.step.imgElement.src = reader.result;
       else
         step.imgElement.src = reader.result;
-      
+
       insertPreview.updatePreviews(reader.result, document.querySelector('#addStep'));
       DefaultHtmlStepUi(sequencer).updateDimensions(step);
     },

examples/index.html

@@ -38,7 +38,7 @@
   <!-- jspdf to enable save image as pdf -->
   <script src="../node_modules/jspdf/dist/jspdf.min.js" type="text/javascript" ></script>
 
-  <script src="lib/scrollToTop.js"></script>
+  <!-- <script src="lib/scrollToTop.js"></script> -->
   <script src="../node_modules/selectize/dist/js/standalone/selectize.min.js"></script>
 </head>
 
@@ -56,6 +56,8 @@
   <link href="./selectize.default.css" rel="stylesheet">
   <link rel="stylesheet" href="demo.css">
 
+  <div id="update-prompt-modal">A new version of image sequencer is available. Click <a href="#" id="reload">here</a> to update.</div>
+
   <div class="container-fluid">
 
     <header class="text-center" style="min-width: 450px">
@@ -73,6 +75,7 @@
         </a>
         by <a href="https://publiclab.org" title="Publiclab Website"><i class="fa fa-globe"></i> Publiclab</a>
       </p>
+      <span id="version-number-top-right"></span>
     </header>
 
     <div id="dropzone" class="dropzone">
@@ -228,6 +231,9 @@
           </p>
         </div>
       </div>
+      <div class="row">
+        <p id="version-number-text">Unable to load version number</p>
+      </div>
     </footer>
 
     <button id="move-up"><i class="fa fa-arrow-circle-o-up"></i></button>
@@ -241,4 +247,4 @@
 
 </body>
 
-</html>
+</html>

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
+}

examples/sw.js

@@ -1,5 +1,4 @@
-const staticCacheName = 'image-sequencer-static-v3';
-
+const staticCacheName = 'image-sequencer-static-v3.5.1';
 self.addEventListener('install', event => {
   console.log('Attempting to install service worker');
 });
@@ -33,3 +32,10 @@ self.addEventListener('fetch', function(event) {
     })
   );
 });
+
+// When the update modal sends a 'skipWaiting' message, call the skipWaiting method.
+self.addEventListener('message', function(event) {
+  if(event.data.action === 'skipWaiting') {
+    self.skipWaiting();
+  }
+});