/* service-worker.js */
// This is your Service Worker file.
// It runs in the background, separate from the main browser thread.

// A unique name for your cache
const CACHE_NAME = 'js-files-cache-v1';
// The URLs to cache during installation (pre-caching)
const urlsToCache = [
    '/', // Your main application entry point
    '/index.html',
    '/styles/main.css',
    '/scripts/app.js',
    '/scripts/utility.js'
];

self.addEventListener('install', (event) => {
    // We activate pre-caching critical assets on install.
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then((cache) => {
                console.log('Opened cache:', CACHE_NAME);
                // Add all desired assets to the cache
                return cache.addAll(urlsToCache);
            })
            .catch((error) => {
                console.error('Failed to pre-cache assets:', error);
            })
    );
});

self.addEventListener('activate', (event) => {
    // We claim control of all clients immediately upon activation.
    event.waitUntil(
        self.clients.claim()
    );
    console.log('Service Worker activated.');
});


/* public/index.html (or your main application entry point) */
<script>
    // We register the Service Worker in the main thread.
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('/service-worker.js')
                .then((registration) => {
                    console.log('Service Worker registered with scope:', registration.scope);
                })
                .catch((error) => {
                    console.error('Service Worker registration failed:', error);
                });
        });
    }
</script>

/* service-worker.js (extending previous code) */

// Add a new function for the fetch event listener
self.addEventListener('fetch', (event) => {
    const requestUrl = new URL(event.request.url);

    // Prioritize network for HTML, API calls, or non-JS files if needed
    // For this example, we'll focus specifically on JS files for caching strategies
    if (requestUrl.pathname.endsWith('.js')) {
        // We implement a 'Network First' strategy for potentially frequently updated JS files.
        // This pattern prioritizes fresh content, falling back to cached versions if offline.
        // Ideal for main application bundles that might change often.
        // Uncomment the block below to activate 'Network First' for JS files.
        /*
        event.respondWith(
            fetch(event.request)
                .then((response) => {
                    // We clone the response as it can only be consumed once.
                    const responseClone = response.clone();
                    caches.open(CACHE_NAME)
                        .then((cache) => {
                            cache.put(event.request, responseClone);
                        });
                    return response;
                })
                .catch(() => {
                    return caches.match(event.request);
                })
        );
        return;
        */

        // We implement a 'Cache First' strategy for stable, rarely changing JS libraries.
        // This pattern prioritizes speed, serving cached content immediately.
        // Ideal for vendor libraries (e.g., React, Vue, jQuery) that are unlikely to change often.
        event.respondWith(
            caches.match(event.request)
                .then((response) => {
                    // Cache hit - we return response immediately.
                    if (response) {
                        console.log('Cache First: Serving from cache for', event.request.url);
                        return response;
                    }
                    // No cache hit - we fetch from network.
                    console.log('Cache First: Fetching from network for', event.request.url);
                    return fetch(event.request)
                        .then((networkResponse) => {
                            // We clone the response to store it in cache and return it.
                            const networkResponseClone = networkResponse.clone();
                            caches.open(CACHE_NAME)
                                .then((cache) => {
                                    cache.put(event.request, networkResponseClone);
                                });
                            return networkResponse;
                        });
                })
        );
    }
});

/* service-worker.js (further extending previous code) */

// Update urlsToCache for pre-caching. Consider adding a version hash to JS files for cache busting.
const CACHE_NAME = 'js-files-cache-v2'; // Increment cache version to trigger update
const urlsToCache = [
    '/',
    '/index.html',
    '/styles/main.css',
    '/scripts/app.v2.js', // Versioned JS file
    '/scripts/utility.v1.js'
];

// Ensure the install listener is updated to use the new CACHE_NAME and urlsToCache
// (The existing install listener from Part 1 should be modified or replaced with this)

self.addEventListener('fetch', (event) => {
    const requestUrl = new URL(event.request.url);

    if (requestUrl.pathname.endsWith('.js')) {
        // We implement 'Stale-While-Revalidate' for frequently accessed but updatable JS files.
        // This pattern delivers instant user experience while ensuring freshness in the background.
        event.respondWith(
            caches.open(CACHE_NAME).then(cache => {
                return cache.match(event.request).then(response => {
                    const fetchPromise = fetch(event.request).then(networkResponse => {
                        // We update the cache with the new response from the network.
                        cache.put(event.request, networkResponse.clone());
                        console.log('Stale-While-Revalidate: Updated cache for', event.request.url);
                        return networkResponse;
                    }).catch(() => {
                        // Handle network failure during revalidation if necessary.
                        console.log('Stale-While-Revalidate: Network fetch failed during revalidation for', event.request.url);
                    });

                    // We return cached response immediately if available, otherwise wait for network.
                    if (response) {
                        console.log('Stale-While-Revalidate: Serving stale from cache for', event.request.url);
                        return response;
                    } else {
                        console.log('Stale-While-Revalidate: No cache, fetching from network for', event.request.url);
                        return fetchPromise;
                    }
                });
            })
        );
    }
});

/* service-worker.js (final extension to complete the Service Worker logic) */

// Update the CACHE_NAME each time you make significant changes to your cached assets
const CACHE_NAME = 'js-files-cache-v3';
const urlsToCache = [
    '/',
    '/index.html',
    '/styles/main.css',
    '/scripts/app.v3.js', // Crucial: Update version hash for cache busting
    '/scripts/utility.v2.js',
    '/assets/image.png' // Example of another asset type
];

self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then((cache) => {
                console.log('Opened new cache:', CACHE_NAME);
                return cache.addAll(urlsToCache);
            })
    );
});

self.addEventListener('activate', (event) => {
    // We activate cache cleanup to remove old, outdated caches.
    event.waitUntil(
        caches.keys().then((cacheNames) => {
            return Promise.all(
                cacheNames.map((cacheName) => {
                    if (cacheName !== CACHE_NAME) {
                        console.log('Deleting old cache:', cacheName);
                        return caches.delete(cacheName);
                    }
                })
            );
        }).then(() => {
            // We claim control of all clients immediately upon activation.
            return self.clients.claim();
        })
    );
    console.log('Service Worker activated and old caches cleaned.');
});

self.addEventListener('fetch', (event) => {
    const requestUrl = new URL(event.request.url);

    // Example: Stale-While-Revalidate for JS files
    if (requestUrl.pathname.endsWith('.js')) {
        event.respondWith(
            caches.open(CACHE_NAME).then(cache => {
                return cache.match(event.request).then(response => {
                    const fetchPromise = fetch(event.request).then(networkResponse => {
                        cache.put(event.request, networkResponse.clone());
                        return networkResponse;
                    }).catch(() => {
                        // If network fails during revalidation, we might want to log or handle differently
                    });

                    return response || fetchPromise;
                });
            })
        );
    } else {
        // Default strategy for other assets (e.g., Cache First, falling back to network)
        event.respondWith(
            caches.match(event.request).then(response => {
                return response || fetch(event.request).then(networkResponse => {
                    // Only cache successful responses
                    if (!networkResponse || networkResponse.status !== 200 || networkResponse.type !== 'basic') {
                        return networkResponse;
                    }
                    const responseToCache = networkResponse.clone();
                    caches.open(CACHE_NAME).then(cache => {
                        cache.put(event.request, responseToCache);
                    });
                    return networkResponse;
                });
            })
        );
    }
});