// 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'); }) ); });