sw.js

// Use a version that you can update with each release
const APP_VERSION = '0.1.22';
const CACHE_NAME = `my-pwa-cache-${APP_VERSION}`;

// List of files to cache
const urlsToCache = [
    '/',
    '/css/styles.css',
    '/js/AudioStretchPlayer.js',
    '/js/BeatDetector.js',
    '/js/SignalsmithStretch.mjs',
    '/apple-touch-icon.png',
    '/favicon.ico',
    '/favicon.svg',
    '/favicon-96x96.png',
    '/icon512_rounded.png',
    '/web-app-manifest-192x192.png',
    '/web-app-manifest-512x512.png',
    '/log_mel_spec.onnx',
    '/beat_model.onnx',
    '/logits_to_bars.py',
    '/claves_high.mp3',
    '/claves_low.mp3',
];


// INSTALL EVENT: Pre-cache static resources.
self.addEventListener('install', (event) => {
    console.log('Service Worker: Installed');

    // Wait until the caching is complete
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then((cache) => {
                console.log('Service Worker: Caching Files');
                return cache.addAll(urlsToCache);
            })
            .then(() => self.skipWaiting()) // Force the waiting SW to become active
    );
});

// ACTIVATE EVENT: Clean up old caches.
self.addEventListener('activate', (event) => {
    console.log(' Service Worker: Activated');

    // Remove previous cached data from disk
    event.waitUntil(
        caches.keys().then((cacheNames) => {
            return Promise.all(
                cacheNames.map((cache) => {
                    if (cache !== CACHE_NAME) {
                        console.log('Service Worker: Clearing Old Cache');
                        return caches.delete(cache);
                    }
                })
            );
        })
    );
    // Allows the service worker to control the page immediately.
    return self.clients.claim();
});

// FETCH EVENT: Intercept network requests and serve cached content when available.
self.addEventListener('fetch', (event) => {
    console.log('Service Worker: Fetching', event.request.url);

    // Check if the request is made with 'http' or 'https'
    if (!(event.request.url.startsWith('http'))) {
        return;
    }

    event.respondWith(
        // Try to find the resource in the cache.
        caches.match(event.request)
            .then((response) => {
                // If found in cache, return it.
                if (response) {
                    return response;
                }

                // If not in cache, make a network request.
                return fetch(event.request)
                    .then((response) => {
                        // Check if we received a valid response
                        if (!response || response.status !== 200 || response.type !== 'basic') {
                            return response;
                        }

                        // IMPORTANT: Clone the response. A response is a stream
                        // and can only be consumed once.
                        const responseToCache = response.clone();

                        // Open the cache and add the new resource.
                        caches.open(CACHE_NAME)
                            .then((cache) => {
                                cache.put(event.request, responseToCache);
                            });

                        return response;
                    });
            }).catch(() => {
            // This is where you can provide a fallback page if both cache and network fail.
            // For example, you could return a custom offline page.
            // return caches.match('/offline.html');
        })
    );
});