fix firefox worker problem

src/pages/home/home.html

@@ -34,4 +34,4 @@
     <div id="emoji-display-2"></div>
     <button id="okButton" style="display: none">OK</button>
   </div>
-</div>
+</div>

src/service-workers/cache.worker.js

@@ -0,0 +1,20 @@
+const addResourcesToCache = async (resources) => {
+    const cache = await caches.open("v1");
+    await cache.addAll(resources);
+  };
+  
+  self.addEventListener("install", (event) => {
+    event.waitUntil(
+      addResourcesToCache([
+        "/",
+        "/index.html",
+        "/style.css",
+        "/app.js",
+        "/image-list.js",
+        "/star-wars-logo.jpg",
+        "/gallery/bountyHunters.jpg",
+        "/gallery/myLittleVader.jpg",
+        "/gallery/snowTroopers.jpg",
+      ]),
+    );
+  });

src/service-workers/database.worker.js

@@ -1,5 +1,3 @@
-import Database from '../services/database.service';
-
 self.addEventListener('install', (event) => {
   event.waitUntil(self.skipWaiting()); // Activate worker immediately
 });
@@ -11,7 +9,6 @@ self.addEventListener('activate', (event) => {
 // Event listener for messages from clients
 self.addEventListener('message', async (event) => {
   const data = event.data;
-  const db = await Database.getInstance();
 
   if (data.type === 'ADD_OBJECT') {
     try {
@@ -19,7 +16,10 @@ self.addEventListener('message', async (event) => {
       const db = await openDatabase();
       const tx = db.transaction(storeName, 'readwrite');
       const store = tx.objectStore(storeName);
-      await store.put(object);
+      await store.put({
+        ...object,
+        modified: Date.now()
+      });
       event.ports[0].postMessage({ status: 'success', message: 'Object added or replaced successfully' });
     } catch (error) {
       event.ports[0].postMessage({ status: 'error', message: error.message });

src/services/database.service.ts

@@ -139,7 +139,7 @@ class Database {
     console.log('Received response from service worker (GET_OBJECT):', event.data);
   };
 
-  public addObject(payload: { storeName: string; object: any; key: any }) {
+  public async addObject(payload: { storeName: string; object: any; key: any }) {
     if (this.serviceWorkerRegistration?.active) {
       const messageChannel = this.createMessageChannel(this.handleAddObjectResponse);
       this.serviceWorkerRegistration.active.postMessage(
@@ -149,10 +149,19 @@ class Database {
         },
         [messageChannel.port2],
       );
+    } else {
+      const { storeName, object } = payload;
+      const db = await openDatabase();
+      const tx = db.transaction(storeName, 'readwrite');
+      const store = tx.objectStore(storeName);
+      await store.put({
+        ...object,
+        modified: Date.now()
+      });
     }
   }
 
-  public getObject(storeName: string, key: string) {
+  public async getObject(storeName: string, key: string) {
     if (this.serviceWorkerRegistration?.active) {
       const messageChannel = this.createMessageChannel(this.handleGetObjectResponse);
 
@@ -163,6 +172,16 @@ class Database {
         },
         [messageChannel.port2],
       );
+    } else {
+      const db = await openDatabase();
+      const tx = db.transaction(storeName, 'readonly');
+      const store = tx.objectStore(storeName);
+      const result = await new Promise((resolve, reject) => {
+        const getRequest = store.get(key);
+        getRequest.onsuccess = () => resolve(getRequest.result);
+        getRequest.onerror = () => reject(getRequest.error);
+      });
+      console.log("🚀 ~ Database ~ result ~ result:", result)
     }
   }
 }