Added experimental Web Worker support

I am 99% sure I broke something here. I may be wrong. We'll see

static/js/generate.js

@@ -20,11 +20,11 @@ class MapManager {
     constructor() {
         this.config = {
             mapUrls: {
-                "xlarge": "static/media/bg16383.webp",
-                "large-nxtgen": "static/media/bg21600-nxtgen.jpg",
-                "large": "static/media/bg12000.jpg",
-                "blkmar": "static/media/bg13500-blkmar.jpg",
-                "normal": "static/media/bg8192.png",
+                "xlarge": "/static/media/bg16383.webp",
+                "large-nxtgen": "/static/media/bg21600-nxtgen.jpg",
+                "large": "/static/media/bg12000.jpg",
+                "blkmar": "/static/media/bg13500-blkmar.jpg",
+                "normal": "/static/media/bg8192.png",
             },
             selectors: {
                 mapIndicator: "#map-indicator",
@@ -50,13 +50,14 @@ class MapManager {
             statusIcon: document.querySelector(this.config.selectors.statusIcon)
         };
 
-        this.blueMarble = new Image();
-        this.blueMarble.crossOrigin = "anonymous";
+        this.worker = new Worker('/static/js/worker.js');
+        this.worker.onmessage = this.handleWorkerMessage.bind(this);
+
+        this.blueMarble = null;
 
         this.handleMapChange = this.handleMapChange.bind(this);
         this.handleButtonClick = this.handleButtonClick.bind(this);
-        this.handleMapLoad = this.handleMapLoad.bind(this);
-        this.handleMapError = this.handleMapError.bind(this);
+        this.handleWorkerMessage = this.handleWorkerMessage.bind(this);
 
         this.init();
     }
@@ -87,9 +88,6 @@ class MapManager {
                 this.handleButtonClick(button.dataset.size);
             });
         });
-
-        this.blueMarble.addEventListener('load', this.handleMapLoad);
-        this.blueMarble.addEventListener('error', this.handleMapError);
     }
 
     handleMapChange() {
@@ -102,23 +100,27 @@ class MapManager {
         this.showLoader();
     }
 
-    handleMapLoad() {
-        this.state.loaded = true;
-        this.hideLoader();
-        this.updateStatus('success');
-    }
-
-    handleMapError(error) {
-        console.error('Yikes. Something went wrong.', error);
-        this.hideLoader();
-        this.updateStatus('error');
+    handleWorkerMessage(event) {
+        const { status, blueMarble, error } = event.data;
+
+        if (status === 'success') {
+            this.blueMarble = blueMarble;
+            this.state.loaded = true;
+            this.hideLoader();
+            this.updateStatus('success');
+        } else {
+            console.error('Yikes. Something went wrong.', error);
+            this.hideLoader();
+            this.updateStatus('error');
+        }
     }
 
     loadMap(size) {
         const mapUrl = this.getMapUrl(size);
         if (mapUrl !== this.state.currentMap) {
             this.state.currentMap = mapUrl;
-            this.blueMarble.src = mapUrl;
+            this.state.loaded = false;
+            this.worker.postMessage({ url: mapUrl });
         }
     }
 

static/js/worker.js

@@ -0,0 +1,34 @@
+self.onmessage = async function (e) {
+    const { url } = e.data;
+
+    try {
+        // checking from cache first
+        const cache = await caches.open('map-cache');
+        let response = await cache.match(url);
+
+        if (!response) {
+            // if not in cache, fetch from network
+            response = await fetch(url);
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            // store in cache
+            await cache.put(url, response.clone());
+        }
+
+        const blob = await response.blob();
+        const blueMarble = await createImageBitmap(blob);
+
+        self.postMessage({
+            status: 'success',
+            blueMarble: blueMarble
+        }, [blueMarble]);
+    } catch (error) {
+        self.postMessage({
+            status: 'error',
+            error: error.message || 'Zamn! Something went wrong.'
+        });
+    }
+};