add shitty WIP fix for preventing-cache

index.html

@@ -638,5 +638,17 @@
         </footer>
     </div>
     <script type="module" src="js/app.js"></script>
+<script>
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js').then(reg => {
+    reg.update();
+  });
+
+  navigator.serviceWorker.addEventListener('controllerchange', () => {
+    location.reload();
+  });
+}
+
+</script>
 </body>
 </html>

sw.js

@@ -1,66 +1,66 @@
-//sw.js
-const CACHE_NAME = 'monochrome-v4';
-const urlsToCache = [
-    '/',
-    '/index.html',
-    '/styles.css',
-    '/js/app.js',
-    '/js/api.js',
-    '/js/player.js',
-    '/js/storage.js',
-    '/js/ui.js',
-    '/js/utils.js',
-    '/js/cache.js',
-    '/js/router.js',
-    '/js/events.js',
-    '/js/ui-interactions.js',
-    '/js/settings.js',
-    '/js/lastfm.js',
-    '/js/lyrics.js',
-    '/js/downloads.js',
-    '/js/db.js',
-    '/js/metadata.js',
-    '/manifest.json',
-    '/assets/logo.svg',
-    '/assets/appicon.png',
-    '/assets/96.png'
+// sw.js
+const SW_VERSION = 'monochrome-v4'; // Note To Self: Change Every Deploy
+const CACHE_NAME = `monochrome-${SW_VERSION}`;
+
+const ASSETS = [
+  '/',
+  '/index.html',
+  '/styles.css',
+
+  '/js/app.js',
+  '/js/api.js',
+  '/js/player.js',
+  '/js/storage.js',
+  '/js/ui.js',
+  '/js/utils.js',
+  '/js/cache.js',
+  '/js/router.js',
+  '/js/events.js',
+  '/js/ui-interactions.js',
+  '/js/settings.js',
+  '/js/lastfm.js',
+  '/js/lyrics.js',
+  '/js/downloads.js',
+  '/js/db.js',
+  '/js/metadata.js',
+
+  '/manifest.json',
+  '/assets/logo.svg',
+  '/assets/appicon.png',
+  '/assets/96.png'
 ];
 
 self.addEventListener('install', event => {
-    self.skipWaiting();
-    event.waitUntil(
-        caches.open(CACHE_NAME)
-            .then(cache => cache.addAll(urlsToCache))
-    );
-});
-
-self.addEventListener('fetch', event => {
-    const url = new URL(event.request.url);
-
-    // Static Assets & App Shell (Cache-First)
-    event.respondWith(
-        caches.match(event.request)
-            .then(response => {
-                // Return cached response if found
-                if (response) return response;
-
-                // Otherwise fetch from network
-                return fetch(event.request);
-            })
-    );
+  self.skipWaiting();
+  event.waitUntil(
+    caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS))
+  );
 });
 
 self.addEventListener('activate', event => {
-    const cacheWhitelist = [CACHE_NAME];
-    event.waitUntil(
-        caches.keys().then(cacheNames => {
-            return Promise.all(
-                cacheNames.map(cacheName => {
-                    if (cacheWhitelist.indexOf(cacheName) === -1) {
-                        return caches.delete(cacheName);
-                    }
-                })
-            ).then(() => self.clients.claim());
-        })
-    );
-});
+  event.waitUntil(
+    caches.keys().then(keys =>
+      Promise.all(
+        keys
+          .filter(key => key !== CACHE_NAME)
+          .map(key => caches.delete(key))
+      )
+    )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener('fetch', event => {
+  const req = event.request;
+
+  if (req.mode === 'navigate') {
+    event.respondWith(fetch(req));
+    return;
+  }
+
+  event.respondWith(
+    caches.match(req).then(cached =>
+      cached || fetch(req)
+    )
+  );
+});