feat: caching workers

messages/en.json

@@ -154,11 +154,20 @@
 			"custom_instance": "Custom"
 		},
 		"privacy": {
-			"title": "Privacy",
+			"title": "Privacy & data",
 			"plausible_title": "Plausible analytics",
 			"plausible_description": "We use [plausible_link]Plausible[/plausible_link], a privacy-focused analytics tool, to gather completely anonymous statistics. All data is anonymized and aggregated, and no identifiable information is ever sent or stored. You can view the analytics [analytics_link]here[/analytics_link] and choose to opt out below.",
 			"opt_in": "Opt-in",
-			"opt_out": "Opt-out"
+			"opt_out": "Opt-out",
+			"cache_title": "Cache management",
+			"cache_description": "We cache the converter files on your browser so you don't have to re-download them every time, improving performance and reducing data usage.",
+			"refresh_cache": "Refresh cache",
+			"clear_cache": "Clear cache",
+			"files_cached": "{size} ({count} files)",
+			"loading_cache": "Loading...",
+			"total_size": "Total Size",
+			"files_cached_label": "Files Cached",
+			"cache_cleared": "Cache cleared successfully!"
 		},
 		"language": {
 			"title": "Language",

src/lib/sections/settings/Privacy.svelte

@@ -1,12 +1,67 @@
 <script lang="ts">
 	import Panel from "$lib/components/visual/Panel.svelte";
-	import { ChartColumnIcon, PauseIcon, PlayIcon } from "lucide-svelte";
+	import {
+		ChartColumnIcon,
+		PauseIcon,
+		PlayIcon,
+		RefreshCwIcon,
+		Trash2Icon,
+	} from "lucide-svelte";
 	import type { ISettings } from "./index.svelte";
 	import { effects } from "$lib/store/index.svelte";
 	import { m } from "$lib/paraglide/messages";
 	import { link } from "$lib/store/index.svelte";
+	import { swManager, type CacheInfo } from "$lib/sw/register";
+	import { addToast } from "$lib/store/ToastProvider";
+	import { onMount } from "svelte";
+	import { error } from "$lib/logger";
 
 	const { settings = $bindable() }: { settings: ISettings } = $props();
+
+	let cacheInfo = $state<CacheInfo | null>(null);
+	let isLoadingCache = $state(false);
+
+	async function loadCacheInfo() {
+		if (isLoadingCache) return;
+		isLoadingCache = true;
+		try {
+			await swManager.init();
+
+			if ("serviceWorker" in navigator) {
+				await navigator.serviceWorker.ready;
+			}
+
+			if (!navigator.serviceWorker.controller) {
+				await new Promise((resolve) => setTimeout(resolve, 500));
+			}
+
+			cacheInfo = await swManager.getCacheInfo();
+		} catch (err) {
+			error(["privacy", "cache"], "Failed to load cache info:", err);
+		} finally {
+			isLoadingCache = false;
+		}
+	}
+
+	async function clearCache() {
+		if (isLoadingCache) return;
+		isLoadingCache = true;
+		try {
+			await swManager.clearCache();
+			cacheInfo = null;
+			await loadCacheInfo();
+			addToast("success", m["settings.privacy.cache_cleared"]());
+		} catch (err) {
+			error(["privacy", "cache"], "Failed to clear cache:", err);
+			addToast("error", "Failed to clear cache");
+		} finally {
+			isLoadingCache = false;
+		}
+	}
+
+	onMount(() => {
+		loadCacheInfo();
+	});
 </script>
 
 <Panel class="flex flex-col gap-8 p-6">
@@ -64,6 +119,70 @@
 					</div>
 				</div>
 			</div>
+			<div class="flex flex-col gap-4">
+				<div class="flex flex-col gap-2">
+					<p class="text-base font-bold">
+						{m["settings.privacy.cache_title"]()}
+					</p>
+					<p class="text-sm text-muted font-normal">
+						{m["settings.privacy.cache_description"]()}
+					</p>
+				</div>
+
+				<div class="grid grid-cols-2 gap-4">
+					<div class="bg-button p-4 rounded-lg">
+						<div class="text-sm text-muted">
+							{m["settings.privacy.total_size"]()}
+						</div>
+						<div class="text-lg font-bold flex items-center gap-2">
+							{#if isLoadingCache}
+								<RefreshCwIcon size="16" class="animate-spin" />
+								{m["settings.privacy.loading_cache"]()}
+							{:else}
+								{cacheInfo
+									? swManager.formatSize(cacheInfo.totalSize)
+									: "0 B"}
+							{/if}
+						</div>
+					</div>
+					<div class="bg-button p-4 rounded-lg">
+						<div class="text-sm text-muted">
+							{m["settings.privacy.files_cached_label"]()}
+						</div>
+						<div class="text-lg font-bold flex items-center gap-2">
+							{#if isLoadingCache}
+								<RefreshCwIcon size="16" class="animate-spin" />
+								{m["settings.privacy.loading_cache"]()}
+							{:else}
+								{cacheInfo?.fileCount ?? 0}
+							{/if}
+						</div>
+					</div>
+				</div>
+
+				<div class="flex gap-3 w-full">
+					<button
+						onclick={loadCacheInfo}
+						class="btn {$effects
+							? ''
+							: '!scale-100'} flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
+						disabled={isLoadingCache}
+					>
+						<RefreshCwIcon size="24" class="inline-block mr-2" />
+						{m["settings.privacy.refresh_cache"]()}
+					</button>
+					<button
+						onclick={clearCache}
+						class="btn {$effects
+							? ''
+							: '!scale-100'} flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
+						disabled={isLoadingCache}
+					>
+						<Trash2Icon size="24" class="inline-block mr-2" />
+						{m["settings.privacy.clear_cache"]()}
+					</button>
+				</div>
+			</div>
 		</div>
 	</div></Panel
 >

src/lib/sw/register.ts

@@ -0,0 +1,108 @@
+import { browser } from "$app/environment";
+
+export interface CacheInfo {
+	totalSize: number;
+	fileCount: number;
+	files: Array<{
+		url: string;
+		size: number;
+		type: string;
+	}>;
+}
+
+class ServiceWorkerManager {
+	private registration: ServiceWorkerRegistration | null = null;
+	private initialized = false;
+
+	async init(): Promise<void> {
+		if (!browser || !("serviceWorker" in navigator) || this.initialized) {
+			return;
+		}
+
+		try {
+			this.registration = await navigator.serviceWorker.register(
+				"/sw.js",
+				{
+					scope: "/",
+				},
+			);
+
+			this.initialized = true;
+		} catch (error) {
+			console.error(
+				"[SW Manager] service worker registration failed:",
+				error,
+			);
+		}
+	}
+
+	async getCacheInfo(): Promise<CacheInfo> {
+		if (!this.registration || !navigator.serviceWorker.controller) {
+			console.warn(
+				"[SW Manager] no service worker available for cache info",
+			);
+			return { totalSize: 0, fileCount: 0, files: [] };
+		}
+
+		return new Promise((resolve, reject) => {
+			const messageChannel = new MessageChannel();
+
+			messageChannel.port1.onmessage = (event) => {
+				resolve(event.data);
+			};
+
+			setTimeout(() => {
+				reject(new Error("Timeout waiting for cache info"));
+			}, 5000);
+
+			navigator.serviceWorker?.controller?.postMessage(
+				{ type: "GET_CACHE_INFO" },
+				[messageChannel.port2],
+			);
+		});
+	}
+
+	async clearCache(): Promise<void> {
+		if (!this.registration || !navigator.serviceWorker.controller) {
+			throw new Error("No service worker available for cache clearing");
+		}
+
+		return new Promise((resolve, reject) => {
+			const messageChannel = new MessageChannel();
+
+			messageChannel.port1.onmessage = (event) => {
+				if (event.data.success) {
+					resolve();
+				} else {
+					reject(
+						new Error(event.data.error || "Failed to clear cache"),
+					);
+				}
+			};
+
+			setTimeout(() => {
+				reject(new Error("Timeout waiting for cache clear"));
+			}, 10000);
+
+			navigator.serviceWorker?.controller?.postMessage(
+				{ type: "CLEAR_CACHE" },
+				[messageChannel.port2],
+			);
+		});
+	}
+
+	formatSize(bytes: number): string {
+		if (bytes === 0) return "0 B";
+		const k = 1024;
+		const sizes = ["B", "KB", "MB", "GB"];
+		const i = Math.floor(Math.log(bytes) / Math.log(k));
+		return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+	}
+}
+
+export const swManager = new ServiceWorkerManager();
+
+// Auto-initialize when imported
+if (browser) {
+	swManager.init();
+}

static/sw.js

@@ -0,0 +1,191 @@
+const CACHE_NAME = "vert-wasm-cache-v1";
+
+const WASM_FILES = [
+	"/pandoc.wasm",
+	"https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/esm/ffmpeg-core.js",
+	"https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/esm/ffmpeg-core.wasm",
+];
+
+const WASM_URL_PATTERNS = [
+	/\/src\/lib\/workers\/.*\.js$/, // dev mode worker files
+	/\/assets\/.*worker.*\.js$/, // prod worker files
+	/magick.*\.wasm$/, // magick-wasm (unneeded?)
+];
+
+function shouldCacheUrl(url) {
+	const urlObj = new URL(url);
+
+	if (WASM_FILES.includes(urlObj.pathname) || WASM_FILES.includes(url)) {
+		return true;
+	}
+
+	return WASM_URL_PATTERNS.some(
+		(pattern) => pattern.test(urlObj.pathname) || pattern.test(url),
+	);
+}
+
+self.addEventListener("install", (event) => {
+	console.log("[SW] installing service worker");
+
+	event.waitUntil(
+		caches.open(CACHE_NAME).then((cache) => {
+			const staticFiles = WASM_FILES.filter((file) =>
+				file.startsWith("/"),
+			);
+			if (staticFiles.length > 0) {
+				console.log("[SW] pre-caching static files:", staticFiles);
+				return cache.addAll(staticFiles).catch((err) => {
+					console.warn("[SW] failed to pre-cache some files:", err);
+				});
+			}
+		}),
+	);
+
+	self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+	event.waitUntil(
+		caches
+			.keys()
+			.then((cacheNames) => {
+				return Promise.all(
+					cacheNames.map((cacheName) => {
+						if (
+							cacheName !== CACHE_NAME &&
+							cacheName.startsWith("vert-wasm-cache")
+						) {
+							console.log("[SW] deleting old cache:", cacheName);
+							return caches.delete(cacheName);
+						}
+					}),
+				);
+			})
+			.then(() => {
+				return self.clients.claim();
+			}),
+	);
+});
+
+self.addEventListener("fetch", (event) => {
+	const request = event.request;
+
+	if (!shouldCacheUrl(request.url)) {
+		return; // Let the request go through normally if not a target URL
+	}
+
+    // else intercept request
+	event.respondWith(
+		caches.match(request).then((cachedResponse) => {
+			if (cachedResponse) {
+				console.log("[SW] serving from cache:", request.url);
+				return cachedResponse;
+			}
+
+			console.log("[SW] fetching and caching:", request.url);
+			return fetch(request)
+				.then((response) => {
+					if (!response.ok) {
+						console.warn(
+							"[SW] not caching failed response:",
+							response.status,
+							request.url,
+						);
+						return response;
+					}
+
+					const responseToCache = response.clone();
+					caches.open(CACHE_NAME).then((cache) => {
+						cache
+							.put(request, responseToCache)
+							.then(() => {
+								console.log(
+									"[SW] cached successfully:",
+									request.url,
+								);
+							})
+							.catch((err) => {
+								console.warn(
+									"[SW] failed to cache:",
+									request.url,
+									err,
+								);
+							});
+					});
+
+					return response;
+				})
+				.catch((err) => {
+					console.error("[SW] fetch failed for:", request.url, err);
+					throw err;
+				});
+		}),
+	);
+});
+
+self.addEventListener("message", (event) => {
+    if (!event.data) return;
+    const type = event.data.type;
+
+	if (type === "GET_CACHE_INFO") {
+		event.waitUntil(
+			caches.open(CACHE_NAME).then(async (cache) => {
+				const keys = await cache.keys();
+				let totalSize = 0;
+				const files = [];
+
+				for (const request of keys) {
+					try {
+						const response = await cache.match(request);
+						if (response) {
+							const blob = await response.blob();
+							const size = blob.size;
+							totalSize += size;
+
+							files.push({
+								url: request.url,
+								size: size,
+								type:
+									response.headers.get("content-type") ||
+									"unknown",
+							});
+						}
+					} catch (err) {
+						console.warn(
+							"[SW] failed to get info for cached file:",
+							request.url,
+							err,
+						);
+					}
+				}
+
+				event.ports[0].postMessage({
+					totalSize,
+					fileCount: files.length,
+					files,
+				});
+			}),
+		);
+	}
+
+	if (type === "CLEAR_CACHE") {
+		event.waitUntil(
+			caches
+				.delete(CACHE_NAME)
+				.then(() => {
+					console.log("[SW] cache cleared");
+					return caches.open(CACHE_NAME);
+				})
+				.then(() => {
+					event.ports[0].postMessage({ success: true });
+				})
+				.catch((err) => {
+					console.error("[SW] failed to clear cache:", err);
+					event.ports[0].postMessage({
+						success: false,
+						error: err.message,
+					});
+				}),
+		);
+	}
+});