feat: convert app to PWA with offline support and service worker

public/sw.js

@@ -0,0 +1,70 @@
+const CACHE_NAME = 'kit-ui-v1';
+const ASSETS_TO_CACHE = [
+  '/',
+  '/manifest.webmanifest',
+  '/icon.png',
+  '/wasm/magick.wasm',
+  '/wasm/ffmpeg-core.wasm',
+  '/wasm/ffmpeg-core.js',
+];
+
+// Install Event - Pre-cache core assets
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      console.log('Pre-caching assets');
+      return cache.addAll(ASSETS_TO_CACHE);
+    })
+  );
+  self.skipWaiting();
+});
+
+// Activate Event - Clean up old caches
+self.addEventListener('activate', (event) => {
+  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);
+          }
+        })
+      );
+    })
+  );
+  self.clients.claim();
+});
+
+// Fetch Event - Stale-while-revalidate strategy
+self.addEventListener('fetch', (event) => {
+  // Only handle GET requests
+  if (event.request.method !== 'GET') return;
+
+  // Skip browser extensions and non-http(s) requests
+  if (!event.request.url.startsWith('http')) return;
+
+  event.respondWith(
+    caches.match(event.request).then((cachedResponse) => {
+      const fetchPromise = fetch(event.request).then((networkResponse) => {
+        // Only cache valid responses
+        if (networkResponse && networkResponse.status === 200 && networkResponse.type === 'basic') {
+          const responseToCache = networkResponse.clone();
+          caches.open(CACHE_NAME).then((cache) => {
+            cache.put(event.request, responseToCache);
+          });
+        }
+        return networkResponse;
+      }).catch((err) => {
+        // If offline and not in cache, and it's a page navigation, return the root page
+        if (event.request.mode === 'navigate') {
+          return caches.match('/');
+        }
+        throw err;
+      });
+
+      // Return cached response if available, else wait for network
+      return cachedResponse || fetchPromise;
+    })
+  );
+});