feat: Implement HLS video segment preloading and caching using a service worker.

public/sw.js

@@ -0,0 +1,54 @@
+const CACHE_NAME = 'video-cache-v1';
+
+self.addEventListener('install', (event) => {
+    self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+    event.waitUntil(
+        caches.keys().then((cacheNames) => {
+            return Promise.all(
+                cacheNames.map((cacheName) => {
+                    if (cacheName !== CACHE_NAME) {
+                        return caches.delete(cacheName);
+                    }
+                })
+            );
+        }).then(() => self.clients.claim())
+    );
+});
+
+self.addEventListener('fetch', (event) => {
+    const url = new URL(event.request.url);
+
+    // Intercept .ts file requests
+    if (url.pathname.endsWith('.ts')) {
+        event.respondWith(
+            caches.match(event.request, { ignoreSearch: true }).then((response) => {
+                // Cache hit - return response
+                if (response) {
+                    return response;
+                }
+
+                // Clone the request because it's a stream and can only be consumed once
+                const fetchRequest = event.request.clone();
+
+                return fetch(fetchRequest).then((response) => {
+                    // Check if we received a valid response
+                    if (!response || response.status !== 200 || response.type !== 'basic') {
+                        return response;
+                    }
+
+                    // Clone the response because it's a stream
+                    const responseToCache = response.clone();
+
+                    caches.open(CACHE_NAME).then((cache) => {
+                        cache.put(event.request, responseToCache);
+                    });
+
+                    return response;
+                });
+            })
+        );
+    }
+});