// src/sw.ts // Make sure this file is in src/ as configured in vite.config.ts (srcDir & filename) // Ensure globalThis.skipWaiting and clientsClaim are available in the SW scope /// declare const self: ServiceWorkerGlobalScope & typeof globalThis & { skipWaiting: () => Promise }; import { clientsClaim } from 'workbox-core'; import { precacheAndRoute, cleanupOutdatedCaches, createHandlerBoundToURL, } from 'workbox-precaching'; import { registerRoute, NavigationRoute } from 'workbox-routing'; import { CacheFirst, NetworkFirst } from 'workbox-strategies'; import { ExpirationPlugin } from 'workbox-expiration'; import { CacheableResponsePlugin } from 'workbox-cacheable-response'; import type { WorkboxPlugin } from 'workbox-core/types'; self.skipWaiting().catch((error) => { console.error('Error during service worker activation:', error); }); clientsClaim(); // Use with precache injection // vite-plugin-pwa will populate self.__WB_MANIFEST precacheAndRoute(self.__WB_MANIFEST || []); // Provide a fallback empty array cleanupOutdatedCaches(); // Cache app shell and static assets with Cache First strategy registerRoute( ({ request }) => request.destination === 'style' || request.destination === 'script' || request.destination === 'image' || request.destination === 'font', new CacheFirst({ cacheName: 'static-assets', plugins: [ new CacheableResponsePlugin({ statuses: [0, 200], }) as WorkboxPlugin, new ExpirationPlugin({ maxEntries: 60, maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days }) as WorkboxPlugin, ], }) ); // Cache API calls with Network First strategy registerRoute( ({ url }) => url.pathname.startsWith('/api/'), // Make sure this matches your actual API path structure new NetworkFirst({ cacheName: 'api-cache', plugins: [ new CacheableResponsePlugin({ statuses: [0, 200], }) as WorkboxPlugin, new ExpirationPlugin({ maxEntries: 50, maxAgeSeconds: 24 * 60 * 60, // 24 hours }) as WorkboxPlugin, ], }) ); // Non-SSR fallbacks to index.html // Production SSR fallbacks to offline.html (except for dev) // Ensure PWA_FALLBACK_HTML and PWA_SERVICE_WORKER_REGEX are defined in vite.config.ts declare const PWA_FALLBACK_HTML: string; declare const PWA_SERVICE_WORKER_REGEX: RegExp; if (import.meta.env.MODE !== 'ssr' || import.meta.env.PROD) { registerRoute( new NavigationRoute(createHandlerBoundToURL(PWA_FALLBACK_HTML), { denylist: [PWA_SERVICE_WORKER_REGEX, /workbox-(.)*\.js$/], }), ); }