Update service-worker.js

service-worker.js

@@ -1,31 +1,78 @@
-const CACHE_NAME = "woordjes-v1";
-
-const FILES = [
+const CACHE_NAME = "woordjes-v2";
+const OFFLINE_URLS = [
     "/learn.php",
+    "/manifest.json",
     "/assets/css/style.css",
-    "/assets/js/app.js"
+    "/assets/js/db.js",
+    "/assets/js/offline-engine.js",
+    "/assets/js/sync.js"
 ];
 
+/**
+ * INSTALL
+ * Cache basis assets voor offline gebruik
+ */
 self.addEventListener("install", (event) => {
     event.waitUntil(
         caches.open(CACHE_NAME).then((cache) => {
-            return cache.addAll(FILES);
+            return cache.addAll(OFFLINE_URLS);
         })
     );
+
+    self.skipWaiting();
 });
 
+/**
+ * ACTIVATE
+ * Oude caches opruimen
+ */
+self.addEventListener("activate", (event) => {
+    event.waitUntil(
+        caches.keys().then((keys) => {
+            return Promise.all(
+                keys.map((key) => {
+                    if (key !== CACHE_NAME) {
+                        return caches.delete(key);
+                    }
+                })
+            );
+        })
+    );
+
+    self.clients.claim();
+});
+
+/**
+ * FETCH STRATEGY
+ * - HTML/CSS/JS → cache-first
+ * - API → nooit cachen (offline engine regelt dit)
+ */
 self.addEventListener("fetch", (event) => {
 
-    const url = event.request.url;
+    const url = new URL(event.request.url);
 
-    // API NIET cachen (anders breekt je SRS)
-    if (url.includes("/api/")) {
+    // API NIET cachen
+    if (url.pathname.startsWith("/api/")) {
         return;
     }
 
     event.respondWith(
         caches.match(event.request).then((cached) => {
-            return cached || fetch(event.request);
+
+            if (cached) {
+                return cached;
+            }
+
+            return fetch(event.request).then((response) => {
+
+                const copy = response.clone();
+
+                caches.open(CACHE_NAME).then((cache) => {
+                    cache.put(event.request, copy);
+                });
+
+                return response;
+            });
         })
     );
 });