fixed registration problem of service worker (#1807)

* fixed registration problem of service worker

* added a test for service worker

* reused some existing code to avoid code duplication

Co-authored-by: Jeffrey Warren <jeff@unterbahn.com>

examples/lib/cache.js

@@ -1,6 +1,8 @@
+const { reject } = require("lodash");
+
 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');
@@ -22,6 +24,11 @@ var setupCache = function() {
         registration.addEventListener('updatefound', () => {
           // When sw.js has been changed, get a reference to the new service worker.
           newWorker = registration.installing;
+
+          if(!newWorker){
+            return reject(new Error('error in installing service worker'));
+          }
+
           newWorker.addEventListener('statechange', () => {
             // Check if service worker state has changed.
             switch(newWorker.state) {
@@ -29,24 +36,23 @@ var setupCache = function() {
                 if(navigator.serviceWorker.controller) {
                   // New service worker available; prompt the user to update.
                   showUpdateModal();
+                  $('#reload').on('click',(e) => {
+                    e.preventDefault();
+                    console.log('New Service Worker Installed Successfully');
+                    location.reload();
+                    return resolve();
+                  })
                 }
                 // No updates available; do nothing.
                 break;
-            }
-          });
-        });
 
-        const installingWorker = registration.installing;
-        installingWorker.onstatechange = () => {
-          console.log(installingWorker);
-          if (installingWorker.state === 'installed') {
-            location.reload();
-          }
-        };
-        console.log('Registration successful, scope is:', registration.scope);
-      })
-      .catch(function(error) {
-        console.log('Service worker registration failed, error:', error);
+              case 'redundant':
+                return reject(new Error('installing new service worker now became redundant'));
+            }
+          })
+        })
+      }).catch(err => {
+        console.log('Failed In Registering Service Worker: ',err);
       });
 
       /**
@@ -69,21 +75,22 @@ var setupCache = function() {
     });
   }
 
-  $('#clear-cache').click(function() {
+  const clearCache = () => {
     if ('serviceWorker' in navigator) {
-      caches.keys().then(function(cacheNames) {
-        cacheNames.forEach(function(cacheName) {
-          caches.delete(cacheName);
-        });
+      return caches.keys()
+        .then(function(cache) {
+          return Promise.all(cache.map(function(cacheItem) {
+            return caches.delete(cacheItem);
+        }));
       });
     }
+  }
+
+  $('#clear-cache').click(function() {
+    clearCache();
     location.reload();
   });
 
-
-
-
-
 };
 
 module.exports = setupCache;