add service worker

index.html

@@ -21,7 +21,7 @@
 
     <div class="app-grid">
         <div class="card">
-            <h2>Upload & Loop</h2>
+            <h2>Upload & Play Loop</h2>
 
             <div id="serverStatus" class="server-status" style="display: none;">
                 Checking server status...
@@ -135,6 +135,23 @@
 </div>
 
 <script type="module">
+
+    // Check if the browser supports service workers
+    if ('serviceWorker' in navigator) {
+        // Wait for the window to load before registering
+        window.addEventListener('load', () => {
+            navigator.serviceWorker.register('/sw.js')
+                .then((registration) => {
+                    // Registration was successful
+                    console.log('ServiceWorker registration successful with scope: ', registration.scope);
+                })
+                .catch((error) => {
+                    // Registration failed
+                    console.log('ServiceWorker registration failed: ', error);
+                });
+        });
+    }
+
     import AudioStretchPlayer from '/js/AudioStretchPlayer.js';
     import BeatDetector from '/js/BeatDetector.js';
 

sw.js

@@ -0,0 +1,104 @@
+// A version for your cache. Change this to force an update.
+const CACHE_NAME = 'my-pwa-cache-v1';
+
+// List of files to cache immediately during the install step.
+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',
+    'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js'
+];
+
+
+// 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');
+        })
+    );
+});