diff --git a/public/sw.js b/public/sw.js index 3d67e8a..8fc9c8a 100644 --- a/public/sw.js +++ b/public/sw.js @@ -1,34 +1,40 @@ -// A name for our cache, change this every time you update the app shell -const CACHE_NAME = 'timetracker-v2'; +const CACHE_NAME = 'timetracker-v3'; // Update this if you change anything! -// The files that make up the "app shell" +// Cache only local assets here. Avoid opaque external resources in addAll(). const urlsToCache = [ '/', '/index.html', + '/manifest.json' + // Add local JS/CSS files here if you have them, e.g., '/main.js', '/styles.css' ]; -// 1. Installation: Open the cache and add the app shell files. +// Install: Cache core files self.addEventListener('install', (event) => { + console.log('[SW] Install event'); + event.waitUntil( caches.open(CACHE_NAME) - .then((cache) => { - console.log('Opened cache and added app shell'); + .then(cache => { + console.log('[SW] Caching app shell:', urlsToCache); return cache.addAll(urlsToCache); }) + .catch(err => { + console.error('[SW] Install cache error:', err); + }) ); }); -// 2. Activation: Clean up old caches. (NEW) -// This event fires after install and when the new service worker takes control. +// Activate: Clean up old caches self.addEventListener('activate', (event) => { + console.log('[SW] Activate event'); + event.waitUntil( - caches.keys().then((cacheNames) => { + caches.keys().then(cacheNames => { return Promise.all( - cacheNames.map((cacheName) => { - // If a cache is not the current one, delete it. - if (cacheName !== CACHE_NAME) { - console.log('Deleting old cache:', cacheName); - return caches.delete(cacheName); + cacheNames.map(name => { + if (name !== CACHE_NAME) { + console.log('[SW] Deleting old cache:', name); + return caches.delete(name); } }) ); @@ -36,33 +42,39 @@ self.addEventListener('activate', (event) => { ); }); -// 3. Fetch: Serve from cache, fallback to network, and cache new requests. (IMPROVED) +// Fetch: Cache-first strategy with dynamic caching self.addEventListener('fetch', (event) => { - // We only want to cache GET requests - if (event.request.method !== 'GET') { - return; - } - + if (event.request.method !== 'GET') return; + + console.log('[SW] Fetch request:', event.request.url); + event.respondWith( caches.match(event.request) - .then((cachedResponse) => { - // If the response is in the cache, return it. + .then(cachedResponse => { if (cachedResponse) { + console.log('[SW] Serving from cache:', event.request.url); return cachedResponse; } - // If not in cache, go to the network. - return fetch(event.request).then((networkResponse) => { - // If the network request is successful, cache it for next time. - if (networkResponse && networkResponse.status === 200) { - const responseToCache = networkResponse.clone(); // Clone the response - caches.open(CACHE_NAME) - .then((cache) => { + return fetch(event.request) + .then(networkResponse => { + if ( + networkResponse && + networkResponse.status === 200 && + networkResponse.type !== 'opaque' + ) { + const responseToCache = networkResponse.clone(); + caches.open(CACHE_NAME).then(cache => { + console.log('[SW] Dynamically caching:', event.request.url); cache.put(event.request, responseToCache); }); - } - return networkResponse; - }); + } + return networkResponse; + }) + .catch(err => { + console.error('[SW] Network request failed:', event.request.url, err); + // Optionally, return a fallback page or image here + }); }) ); -}); \ No newline at end of file +});