Added PWA support

public/icons/pwa-source.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<rect width="512" height="512" fill="#08090b" />
+	<path
+		d="M96 352 174 176l78 176h44l70-138 64 138"
+		fill="none"
+		stroke="#00db81"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="34"
+	/>
+</svg>

public/manifest.webmanifest

@@ -0,0 +1,30 @@
+{
+	"id": "/",
+	"name": "Music",
+	"short_name": "Music",
+	"description": "Your personal music library and player.",
+	"start_url": "/",
+	"scope": "/",
+	"display": "standalone",
+	"background_color": "#09090b",
+	"theme_color": "#09090b",
+	"categories": ["music", "entertainment"],
+	"icons": [
+		{
+			"src": "/icons/pwa-192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/icons/pwa-512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		},
+		{
+			"src": "/icons/pwa-maskable-512.png",
+			"sizes": "512x512",
+			"type": "image/png",
+			"purpose": "maskable"
+		}
+	]
+}

public/offline.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+		<meta name="theme-color" content="#09090b" />
+		<title>Offline · Music</title>
+		<style>
+			:root {
+				color-scheme: dark;
+				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+				background: #09090b;
+				color: white;
+			}
+			body {
+				min-height: 100vh;
+				margin: 0;
+				display: grid;
+				place-items: center;
+				text-align: center;
+			}
+			main {
+				max-width: 26rem;
+				padding: 2rem;
+			}
+			img {
+				width: 4rem;
+				height: 4rem;
+				margin-bottom: 1rem;
+			}
+			p {
+				color: #b8b8bd;
+				line-height: 1.5;
+			}
+			button {
+				margin-top: 1rem;
+				padding: 0.75rem 1.25rem;
+				border: 0;
+				border-radius: 999px;
+				background: #00db81;
+				color: #09090b;
+				font: inherit;
+				font-weight: 700;
+			}
+		</style>
+	</head>
+	<body>
+		<main>
+			<img src="/icons/pwa-192.png" alt="" />
+			<h1>You’re offline</h1>
+			<p>Reconnect to browse your library and play music.</p>
+			<button type="button" onclick="location.reload()">Try again</button>
+		</main>
+	</body>
+</html>

public/sw.js

@@ -0,0 +1,80 @@
+const SHELL_CACHE = "music-pwa-shell-v1"
+const ASSET_CACHE = "music-pwa-assets-v1"
+const OFFLINE_PAGE = "/offline.html"
+const SHELL_ASSETS = [
+	OFFLINE_PAGE,
+	"/icons/pwa-192.png",
+	"/icons/pwa-512.png",
+	"/icons/pwa-maskable-512.png",
+	"/icons/apple-touch-icon.png",
+]
+const SHELL_ASSET_PATHS = new Set(SHELL_ASSETS)
+
+self.addEventListener("install", (event) => {
+	event.waitUntil(
+		caches
+			.open(SHELL_CACHE)
+			.then((cache) => cache.addAll(SHELL_ASSETS))
+			.then(() => self.skipWaiting()),
+	)
+})
+
+self.addEventListener("activate", (event) => {
+	event.waitUntil(
+		caches.keys().then(async (keys) => {
+			await Promise.all(
+				keys
+					.filter(
+						(key) =>
+							key.startsWith("music-pwa-") &&
+							key !== SHELL_CACHE &&
+							key !== ASSET_CACHE,
+					)
+					.map((key) => caches.delete(key)),
+			)
+			await self.clients.claim()
+		}),
+	)
+})
+
+self.addEventListener("fetch", (event) => {
+	const request = event.request
+	if (request.method !== "GET") return
+
+	const url = new URL(request.url)
+	if (url.origin !== self.location.origin) return
+
+	if (request.mode === "navigate") {
+		event.respondWith(
+			fetch(request).catch(async () => {
+				const offlinePage = await caches.match(OFFLINE_PAGE)
+				return offlinePage ?? Response.error()
+			}),
+		)
+		return
+	}
+
+	if (SHELL_ASSET_PATHS.has(url.pathname)) {
+		event.respondWith(
+		caches.match(request).then((cached) => cached ?? fetch(request)),
+		)
+		return
+	}
+
+	if (url.pathname.startsWith("/_nuxt/")) {
+		event.respondWith(
+			caches.open(ASSET_CACHE).then(async (cache) => {
+				const cached = await cache.match(request)
+				if (cached) return cached
+
+				const response = await fetch(request)
+				if (response.ok) {
+					await cache.put(request, response.clone())
+					const entries = await cache.keys()
+					if (entries.length > 100) await cache.delete(entries[0])
+				}
+				return response
+			}),
+		)
+	}
+})