Better Way To Manage Cache

examples/demo.css

@@ -256,3 +256,7 @@ a.name-header{
     align-content: center;
     justify-content: center;
 }
+
+#clear-cache {
+    display: none;
+}

examples/lib/cache.js

@@ -17,10 +17,33 @@ var setupCache = function() {
   }
 
   if ('serviceWorker' in navigator) {
-    caches.keys().then(function(cacheNames) {
-      cacheNames.forEach(function(cacheName) {
-        $("#clear-cache").append(" " + cacheName);
-      });
+    if (!('indexedDB' in window) || window.location.toString().includes('localhost') || window.location.toString().includes('127.0.0.1')) {
+      console.log('No Cache Tracking');
+      caches.keys().then(function(cacheNames){
+        cacheNames.forEach(function(cacheName){
+          $('#clear-cache').append(" " + cacheName);
+        }
+        $('#clear-cache').fadeIn();
+      }
+      return;
+    }
+    var dbPromise = idb.open('cache-db', 1);
+    dbPromise.then(function(db) {
+      var tx = db.transaction('caches', 'readwrite');
+      var store = tx.objectStore('caches');
+      return store.get('new-cache-available');
+    }).then(function(out) {
+      if (out == undefined) return;
+      else {
+        $('#clear-cache').text(`New Version Available ${out.version}`).fadeIn();
+        var dbPromise = idb.open('cache-db', 1);
+        dbPromise.then(function(db) {
+          var tx = db.transaction('caches', 'readwrite');
+          var store = tx.objectStore('caches');
+          store.delete('new-cache-available');
+          return tx.complete;
+        });
+      }
     });
   }
 
@@ -36,4 +59,4 @@ var setupCache = function() {
   });
 }
 
-module.exports = setupCache;
+module.exports = setupCache;

examples/lib/sw.js

@@ -1,4 +1,29 @@
-const staticCacheName = 'image-sequencer-static-v3';
+const request = new XMLHttpRequest();
+request.open("GET", "../manifest.json", false);
+request.send(null);
+const meta = JSON.parse(request.responseText).metadata,
+      ver = meta.version,
+      betaVer = meta.betaVersion;
+const version = (self.location.toString().indexOf('beta') == 0 || self.location.toString().includes('localhost') || self.location.toString().includes('127.0.0.1')) ? betaVer : ver;
+
+const staticCacheName = `image-sequencer-static-v${version}`;
+
+
+const isVersionNewer = (version, old) => {
+    version = version.split('.');
+    var major = version[0],
+        minor = version[1],
+        patch = version[2];
+    old = old.split('.');
+    var oldMajor = old[0],
+        oldMinor = old[1],
+        oldPatch = old[2];
+
+    if (major > oldMajor) return true
+    else if (minor > oldMinor) return true
+    else if (patch > oldPatch) return true
+    else return false
+}
 
 self.addEventListener('install', event => {
   console.log('Attempting to install service worker');
@@ -10,9 +35,9 @@ self.addEventListener('activate', function(e) {
     caches.keys().then(function(cacheNames) {
       return Promise.all(
         cacheNames.filter(function(cacheName){
-          return cacheName.startsWith('image-sequencer-') &&
-                 cacheName != staticCacheName;
+          return isVersionNewer(staticCacheName.slice(-5), cacheName.slice(-5));
         }).map(function(cacheName){
+
           return caches.delete(cacheName);
         })
       );
@@ -22,14 +47,40 @@ self.addEventListener('activate', function(e) {
 
 self.addEventListener('fetch', function(event) {
   event.respondWith(
-    caches.open(staticCacheName).then(function(cache) {
-      return cache.match(event.request).then(function (response) {
-        return response || fetch(event.request).then(function(response) {
-          if(event.request.method == "GET")
-            cache.put(event.request, response.clone());
-          return response;
+    if (caches.keys().length < 1){
+      caches.open(staticCacheName).then(function(cache) {
+        return cache.match(event.request).then(function (response) {
+
+          return response || fetch(event.request).then(function(response) {
+            if(event.request.method == "GET")
+              cache.put(event.request, response.clone());
+              return response;
+          });
         });
       });
-    })
+      if (!('indexedDB' in window)) {
+        console.log('This browser doesn\'t support IndexedDB');
+        return;
+      }
+
+      var dbPromise = idb.open('cache-db', 1, function(upgradeDb) {
+        if (!upgradeDb.objectStoreNames.contains('caches')) {
+          var cachedb = upgradeDb.createObjectStore('cache', {keyPath: 'name'});
+
+        }
+      }
+      dbPromise.then(function(db) {
+        var tx = db.transaction('caches', 'readwrite');
+        var store = tx.objectStore('caches');
+        var item = {
+          name: 'new-cache-availalble',
+          version: staticCacheName,
+          created: new Date().getTime()
+        };
+        store.add(item);
+        return tx.complete;
+      })
+    }
+    else return false;
   );
-});
+});

examples/manifest.json

@@ -17,5 +17,9 @@
   "background_color": "#428bca",
   "display": "standalone",
   "scope": "/examples/",
-  "theme_color": "#428bca"
-}
+  "theme_color": "#428bca",
+  "metadata": {
+    "version": "3.0.0",
+    "betaVersion": "3.0.0"
+  }
+}