Werk hoofdapplicatie bij

Legt de bestaande wijzigingen in de hoofdworktree vast voordat de laatste worktree wordt gemerged.\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

public/service-worker.js

@@ -0,0 +1,98 @@
+const CACHE_NAME = 'pantryhub-v2';
+const urlsToCache = [
+    '/',
+    '/css/style.css',
+    '/js/app.js',
+    '/manifest.json',
+    '/icons/icon.svg'
+];
+
+// Install event
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches.open(CACHE_NAME).then((cache) => {
+            return cache.addAll(urlsToCache).catch(err => {
+                console.log('Cache addAll error:', err);
+            });
+        })
+    );
+});
+
+// Activate event
+self.addEventListener('activate', (event) => {
+    event.waitUntil(
+        caches.keys().then((cacheNames) => {
+            return Promise.all(
+                cacheNames.map((cacheName) => {
+                    if (cacheName !== CACHE_NAME) {
+                        return caches.delete(cacheName);
+                    }
+                })
+            );
+        })
+    );
+});
+
+// Fetch event
+self.addEventListener('fetch', (event) => {
+    // Skip non-GET requests
+    if (event.request.method !== 'GET') {
+        return;
+    }
+
+    // Browser extensions and third-party resources cannot be stored by Cache API.
+    // Only handle same-origin HTTP(S) requests belonging to PantryHub.
+    const url = new URL(event.request.url);
+    if (!['http:', 'https:'].includes(url.protocol) || url.origin !== self.location.origin) {
+        return;
+    }
+
+    // For API calls, use network-first strategy
+    if (event.request.url.includes('/api/')) {
+        event.respondWith(
+            fetch(event.request)
+                .then(response => {
+                    const responseClone = response.clone();
+                    caches.open(CACHE_NAME).then(cache => {
+                        cache.put(event.request, responseClone);
+                    });
+                    return response;
+                })
+                .catch(() => {
+                    return caches.match(event.request);
+                })
+        );
+        return;
+    }
+
+    // For other requests, use cache-first strategy
+    event.respondWith(
+        caches.match(event.request)
+            .then(response => {
+                if (response) {
+                    return response;
+                }
+                return fetch(event.request).then(response => {
+                    if (!response || response.status !== 200 || response.type !== 'basic') {
+                        return response;
+                    }
+                    const responseClone = response.clone();
+                    caches.open(CACHE_NAME)
+                        .then(cache => {
+                            cache.put(event.request, responseClone);
+                        });
+                    return response;
+                });
+            })
+            .catch(() => {
+                // Return offline page or empty response
+                return new Response('Offline - pagina niet beschikbaar', {
+                    status: 503,
+                    statusText: 'Service Unavailable',
+                    headers: new Headers({
+                        'Content-Type': 'text/plain'
+                    })
+                });
+            })
+    );
+});