feat: start PWA support

src/routes/+layout.svelte

@@ -18,6 +18,7 @@
 		dropping,
 	} from "$lib/store/index.svelte";
 	import "../app.scss";
+	import { log, error } from "$lib/logger";
 
 	let { children } = $props();
 
@@ -52,6 +53,23 @@
 		);
 
 		Settings.instance.load();
+
+		if ("serviceWorker" in navigator) {
+			navigator.serviceWorker
+				.register("/service-worker.js")
+				.then((registration) => {
+					log(
+						["PWA"],
+						`Service Worker registration successful with scope: ${registration.scope}`,
+					);
+				})
+				.catch((err) => {
+					error(
+						["PWA"],
+						`Service Worker registration failed: ${err}`,
+					);
+				});
+		}
 	});
 </script>
 
@@ -86,6 +104,7 @@
 		content="With VERT you can convert image and audio files to and from PNG, JPG, WEBP, MP3, WAV, FLAC, and more. No ads, no tracking, open source, and all processing is done on your device."
 	/>
 	<meta property="twitter:image" content={featuredImage} />
+	<link rel="manifest" href="/manifest.json" />
 	{#if PUB_PLAUSIBLE_URL}<script
 			defer
 			data-domain={PUB_HOSTNAME || "vert.sh"}

static/manifest.json

@@ -0,0 +1,21 @@
+{
+	"name": "VERT",
+	"short_name": "VERT",
+	"description": "The file converter you'll love",
+	"start_url": "/",
+	"display": "standalone",
+	"background_color": "#ffffff",
+	"theme_color": "#F2ABEE",
+	"icons": [
+		{
+			"src": "lettermark.jpg",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "lettermark.jpg",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	]
+}

static/service-worker.js

@@ -0,0 +1,19 @@
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open('vert-cache').then((cache) => {
+      return cache.addAll([
+        '/',
+        '/manifest.json',
+        '/lettermark.jpg',
+      ]);
+    })
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      return response || fetch(event.request);
+    })
+  );
+});