feat(pwa): implement image caching and expand precache list in service worker

sw.js

@@ -1,5 +1,6 @@
 //sw.js
-const CACHE_NAME = 'monochrome-v1';
+const CACHE_NAME = 'monochrome-v3';
+const IMAGE_CACHE_NAME = 'monochrome-images-v1';
 const urlsToCache = [
     '/',
     '/index.html',
@@ -11,10 +12,20 @@ const urlsToCache = [
     '/js/ui.js',
     '/js/utils.js',
     '/js/cache.js',
-    '/manifest.json'
+    '/js/router.js',
+    '/js/events.js',
+    '/js/ui-interactions.js',
+    '/js/settings.js',
+    '/js/lastfm.js',
+    '/js/lyrics.js',
+    '/js/downloads.js',
+    '/manifest.json',
+    '/assets/logo.svg',
+    '/assets/appicon.png'
 ];
 
 self.addEventListener('install', event => {
+    self.skipWaiting();
     event.waitUntil(
         caches.open(CACHE_NAME)
             .then(cache => cache.addAll(urlsToCache))
@@ -22,14 +33,40 @@ self.addEventListener('install', event => {
 });
 
 self.addEventListener('fetch', event => {
+    const url = new URL(event.request.url);
+
+    // Cache Images (Cache-First)
+    if (url.hostname === 'resources.tidal.com' || url.hostname === 'picsum.photos') {
+        event.respondWith(
+            caches.open(IMAGE_CACHE_NAME).then(cache => {
+                return cache.match(event.request).then(response => {
+                    return response || fetch(event.request).then(networkResponse => {
+                        if (networkResponse.ok) {
+                            cache.put(event.request, networkResponse.clone());
+                        }
+                        return networkResponse;
+                    });
+                });
+            })
+        );
+        return;
+    }
+
+    // Static Assets & App Shell (Cache-First)
     event.respondWith(
         caches.match(event.request)
-            .then(response => response || fetch(event.request))
+            .then(response => {
+                // Return cached response if found
+                if (response) return response;
+
+                // Otherwise fetch from network
+                return fetch(event.request);
+            })
     );
 });
 
 self.addEventListener('activate', event => {
-    const cacheWhitelist = [CACHE_NAME];
+    const cacheWhitelist = [CACHE_NAME, IMAGE_CACHE_NAME];
     event.waitUntil(
         caches.keys().then(cacheNames => {
             return Promise.all(
@@ -38,7 +75,7 @@ self.addEventListener('activate', event => {
                         return caches.delete(cacheName);
                     }
                 })
-            );
+            ).then(() => self.clients.claim());
         })
     );
 });